Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Jul 2012
    Posts
    17
    Thanks
    1
    Thanked 0 Times in 0 Posts

    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.
    Last edited by VIPStephan; 12-17-2012 at 11:49 AM. Reason: fixed code BB tag

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,930
    Thanks
    6
    Thanked 1,041 Times in 1,014 Posts
    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()
    });
    Last edited by VIPStephan; 12-17-2012 at 11:57 AM.

  • Users who have thanked VIPStephan for this post:

    tabbu (12-17-2012)

  • #3
    New Coder
    Join Date
    Jul 2012
    Posts
    17
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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.
    Last edited by tabbu; 12-17-2012 at 12:30 PM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •