image carousel using jquery
Permalink
I would like to implement a logo slider similar to the one displayed at the bottom of this site (http://www.sarasotabaywatch.org) where multiple small images are displayed at once, scolling together automatically.
Is there a concrete5 add-on that will do this? I can't tell from the descriptions.
Attempting to do my own (as a totally clueless hack), I got the jCarousellite_1.0.1.min.js file from the developer of the site mentioned above and saved it in a js folder within the Default Themes folder. I then modified the default.php by adding a div block to hold the images like so:
<div id="partners" class="jCarouselLite">
<?php
$z = new Area('Partners List');
$z->display($c);
?>
</div>
Then I used Concrete5 editor to add content to the new block, a bulleted list of images for the script to call like so:
<ul>
<li><img src="/index.php/download_file/view_inline/16/" alt="slide-5.jpg" width="186" height="111" /></a></li>
<li><img src="/index.php/download_file/view_inline/15/" alt="slide-4.jpg" width="185" height="111" /></a></li>
<li><img src="/index.php/download_file/view_inline/14/" alt="slide-3.jpg" width="185" height="111" /></a></li>
</ul>
The missing link .... how do get the page to call the script? As is, the web page just displays a bulleted set of images (duh!)!
Thanks for any help at all.
Is there a concrete5 add-on that will do this? I can't tell from the descriptions.
Attempting to do my own (as a totally clueless hack), I got the jCarousellite_1.0.1.min.js file from the developer of the site mentioned above and saved it in a js folder within the Default Themes folder. I then modified the default.php by adding a div block to hold the images like so:
<div id="partners" class="jCarouselLite">
<?php
$z = new Area('Partners List');
$z->display($c);
?>
</div>
Then I used Concrete5 editor to add content to the new block, a bulleted list of images for the script to call like so:
<ul>
<li><img src="/index.php/download_file/view_inline/16/" alt="slide-5.jpg" width="186" height="111" /></a></li>
<li><img src="/index.php/download_file/view_inline/15/" alt="slide-4.jpg" width="185" height="111" /></a></li>
<li><img src="/index.php/download_file/view_inline/14/" alt="slide-3.jpg" width="185" height="111" /></a></li>
</ul>
The missing link .... how do get the page to call the script? As is, the web page just displays a bulleted set of images (duh!)!
Thanks for any help at all.
If you click properties at the top of the page, there should be a box that says extra header content, you need to stick a snippet of js in it,
Thanks Mnkras for the answer. I'm still just getting the bulleted list, instead of the carousel. Does this look correct?
I added the following to the Additional Header area as you suggested:
I also tried adding these additional lines to the Additional Header area:
Neither seems to be working.
I added the following to the Additional Header area as you suggested:
<script type="text/javascript"> $(function() { $(".auto .jCarouselLite").jCarouselLite({ auto: 800, speed: 1000 }); }); </script>
I also tried adding these additional lines to the Additional Header area:
<script type="text/javascript" src="js/jcarousellite_1.0.1.min.js"></script> <script type="text/javascript" src="js/jquery.timers-1.2.js"></script>
Neither seems to be working.
