Problem with multiple slideshows on the same page

JavaScript
1

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:

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

2

Hi there,

Welcome to the forums :slight_smile:

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

$(".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.

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

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

4

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

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

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:

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'

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

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

No problem. Thanks for taking the time to report back :slight_smile: