Question

i’m creating a simple slideshow. 4 images coming from db by php stored in a div called home_gallery_thumb with relative position and the images are wrapped inside anchor tag trying to change them with a next and previous buttons but it jumps to the third image then everything stops completely though it works without any problem if these images are static not coming from the db here’s the div fetching images

<div class="home_gallery_thumb" style="background-color:#006; position:relative;">
<?php
require('_req/base.php');
$getImgsQ = "select Photo_Name from photos order by Photo_ID DESC limit 4";
$getImgsR = mysql_query($getImgsQ);
while($galleryRow = mysql_fetch_array($getImgsR)){
?> <a class="galleryLink" style="position:absolute;" href="products_large/<?php echo    $galleryRow['Photo_Name']; ?>"><img src="products_thumb/<?php echo $galleryRow['Photo_Name']; ?>" /></a> <?php  
}
mysql_close($connect);
?>

so now i have links with images inside the div and here’s the jq code

$(".home_gallery_thumb a.galleryLink").css("display","none");
$("a.galleryLink:first").fadeIn(500);
var allImgs = $(".home_gallery_thumb a").length;
$(".next").click(function(){
    var curImg = $("a.galleryLink:visible").index();
    var nxtImg = curImg+1 ;
    if(nxtImg == allImgs) { nxtImg = 0; }
    $("a.galleryLink:eq("+curImg+")").fadeOut(800,function(){
        $("a.galleryLink:eq("+nxtImg+")").fadeIn(800);
    });
});
$(".previous").click(function(){
    var curImg = $("a.galleryLink:visible").index();
    var prevImg = curImg-1 ;
    if(prevImg == -1) { prevImg = allImgs-1; }
    $("a.galleryLink:eq("+curImg+")").fadeOut(800,function(){
        $("a.galleryLink:eq("+prevImg+")").fadeIn(800);
    });
});

this code is inside document.ready and that’s what i noticed through firebug

first : images load and all other links are : display:none
after clicking next button first link doesn’t get display:none style and it jumps to the third link making it visible then everything stops. And the previous button does nothing at all as it doesn’t exist

Answer 1

try this, if not work, provide a link to your slide

$("a.galleryLink").hide();
$("a.galleryLink:first-child").fadeIn(500);
$(".next").click(function(){
    var curImg = $("a.galleryLink:visible");
    var nxtImg = curImg.next();
    if(!nxtImg.length) { nxtImg = $("a.galleryLink:first-child"); }
    curImg.fadeOut(800,function(){
        nxtImg.fadeIn();
    });
});
$(".previous").click(function(){
    var curImg = $("a.galleryLink:visible");
    var prvImg = curImg.prev();
    if(!prvImg.length) { prvImg = $("a.galleryLink:last-child"); }
    curImg.fadeOut(800,function(){
        prvImg.fadeIn();
    });
});