Hi there, I wonder if you could help me at all with this two scripts. 1)I am trying to have a kind of slide show on my website http://www.antobbo.webspace.virginmedia.com/photogallery/test/home.htm (please note that I am not including the link to my website for promotion purposes, just to make it clear : - )) but the script isn't working properly because when an image replace the other one for a moment they are both there one below the other. Here's the script: <script type="text/javascript"> $(function() { $(".home_page_pic img:gt(0)").hide(); setInterval(function(){ $('.home_page_pic :first-child').fadeOut().next('img').fadeIn().end().appendTo('.home_page_pic');}, 2000); }); </script> Code (markup): and 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 --> ... HTML: 2)Then the second script works fine in all the browsers except in IE6. Now, I know that many people will say "don't bother with ie6and bla bla..." but I would like to have this site on my cv and to prove that I do know a little about ie6 optimisation. I have done quite a bit of work to make sure that it works with ie6 but there is something I can't really do. In brief if you browse this page (not with IE6 of course) just to have a look at the functionality of the script http://www.antobbo.webspace.virginmedia.com/photogallery/test/animals.htm you will see that there is an overlay: well this overlay doesn't work at all in IE6, it is just not there for whathever reason and also in IE6 I can't get the box where the big picture appears to have a position fixed, it just doesn't do it. Here's the code for the script: <script type="text/javascript"> function change_image(image) { $(".overlay").show(); $(".box").show("slow"); $("#" + image).fadeIn(1000); $(".close_button").show(); $(".close_button").click(function() { $(this).hide(); $("#" + image).fadeOut("fast"); $(".box").hide("slow"); $(".overlay").hide("slow"); }); } </script> Code (markup): Here are bits of the relevant html: ... <div class="boxes_wrapper"> <div class="thumb_container"> <div class="thumbnail"> <a href="javascript:void(0);" class="full_image"><img src="images/animal_thumb_1.jpg" alt="" style="border:0" onClick="change_image('big_image_1')"></a> </div><!-- END OF thumbnail 1--> <div class="thumbnail"> <a href="javascript:void(0);" class="full_image"><img src="images/animal_thumb_2.jpg" alt="" style="border:0" onClick="change_image('big_image_2')"></a> ... ... <div class="box" id="box"><!-- BOX FOR THE IMAGE --> <div class="standalone_image"><!-- BOX FOR THE IMAGE--> <img src="images/animal_full_1.jpg" alt="" style="display:none" id="big_image_1"> <img src="images/animal_full_2.jpg" alt="" style="display:none" id="big_image_2"> ... HTML: and here's the relevant bits of the css: ... /* FOR THE IMAGES POP UP WINDOW */ .overlay { display:none; background:#cf1dbb; opacity:0.75; filter:alpha(opacity=75); /* For IE8 and earlier */ top:0px; bottom:0px; left:0px; right:0px; position:fixed; z-index:100; } .box { display:none; background-color:black; width:660px; height:450px; position:fixed; left:50%; margin: -215px 0 0 -330px; /* to centre a fixed div just give it left 50% and move it back half of its width*/ /*top:10%;*/ top:50%; z-index:101; } .standalone_image { /*background:url(../images/water_full_3.jpg) no-repeat;*/ position:absolute; z-index:101; width:602px; height:399px; top:25.5px; bottom:25.5px left:29px; right:29px; /*border:1px solid red;*/ } .close_button { display:none; left:94%; /*background:url(../images/close_button.png);*/ width:40px; height:40px; position:absolute; z-index:102; } ... HTML: Does anybody have any suggestion at all? thanks a lot
Right, I kinda changed the script with some help and I have now got this 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> Code (markup): 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 --> HTML: 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 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. anybody's got a suggestion? thanks
Hi Abitha, not sure what you mean by "name of the slide show" sorry, but here's the link to the site if that helps: http://antobbo.webspace.virginmedia.com/photogallery/home.htm If you view that in chrome you will see what the problem is, Opera does it as well but not all the time thanks