SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Member
    Join Date
    Nov 2013
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Problem with multiple slideshows on the same page

    Hello everyone. Recently, I tried to add some pictures slideshows on my website (gfxreq.com) and I cant get more than one to work. This is the code I'm using for the current slide that works:

    Code:
    <style type="text/css">
    
    .slider img{
    width:500px;
    height:150px;
    display:none;
    }
    
    </style>
    
    
    <script type="text/javascript">
    function Slider(){
    $(".slider #1").show("fade", 500);
    $(".slider #1").delay(5500).hide("slide", {direction: "left"}, 500);
    
      var sc=$(".slider img").size()
      var count=2;
      
      setInterval(function (){
      $(".slider #"+count).show("slide",{direction:"right"}, 500);
      $(".slider #"+count).delay(5500).hide("slide", {direction:"left"}, 500);
      
      if (count==sc){
      count=1;
      }else{
      count=count+ 1;
      }
      
      },6500);
      
     }
    
    </script>
    <div class="slider" align="right">
            <img id="1" src="images/projects/thumb_w3.png" border="0" />
            <img id="2" src="images/projects/GTA.png" border="0" />
            <img id="3" src="images/projects/thumb_w6.png" border="0" />
    </div>
    When I try to add 2 slideshows on the same page with a different code(modified only in the size section), they go from the first one to the second one. If any of you could show me how to get 2 or more slides to work with that code, it would be greatly appreciated!
    Last edited by Pullo; Nov 19, 2013 at 00:58. Reason: Added code tags

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,009
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Hi there,

    Welcome to the forums

    The problem you are having relates to the fact that you are trying to reference the images by id:

    Code:
    $(".slider #"+count)
    As ids must be unique to a page, I am guessing that this is what is causing things to break.

    I took the liberty of rewriting your code a little.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"> 
    <html>
      <head>
        <base href="http://gfxreq.com/" />
        <meta charset="UTF-8"/>
        <title>Slider Demo</title>
        <style type="text/css">
          .slider img{
            width:500px;
            height:150px;
            display:none;
            border: 0;
          }
    
          .slider{
            float: right;
            margin-top: 15px;
          }
    
          .clear{
            clear: both;
          }
        </style>
      </head>
    
      <body>
        <div class="slider">
          <img src="images/projects/thumb_w3.png" />
          <img src="images/projects/GTA.png" />
          <img src="images/projects/thumb_w6.png" />
        </div>
    
        <br class="clear" />
    
        <div class="slider">
          <img src="images/projects/GTA.png" />
          <img src="images/projects/thumb_w6.png" />
          <img src="images/projects/thumb_w3.png" />
        </div>
    
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
    
        <script type="text/javascript">
          function displayNextSlide(slider){
            var currentImage = slider.find(".currentImage"),
                nextSlide = (currentImage.next().length === 0)? slider.children(':first') : currentImage.next();
            
            currentImage.delay(1500).hide("slide", {direction:"left"}, 500, function(){
              $(this).removeClass("currentImage");
              nextSlide.show("slide", {direction:"right"}, 500, function(){
                $(this).addClass("currentImage");
                displayNextSlide(slider);
              });
            });
          }
    
          function initSlider(slider){
            var images = slider.find('img');
            images.first().fadeIn(function(){
              $(this).addClass("currentImage");
              displayNextSlide(slider)
            });
          }
    
          $(".slider").each(function(){
            initSlider($(this));
          })
        </script>
      </body>
    </html>
    Here's a demo of two sliders working in conjunction.

    Also, please don't take this the wrong way, but your HTML is invalid. You are also mixing it with CSS and JavaScript which is a really bad practice.

    To fix the HTML I would recommend running it through the W3C Validator.
    Feel free to post back here if you need any help with this.

    Regarding the CSS and JS, all you need to do is separate these out.
    Notice in my code I have applied all of the styles from within the CSS, removing for example, the align="right" from the slider <div> tag.
    The JS should be placed before your closing </body> tag and you should avoid inline event handlers, e.g. <body onload="Slider()">.
    Again, feel free to post back here if you need a hand with this.

    HTH

  3. #3
    SitePoint Member
    Join Date
    Nov 2013
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the quick reply. I do have a problem though. Since I need to expose my artwork on the website, I am forced to use different slideshows with different sizes. Can you do one more code for me that contains one more slideshow with another size (eg. 400x600) and random pictures (a1,a2,a3)? Thanks.

  4. #4
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,009
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Hi,

    No problem.
    Just remove the CSS declarations that specify the image size, then add a new slider to the page.
    This does mean that you will have to size your images correctly prior to using them, however (which you have done).

    I updated my demo.

  5. #5
    SitePoint Member
    Join Date
    Nov 2013
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks alot, it works now. But there is a problem. Take a look at my website, the third photo of each slideshow overtakes the position of other slideshow. How can I fix that?

  6. #6
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,009
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Hi there,

    I'm sorry if this isn't what you want to hear, but your page in its current form is broken.

    Visually: there is a flicker every time the image changes. The content also overflows the container.

    HTML: Running http://gfxreq.com/ through the W3 Validator produces 62 Errors, 26 warning(s)

    JS: A quick look at the dev console shows:

    Code:
    Uncaught SyntaxError: Unexpected token < (index):77
    Uncaught ReferenceError: QueryLoader is not defined (index):754
    Invalid App Id: Must be a number or numeric string representing the application id. all.js:56
    FB.getLoginStatus() called before calling FB.init(). all.js:56
    FB.init has already been called - this could indicate a problem all.js:56
    Invalid App Id: Must be a number or numeric string representing the application id. all.js:56
    FB.getLoginStatus() called before calling FB.init(). all.js:56
    Failed to load resource: the server responded with a status of 404 (Not Found) http://gfxreq.com/images/projects/slide_w1_1.jpg
    Failed to load resource: the server responded with a status of 404 (Not Found) http://gfxreq.com/images/projects/slide_w1_2.jpg
    Failed to load resource: the server responded with a status of 404 (Not Found) http://gfxreq.com/images/projects/slide_w1_3.jpg
    Failed to load resource: the server responded with a status of 404 (Not Found) http://gfxreq.com/images/projects/slide_w1_4.jpg
    Failed to load resource: the server responded with a status of 404 (Not Found) http://gfxreq.com/images/projects/slide_w1_5.jpg
    Failed to load resource: the server responded with a status of 404 (Not Found) http://gfxreq.com/images/projects/slide_w1_6.jpg
    Failed to load resource: the server responded with a status of 404 (Not Found) http://gfxreq.com/images/projects/slide_w1_7.jpg
    Failed to load resource: the server responded with a status of 404 (Not Found) http://gfxreq.com/images/projects/slide_w1_8.jpg
    Failed to load resource: the server responded with a status of 404 (Not Found) http://gfxreq.com/images/projects/slide_w1_9.jpg
    Uncaught TypeError: Cannot read property 'msie' of undefined sp.js:114
    event.returnValue is deprecated. Please use the standard event.preventDefault() instead.
    2
    Uncaught TypeError: Object function (e,t){return new x.fn.init(e,t,r)} has no method 'curCSS'
    Quote Originally Posted by T33L View Post
    Take a look at my website, the third photo of each slideshow overtakes the position of other slideshow. How can I fix that?
    TBH, you can't with your page in its current state.
    You need to fix the validation errors and tidy up the code. Then it will be possible to proceed.

    If you would like a hand with any of the above, let us know and I'm sure we'll be able to help.

    Also, are you coding this site by hand or are you using a CMS?

  7. #7
    SitePoint Member
    Join Date
    Nov 2013
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry for the late answer, I have been busy doing my school projects. I fixed most of the errors on the website and updated the design a little. Thanks for everything .

  8. #8
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,009
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    No problem. Thanks for taking the time to report back


Bookmarks

Posting Permissions

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