Loading...
 
Features / Usability

Features / Usability


How to get an external jQuery plugin running in Tiki?

posts: 1563 Germany

Hello there,

for a small website I want to use a responsive slideshow on the HomePage, which I downloaded from a github repository. I think to solve this would mostlikely be a general issue, not only for this specific jQuery app and not only for this website.

Components

The jQuery is following:
http://responsiveslides.com (projects website)
https://github.com/viljamis/ResponsiveSlides.js (the slideshow on github)
1.6 and up supported, tested up to 1.8.3

My Tiki is a
Tiki pre-14 trunk latest build (.zip - FTP) from 27th November 2014.

What I did

  • directory /responsiveslider in the tikiroot

  • containing the files:
    responsiveslides.css
    responsiveslides.js
    responsiveslides.min.js

  • custom module created and applied, limited to the HomePage (nobox=y&page=HomePage)

  • custom module contains:
    Copy to clipboard
    <ul class="rslides"> <li><img src="dl3" alt=""></li> <li><img src="dl4" alt=""></li> <li><img src="dl5" alt=""></li> </ul>

  • css
    The CSS has been previously included directly in the moduly with a styles tag which worked, but now is included in the Admin -> Look and Feel -> Customisation, which works also.

  • I tried several spots to get the jQuery part running

    • tiki-setup.php
      Copy to clipboard
      $headerlib->add_jsfile('responsiveslider/responsiveslides.js');


      In the module:
      Copy to clipboard
      <script> $(function() { $(".rslides").responsiveSlides(); auto: true, // Boolean: Animate automatically, true or false speed: 500, // Integer: Speed of the transition, in milliseconds ... // further options }); </script>

      or
      Copy to clipboard
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script src="responsiveslider/responsiveslides.min.js"></script> <script> $(function() { $(".rslides").responsiveSlides(); }); </script>

      or
      Copy to clipboard
      {literal}{jq} $.getScript('responsiveslider/responsiveslides.min.js', function() { $(function() { $(".rslides").responsiveSlides(); }); }); {/jq}{/literal}

      or
      the last two examples in Admin -> Look and Feel -> Customisation aswell in Header custom code as in end of the BODY custom code


The problem

The slideshow does not start at all. I do obviously not find either the right code, or the right spot or both.

Anyway, I believe that it would be very important to have a clear understandable and spot on working tutorial to workout how to integrate external jQuery plugins or custom code.

And yes, I did review the existing pages in the documentation alike
https://doc.tiki.org/PluginJq
https://doc.tiki.org/jQuery
http://doc.tiki.org/Pretty+Tracker
as far as I found them.

Maybe I just do not see the obvious, cause I am not a coder, but anyway I need some help.

A helping hand would be appreciated.

Thx in advance,
Torsten

posts: 3665 United States

Try comparing the generatd HTML page from Tiki to the Responsive Slider demo.

  • Are all of the elements correctly generated?Use a tool such as Firebug to confirm that the responsiveslides.min.js script was located and loaded.Are any scripting errors dispalyed in you console?HTH,- Rick | My Tiki Blog | My Tiki UserPageWhy be a dummy? Get smarty! TikiForSmarties.comTiki for Smarties, your source for the best (and only) Tiki books, guides, and tutorials.

posts: 1563 Germany

S O L V E D


Hi Rick, thank you for your kind reply. Actually the issue could be solved with the help of Jyhem - Jean-Marc.


He realised (by using the Firebug Tool), that the script was running aready, but an error was stooping it before triggering the first slider change ..visually the slideshow appeared static, whilst it was running already.


Jyhem gabe me some advice later how to use the Firebug for JavaScript stuff, an area where I am not so much experienced ...


So what was the error?

The wrong code:

Copy to clipboard
$.getScript('responsiveslider/responsiveslides.min.js', function() { $(function() { $(".rslides").responsiveSlides(); auto: true, // Boolean: Animate automatically, true or false speed: 1200, // Integer: Speed of the transition, in milliseconds timeout: 8000, // Integer: Time between slide transitions, in milliseconds pager: false, // Boolean: Show pager, true or false nav: false, // Boolean: Show navigation, true or false


Especially the end of this line, before the options:

Copy to clipboard
$(".rslides").responsiveSlides(); auto: true,


A simple bracket (open+close) is missing:

Copy to clipboard
$(".rslides").responsiveSlides() { auto: true, etc. ... });


And one fuction call was doubled and placed wrong:

Copy to clipboard
$.getScript('responsiveslider/responsiveslides.min.js', function() { $(function() {


The full code in a custom module:

Copy to clipboard
{jq}$.getScript('responsiveslider/responsiveslides.min.js', function() { $(".rslides").responsiveSlides({ auto: true, // Boolean: Animate automatically, true or false speed: 1200, // Integer: Speed of the transition, in milliseconds timeout: 8000, // Integer: Time between slide transitions, in milliseconds pager: false, // Boolean: Show pager, true or false nav: false, // Boolean: Show navigation, true or false random: false, // Boolean: Randomize the order of the slides, true or false pause: false, // Boolean: Pause on hover, true or false pauseControls: false, // Boolean: Pause when hovering controls, true or false prevText: "Previous", // String: Text for the "previous" button nextText: "Next", // String: Text for the "next" button maxwidth: "", // Integer: Max-width of the slideshow, in pixels navContainer: "", // Selector: Where controls should be appended to, default is after the 'ul' manualControls: "", // Selector: Declare custom pager navigation namespace: "rslides", // String: Change the default namespace used before: function(){}, // Function: Before callback after: function(){} // Function: After callback });});{/jq} Sorry, the CKE Editor does not let me show the html content in the code plugin! OUCH! Anyway, here you just put an ul open then the list elements and then ul closed. In the li you can include img plugins and text and even ith the wiki tag and the literal tag arbitrary wikisyntax.


Please mind, that this can be used aswell on a wiki page, but with a little change:

1.) use a different syntax for the plugin:

Copy to clipboard
{JQ()}$.getScript('responsiveslider/responsiveslides.min.js', function() { $(".rslides").responsiveSlides({ auto: true, etc. ... });{JQ}


etc.

Copy to clipboard
after: function(){} // Function: After callback }); });


2.) and wrap the HTML tags in an HTML wiki plugin:

Copy to clipboard
{HTML()} Sorry, the CKE Editor does not let me show the html content in the code plugin! OUCH! Anyway, here you just put an ul open then the list elements and then ul closed. In the li you can include img plugns and text and even ith the wiki tag and the literal tag arbitrary wikisyntax. {HTML}


Hint:

If the jQuery plugin is used in a custom module, it is easily possible to use wiki syntax inside the li tags and thus optionally slide arbitrary wiki content instead or additionally to images.

Info:

My use of this method (wiki page or custom module) DOES NOT MEAN that other methods like adding to the headerlib in either tiki-setup.php or in a template would not work. I aswell have not yet evaluated the methods in Admin -> Look and Feel -> Customisation .

As I have now a proven working example, I will try to get all different methods to use external (non-legacy) jQuery plugins working and then provide a documentation about it, including a matrix about advantages and disaadvantages of the varius methods.

What I would find really cool, would be the use of the .j file from a Tiki file gallery ... I do not believe, that this could work, but I cross fingers and will test anyway.

Best regards,
Torsten


Upcoming Events

1)  18 Apr 2024 14:00 GMT-0000
Tiki Roundtable Meeting
2)  16 May 2024 14:00 GMT-0000
Tiki Roundtable Meeting
3)  20 Jun 2024 14:00 GMT-0000
Tiki Roundtable Meeting
4)  18 Jul 2024 14:00 GMT-0000
Tiki Roundtable Meeting
5)  15 Aug 2024 14:00 GMT-0000
Tiki Roundtable Meeting
6)  19 Sep 2024 14:00 GMT-0000
Tiki Roundtable Meeting
7) 
Tiki birthday
8)  17 Oct 2024 14:00 GMT-0000
Tiki Roundtable Meeting
9)  21 Nov 2024 14:00 GMT-0000
Tiki Roundtable Meeting
10)  19 Dec 2024 14:00 GMT-0000
Tiki Roundtable Meeting