Loading...
 
Features / Usability

Features / Usability


How to get an external jQuery plugin running in Tiki?

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:
    <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
      $headerlib->add_jsfile('responsiveslider/responsiveslides.js');


      In the module:
      <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
      <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
      {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

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.

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:

$.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:

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


A simple bracket (open+close) is missing:

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


And one fuction call was doubled and placed wrong:

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


The full code in a custom module:

{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:

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


etc.

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


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

{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

No records to display

Why Register?

Register at tiki.org and you'll be able to use the account at any *.tiki.org site, thanks to the InterTiki feature. A valid email address is required to receive site notifications and occasional newsletters. You can opt out of these items at any time.