Jquery slideshow

[lostprophetpunk]

Hello there, I have been working on a website for a friend, and managed to implement a jquery slideshow into my design.

 

However, there is a problem with the slideshow...

 

When the slideshow first starts, it takes the image and information from the first slide...but displays the link for the last part in the slideshow. This means it shows the first slides image twice, but only displays the correct link once.

 

This is the jquery involved...

$(document).ready(function() {

//Execute the slideShow, set 6 seconds for each images
slideShow(5000);

});

function slideShow(speed) {


//append a LI item to the UL list for displaying caption
$('ul.slideshow').append('<li id="slideshow-caption" class="caption"><div class="slideshow-caption-container"><h3></h3><p></p></div></li>');

//Set the opacity of all images to 0
$('ul.slideshow li').css({opacity: 0.0});

//Get the first image and display it (set it to full opacity)
$('ul.slideshow li:first').css({opacity: 1.0});

//Get the caption of the first image from REL attribute and display it
$('#slideshow-caption h3').html($('ul.slideshow a:first').find('img').attr('title'));
$('#slideshow-caption p').html($('ul.slideshow a:first').find('img').attr('alt'));

//Display the caption
$('#slideshow-caption').css({opacity: 0.7, bottom:0});

//Call the gallery function to run the slideshow
var timer = setInterval('gallery()',speed);

//pause the slideshow on mouse over
$('ul.slideshow').hover(
        function () {
                clearInterval(timer);
        },
        function () {
                timer = setInterval('gallery()',speed);
        }
);

}

function gallery() {


//if no IMGs have the show class, grab the first image
var current = ($('ul.slideshow li.show')?  $('ul.slideshow li.show') : $('#ul.slideshow li:first'));

//Get next image, if it reached the end of the slideshow, rotate it back to the first image
var next = ((current.next().length) ? ((current.next().attr('id') == 'slideshow-caption')? $('ul.slideshow li:first') :current.next()) : $('ul.slideshow li:first'));

//Get next image caption
var title = next.find('img').attr('title');
var desc = next.find('img').attr('alt');

//Set the fade in effect for the next image, show class has higher z-index
next.css({opacity: 0.0}).addClass('show').animate({opacity: 1.0}, 1000);

//Hide the caption first, and then set and display the caption
$('#slideshow-caption').animate({bottom:-70}, 300, function () {
                //Display the content
                $('#slideshow-caption h3').html(title);
                $('#slideshow-caption p').html(desc);
                $('#slideshow-caption').animate({bottom:0}, 500);
});

//Hide the current image
current.animate({opacity: 0.0}, 1000).removeClass('show');

}

 

This is the html involved...

<ul class="slideshow" style="float: right;">
<li>
	<a href="watch/?film=vtpt1" title="Watch VT: Veneficus Terminus" target="_blank"><img src="images/film1.png" title="VT: Part 1" alt="A backstreet wand battle inspired by the potter movies" /></a>
</li>
<li>
	<a href="watch/?film=h1n1" title="Watch H1N1" target="_blank"><img src="images/film2.png" title="H1N1" alt="Five guys, one house and a shit load of zombies!" /></a>
</li>
<li>
	<a href="watch/?film=whit" title="Watch What Happens in Texas" target="_blank"><img src="images/film3.png" title="What Happens in Texas" alt="A gory intro scene inspired by the Texas Chainsaw Massacre" /></a>
</li>
<li>
	<a href="watch/?film=rwc" title="Watch Royale with Cheese" target="_blank"><img src="images/film4.png" title="Royale With Cheese" alt="Tarintino inspired short about two assassins on the job" /></a>
</li>
</ul>

 

If anyone could help, thanks in advance.

[brianlange]

Check for length when setting the current variable

var current = (($('ul.slideshow li.show').length > 0) ?  $('ul.slideshow li.show') : $('ul.slideshow li:first'));

 

Working example: http://gonavygolf.com/test6.html

[lostprophetpunk]

Check for length when setting the current variable

var current = (($('ul.slideshow li.show').length > 0) ?  $('ul.slideshow li.show') : $('ul.slideshow li:first'));

 

Working example: http://gonavygolf.com/test6.html

I thank you for the help. However, I have looked several times at the code on your example, and the code on the website I am making for my friend...it is exactly the same...

 

The problem still persists though.

 

I just don't know what's causing it.

[brianlange]

This is what is different

var current = (($('ul.slideshow li.show').length > 0) ?  $('ul.slideshow li.show') : $('ul.slideshow li:first'));

 

Your code does not have

$('ul.slideshow li.show').length > 0

 

[lostprophetpunk]

This is what is different

var current = (($('ul.slideshow li.show').length > 0) ?  $('ul.slideshow li.show') : $('ul.slideshow li:first'));

 

Your code does not have

$('ul.slideshow li.show').length > 0

 

But I added that in for the fix...which is why I posted about the problem persisting, rather than thanking you for solving the problem.

[brianlange]

Is my example not working for you or is it your website? Or both?

[lostprophetpunk]

Is my example not working for you or is it your website? Or both?

The example works fine, but when I place the exact code into my website...so it's exactly like the example...the problem persists rather than working smoothly.

[brianlange]

Can you post a url?

[lostprophetpunk]

Can you post a url?

Drewcasson.co.uk

[brianlange]

Your assignment for the variable current is off it should be

var current = (($('ul.slideshow li.show').length > 0 ) ?  $('ul.slideshow li.show') : $('ul.slideshow li:first'));

 

Remove the pound symbol for ul.slideshow li:first  and make sure the .lengeth > 0 is in there.

var current = ($('ul.slideshow li.show')?  $('ul.slideshow li.show') : $('#ul.slideshow li:first'));

 

Here's a working example using code from your site http://www.realtown.com/test32.php

Let me know when you have it working and I'll remove my test page.

 

 

 

[lostprophetpunk]

Your assignment for the variable current is off it should be

var current = (($('ul.slideshow li.show').length > 0 ) ?  $('ul.slideshow li.show') : $('ul.slideshow li:first'));

 

Remove the pound symbol for ul.slideshow li:first  and make sure the .lengeth > 0 is in there.

var current = ($('ul.slideshow li.show')?  $('ul.slideshow li.show') : $('#ul.slideshow li:first'));

 

Here's a working example using code from your site http://www.realtown.com/test32.php

Let me know when you have it working and I'll remove my test page.

Tried both of the bits of code you posted, they don't seem to work.

 

Looked at your test page and it appears the problem is occuring there as well.

 

As when you first load the page, it will load the picture of first slide as well as the title and caption. However, it will then display the link for what is the last slide, instead of the first.

 

Such as the first link should be "http://drewcasson.co.uk/watch/?film=vtpt1", whereas...if you hover over it is displays the targeting link of the last slide which is "http://drewcasson.co.uk/watch/?film=rwc".

[brianlange]

Gotcha. I think there is something weird going on because the li elements are give the opacity setting.

 

I got it to work using display none. http://www.realtown.com/test32.php But the fade in effect is not the same.

To get it working exactly I would try code that only adjust the opacity settings of the images. 

 

 

[lostprophetpunk]

Gotcha. I think there is something weird going on because the li elements are give the opacity setting.

 

I got it to work using display none. http://www.realtown.com/test32.php But the fade in effect is not the same.

To get it working exactly I would try code that only adjust the opacity settings of the images.

Whereabouts did you change it to display:none...as I cannot see it on the test page anywhere.

[brianlange]

In the javascript file. http://www.realtown.com/test32.js There are modifications to the slideShow function and the gallery function.

 

[lostprophetpunk]

In the javascript file. http://www.realtown.com/test32.js There are modifications to the slideShow function and the gallery function.

Thanks. I also want to thank you for the time you have put in to help me solve the problem.

[brianlange]

You're very welcome. I learned a lot in the process.