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