слайд-шоу со следующими и предыдущими ссылками не работает (изображения взяты из БД) - PullRequest
Новая
       0

слайд-шоу со следующими и предыдущими ссылками не работает (изображения взяты из БД)

0 голосов
/ 16 февраля 2012

Я создаю простое слайд-шоу. 4 изображения, поступающие из db по php, хранятся в div с именем home_gallery_thumb с относительным положением, и изображения оборачиваются в тег привязки, пытаясь изменить их с помощью следующей и предыдущей кнопок, но он переходит к третьему изображению, затем все останавливается полностью, хотя работает без проблема, если эти изображения статичны, а не поступают из БД, вот изображения div diving 

<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);
?>

так что теперь у меня есть ссылки с изображениями внутри div и вот код jq 

$(".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);
    });
});

этот код находится внутри document.ready и вот что я заметил через firebug

first: загрузка изображений и все остальные ссылки: display: none после нажатия следующей кнопки первая ссылка не отображается: стиль отсутствует, и она переходит к третьей ссылке, делая ее видимой, и все останавливается. А предыдущая кнопка вообще ничего не делает, так как она не существует

1 Ответ

2 голосов
/ 16 февраля 2012

попробуйте, если не получится, укажите ссылку на слайд 

$("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();
    });
});
...