jquery slide show

[dupalo]

Hi there,
I am having trouble with a jquery slideshow, here's the code:

 <script type="text/javascript">

$(function() {
var images = $('.home_page_pic img').hide();
var index = 0;
images.eq(index).show();

function swapImages()

{

images.eq(index).fadeOut(2000, function() {

index++;

if (index == images.length)

{

index = 0;

}
images.eq(index).fadeIn(2000, swapImages);
});

}

swapImages();


});     </script>

Here's the relevant html:

<div class="home_page_pic">
        <img src="images/animal_full_2.jpg" alt="">
          <img src="images/church_full_1.jpg" alt="">
          <img src="images/city_full_2.jpg" alt="">
          <img src="images/faith_full_1.jpg" alt="">
          <img src="images/flower_full_2.jpg" alt="">
          <img src="images/gloom_full_2.jpg" alt="">
        </div><!--END OF home_page_pic -->

The problem with this is that in chrome and opera at the first run of the script the big picture doesn't actually get replaced but it stays there and the other big pictures that are supposed to replace it appear instead at the bottom of it. Then at the second run, it all goes ok.

I think I have found what causes the problem, although I don't know how to resolve it.
I was looking at the script behaviour in chrome using the console when I noticed that at the first run of the script the first image "images/animal_full_2.jpg" keeps display:inline; rather than doing what all the rest of the pix do which is change the display property to "none"; this is what causes the first picture to remain in the box and the other ones that are supposed to replaced it in turn, to appear below instead.
Funnily enough, as I said in my previous post, this happens only on the first run of the script and only in chrome (and not also in opera as previously said).
I had a look at the jquery website at the .hide() method and it says that

If an element has a display value of inline, then is hidden and shown, it will once again be displayed inline.

.

Now, what I am doing in the script is to show first and then then hide pictures but, from what I understand, the .hide() method doesn't work properly on the first run because it is supposed to change the default display:inline; to display:none; and that's not happening.
I thought it was a css problem even, so I gave the div home_page_pic position relative and then absolute but nothing has happened. I checked this on different machines so I don't think it is my computer playing up
anybody's got a suggestion?
thanks

[rocknbil]

I do lots of these, but in a little different way. By all means, unless you need inline, set your images to block - I don't think that's the problem, but if you decide to put links around the images it makes a difference, the anchors need to be block too.

The second thing is it works on the second run because you're executing inline. Source code loads top to bottom, even if you put your code chunk at the bottom of the page, the actual image files haven't loaded yet. At the very least you want

$(function() {
swapImages();
});

or
$(window).load(
function() {
swapImages();
});
});

to insure the page and images have loaded.

I like to use Jon Raasch's method (google it) which is beautifully simple. You have a container element you set for position:relative so all position:absolute images inside it remain contained in the parent, and you can set z-index on images. Instead of show/hide, you change opacity on the classes active, inactive, and active-last. You'd use setInterval methods instead of jQuery's fade/show.

From the basic tutorial on his site, I've developed at least 50 variations involving sliders, start/stop controls, and simple static fade-in/outs, and incorporated them into various user-managed CMS's (seems like slide shows are the rage these days.) I've even extended it to change headings and introductory text to fade in and out in other areas of the page as the images change. You should check out his tutorial, search for slideshow Jon Raasch. :-)

[dupalo]

Hi rocknbil,
thanks for your post.
Right I changed the html now to:

        <div class="home_page_pic">
        <img src="images/animal_full_2.jpg" alt="" style="display:block">
          <img src="images/church_full_1.jpg" alt="" style="display:block">
          <img src="images/city_full_2.jpg" alt="" style="display:block">
          <img src="images/faith_full_1.jpg" alt="" style="display:block">
          <img src="images/flower_full_2.jpg" alt="" style="display:block">
          <img src="images/gloom_full_2.jpg" alt="" style="display:block">
        </div><!--END OF home_page_pic -->

So I made each image block, do I have to add

display:block;

in the css too?

I am not quite sure what you mean about the function

$(function() {
swapImages();
}); 

The script is already in the $(function){ });, I thought that would have been enough to ensure that the script runs after the images have loaded. SO are you saying is that I should do sth like:

$(function() {
var images = $('.home_page_pic img').hide();
var index = 0;
images.eq(index).show();
swapImages();
function swapImages()

{

images.eq(index).fadeOut(2000, function() {

index++;

if (index == images.length)

{

index = 0;

}
images.eq(index).fadeIn(2000, swapImages);
});

}

swapImages();



});

or should this bit

var images = $('.home_page_pic img').hide();
var index = 0;
images.eq(index).show();

be in

swapImage();

?
The problem is that the script runs before the images have loaded then correct?
About this other way to do it:

$(window).load(
function() {
swapImages();
});
}); 

Should the script be:

$(window).load(
function() {
var images = $('.home_page_pic img').hide();
var index = 0;
images.eq(index).show();
function swapImages()
{

images.eq(index).fadeOut(2000, function() {

index++;

if (index == images.length)

{

index = 0;

}
images.eq(index).fadeIn(2000, swapImages);
});


}
});

swapImages();
});

I have actually came across this Jon Raasch blog and his way to do image galleries but I quickly looked at the code and thought that I could have found sth a bit easier. But I think you're right and I might need to have a look at his way, although it seems a little too advanced for me, at first glance at least, as said I didn't spend much time on it
thanks

[rocknbil]

So I made each image block, do I have to add display:block; in the css too?

No, either/or, I prefer to set it in CSS. As it turns out, display properties are irrelevant, as you'll see . . .

I am not quite sure what you mean about the function

Sorry, I totally missed this due to the lack of formatting (at least, that's my story and I'm sticking to it) so, I owe you a working solution and here it is. :-) I slapped version 1.2.6 in there, it should work with any version of jquery.

You can sort out why this one works and your didn't, but off the top it looks like your swapImages function is nested inside $(function()... not sure what the effect of that was, but anyway here you go . . .

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html lang="en"> 
<head> 
 <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> 
 <title>Untitled</title> 
 <script type="text/javascript" src="js/jquery-1.2.6.min.js"></script> 
 <style type="text/css"> 
 /* other than the positioning properties, 
 the other values are for my test, set accordingly 
 */ 
 #home_page_pic,#home_page_pic img {  
 width:975px;  
 height: 375px;  
 } 
 #home_page_pic {  
 position: relative;  
 margin: 0 auto;  
 border: 1px solid #000;  
 } 
 #home_page_pic img { 
 /* Will default to top:0; left:0; which is what we want */ 
 position: absolute; 
 display:none; 
 } 
 </style> 
<script type="text/javascript"> 
$(window).load( 
 function() { 
 swapImages(); 
});  
// 
$(function() { 
 images = $('#home_page_pic img').hide(); 
 index = 0; 
 images.eq(index).show(); 
}); 
// 
function swapImages() { 
 images.eq(index).fadeOut(2000, function() { 
 index++; 
 if (index == images.length) { index = 0; } 
 images.eq(index).fadeIn(2000, swapImages); 
 }); 
} 
</script> 
</head> 
<body> 
<div id="home_page_pic"> 
<!-- use ID if only one on the page, class not necessary --> 
<img src="images/image-1.jpg" alt=""> 
<img src="images/image-2.jpg" alt=""> 
<img src="images/image-3.jpg" alt=""> 
<img src="images/image-4.jpg" alt=""> 
<img src="images/image-5.jpg" alt=""> 
<img src="images/image-6.jpg" alt=""> 
</div><!--END OF home_page_pic --> 
</body> 
</html> 

[dupalo]

Hi rocknbil,
I have tried this script:

$(window).load(
function() {
var images = $('.home_page_pic img').hide();
var index = 0;
images.eq(index).show();
function swapImages()
{

images.eq(index).fadeOut(2000, function() {

index++;



{

index = 0;

}
images.eq(index).fadeIn(2000, swapImages);
});


}

swapImages();
});

The good thing is that the slideshow is now smooth but for some reasons there is only 1 image, the rest of them disappear...

[dupalo]

sorry I posted this before I saw your post, I will have a look at it, and then post back

[dupalo]

rocknbil,
I had a look at your code and implemented it on the site, but it doesn't seem to work in that the image now doesn't change anymore, there is always one, have a look: [antobbo.webspace.virginmedia.com...]

I am looking at your script:

$(window).load(
 function() {
 swapImages();
});


$(function() {
 images = $('#home_page_pic img').hide();
 index = 0;
 images.eq(index).show();
});

function swapImages() {
 images.eq(index).fadeOut(2000, function() {
 index++;
 if (index == images.length) { index = 0; }
 images.eq(index).fadeIn(2000, swapImages);
 });
}

and I don't quite understand when this bit

$(function() {
 images = $('#home_page_pic img').hide();
 index = 0;
 images.eq(index).show();
});

gets executed because the script calls the swapImage()...

[dupalo]

right,, first of all apologies for all these post all together, but I write them as I test the site.
I have found the solution to the problem, although I don't know how to explain.
The changes you have made to the css haven't unfortunately changed the situation. I looked and re-looked at the script a billion times and then I made a single change:

$(function() {
var images = $('.home_page_pic img').hide();
var index = 0;
images.eq(index).show('fast');

function swapImages()

{

images.eq(index).fadeOut(2000, function() {

index++;

if (index == images.length)

{

index = 0;

}
images.eq(index).fadeIn(2000, swapImages);
});

}

swapImages();


});

I changed the 3rd line from

images.eq(index).show();

to

images.eq(index).show('fast');

and now everything works. I don't know why that made a difference, maybe you can explain it to me : -) I don't have a clue. If you look at the live site (again apologies for adding the url so many times) [antobbo.webspace.virginmedia.com...] you will see that the glitch has disappeared.
What I have also done was to open the site with chrome and check the console. Before adding 'fast' the first run of the script kept the display:inline; for the first picture.
The console on my screen looked sth like this:

<img src="images/animal_full_2.jpg" alt="" style="display: inline; ">
<img src="images/church_full_1.jpg" alt="" style="display: block; opacity: 0.8300663891173443; ">
...

but the moment I added 'fast' the display:block turns into display:none as it should,looking like this instead:

<img src="images/animal_full_2.jpg" alt="" style="display: none; ">
<img src="images/church_full_1.jpg" alt="" style="display: block; opacity: 0.3567377236361008; ">

You see? the display of the first picture is now 'none'.
Any idea why just adding 'fast' resolved it all?
thanks

[rocknbil]

I tested the solution I posted, it works fine. I looked at your code, you missed the ID comment above - your problem starts here:

<div class="home_page_pic">

but the jQuery refers to ID:

images = $('#home_page_pic img').hide();

As mentioned, the display property is irrelevant in the solution I posted, as you can see there's no messing with display (so you can remove the inline display:block.)

fade() and hide() animate the element's opacity, not it's display.

and I don't quite understand when this bit... gets executed because the script calls the swapImage()... );

<warning: possible confusion ahead>

Everything in $(function) is loaded in a Jquery object (docs [api.jquery.com]). Basically this is a wrapper for any functions you want to execute. I like to use window.load (docs [api.jquery.com])for anything that relies on the contents of an element to load, such as images (and am not sure how different that is from document.ready [api.jquery.com] except that load() can be bound to any element.) So there really is no need for both $(window).load() and $(function), they could probably both be put in the same block, like

$(window).load(
function() {
images = $('#home_page_pic img').hide();
index = 0;
images.eq(index).show();
swapImages();
});

or

$(function() {
images = $('#home_page_pic img').hide();
index = 0;
images.eq(index).show();
swapImages();
});

</confusion>

About this bit:

images = $('#home_page_pic img').hide();
index = 0;
images.eq(index).show();

Ijust modded your code to make it work, but what is happening here may not be necessary. This is the bit that stores the images in an array:

images = $('#home_page_pic img');

Since '#home_page_pic img' is a collection of objects (the images,) setting it like that makes it an array. I wasn't sure why you hide it and show it again, but in retrospect the previous line and index=0 is probably all you need.

Note also a critical difference: the absence of var, which scopes a variable to the current function. Since you want the array images accessible from the swapImages function, there is no need for the var keyword.

Putting that all together, probably all you need is

$(window).load(
function() {
images = $('#home_page_pic img');
index = 0;
swapImages();
});
// Followed by the swapImages function

Of course, being mindful that this references the div by id, not class. :-) I just re-tested it and it works identically.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html lang="en"> 
<head> 
 <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> 
 <title>Untitled</title> 
 <!-- tested with local images, set values accordingly --> 
 <script type="text/javascript" src="js/jquery-1.2.6.min.js"></script> 
 <style type="text/css"> 
 /* other than the positioning properties, 
 the rest is for my test 
 */ 
 #home_page_pic,#home_page_pic img {  
 width:975px;  
 height: 375px;  
 } 
 #home_page_pic {  
 position: relative;  
 margin: 0 auto;  
 border: 1px solid #000;  
 } 
 #home_page_pic img { 
 position: absolute; 
 display:none; 
 } 
 </style> 
<script type="text/javascript"> 
$(window).load( 
 function() { 
 images = $('#home_page_pic img'); 
 index = 0; 
 swapImages(); 
});  
// 
function swapImages() { 
 images.eq(index).fadeOut(2000, function() { 
 index++; 
 if (index == images.length) { index = 0; } 
 images.eq(index).fadeIn(2000, swapImages); 
 }); 
} 
</script> 
</head> 
<body> 
<div id="home_page_pic"> 
<!-- use ID if only one on the page, class not necessary --> 
<img src="images/image-1.jpg" alt=""> 
<img src="images/image-2.jpg" alt=""> 
<img src="images/image-3.jpg" alt=""> 
<img src="images/image-4.jpg" alt=""> 
<img src="images/image-5.jpg" alt=""> 
<img src="images/image-6.jpg" alt=""> 
</div><!--END OF home_page_pic --> 
</body> 
</html>