Jump to content

Jquery slideshow


lostprophetpunk
 Share

Recommended Posts

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

 

 

 

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

This thread is more than a year old.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.