Question

I’ve got a jQuery slideshow on a clients website. The slideshow was working, but now it’s only displaying one of the three images in the slideshow, the last image. I’ve figured out that another script on the page is causing the error, but this script is necessary to display the drop down select menu’s and also displays the slideshow correctly. I don’t know why it’s no longer working and can’t find any way of fixing it.

This is the page: http://www.isis.com.au/projects-and-partnerships/projects.aspx

This is the resulting slideshow:

<div class="anythingFader">
  <div class="wrapper" style="overflow: hidden; opacity: 1;">
    <ul id="slider1"><li class="cloned"><img src="/media/158894/last_financial_year.jpg" alt=""></li><li><img src="/media/158882/last_5_years.jpg" alt=""></li><li><img src="/media/158888/last_3_years.jpg" alt=""></li><li><img src="/media/158894/last_financial_year.jpg" alt=""></li><li class="cloned"><img src="/media/158882/last_5_years.jpg" alt=""></li></ul>
  </div><a class="arrow forward">&gt;</a><a class="arrow back">&lt;</a>
<div id="thumbNav"><a href="#" class="">5 Years</a><a href="#" class="">3 Years</a><a href="#" class="cur">FY 2011/2012</a></div><a id="start-stop" href="#" class="playing">Pause</a></div>

The following javascript is causing the last image in the slideshow to remain displayed:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

I’ve tried placing the slideshow javascript before it, but then the slideshow doesn’t display correctly. It just displays frame with the images and scroll bars for the slideshow. These are the two javascripts required by the slideshow:

<script type="text/javascript" src="/Scripts/jquery_anythingfader.js" charset="utf-8"></script>

The slideshow should be running the same as it does on the home page: http://www.isis.com.au/

Can anyone suggest a better javascript to use, or how I can order the javascripts so that everything will display and run correctly?

Answer 1

Just from simple observation, in your slider < ul >, you have < li >’s containing images, the first and last, of which have class = “cloned”. That may be a good starting point – what does this class of “cloned” do? Perhaps that’s why you have the effect you observed for the last image.

Try digging into the source code, the solution rests in the javascript itself.

Make sure you import the jQuery first before the scripts that depend on it.

Hope it helps!