CodingForums.com

CodingForums.com (http://www.codingforums.com/index.php)
-   JavaScript frameworks (http://www.codingforums.com/forumdisplay.php?f=62)
-   -   multiple jquery slideshows on one page (http://www.codingforums.com/showthread.php?t=284280)

tabbu 12-17-2012 08:58 AM
multiple jquery slideshows on one page
 
Hello,

I'm trying to add two slide shows on to a page using a jquery plugin. I've tried a number of ways to do this without success, can anyone give me a solution to this problem?

Code:
<script>
                $(function(){
                        $('#slides').slides({
                                preload: true,
                                preloadImage: 'img/loading.gif',
                                play: 5000,
                                pause: 2500,
                                hoverPause: true,
                                animationStart: function(current){
                                        $('.caption').animate({
                                                bottom:-35
                                        },100);
                                        if (window.console && console.log) {
                                                // example return of current slide number
                                                console.log('animationStart on slide: ', current);
                                        };
                                },
                                animationComplete: function(current){
                                        $('.caption').animate({
                                                bottom:0
                                        },200);
                                        if (window.console && console.log) {
                                                // example return of current slide number
                                                console.log('animationComplete on slide: ', current);
                                        };
                                },
                                slidesLoaded: function() {
                                        $('.caption').animate({
                                                bottom:0
                                        },200);
                                }
                        });
                });
        </script>
I've tried to recreate the above code by changing the class and div id names but this didn't work either. I'm also using the slides.min.jquery.js plugin.

Thanks for any solutions to this.

VIPStephan 12-17-2012 10:54 AM
Well, the code has selectors that are too general. For example, if you have several slideshows, how should it know which .caption to address if all it say is “address the element with class .caption, anywhere in the document”? Either you copy the function and change the selectors for each specific slideshow or you work with the each() function, like:
Code:
$('.slides').each(function() {
  var el = $(this);
  var caption = el.find('.caption');
  el.slides({
    …
    (your slider code here)
    …
  });
// everytime when $('.caption').animate() occurs it should be replaced with the variable defined above, i. e. caption.animate()
});

tabbu 12-17-2012 11:26 AM
Ok solution found, and it was staring me in the face and way too easy, how silly this javaScript malarkey is.

Thanks for your swift reply.

What i did is copied the entire code and added:

$(function(){
$('#slides_two').slides({

Then added the #slides_two id to html and css put in my styling and hey presto it all works, probably not the most elegant solution but it works.

Yours seems far more elegant and efficient.
Thanks again.


All times are GMT +1. The time now is 12:10 AM.

Powered by vBulletin®
Copyright ©2000 - 2013, Jelsoft Enterprises Ltd.