Question

也把它扔到了jsbin上：http://jsbin.com/ohazo/2 但是jsbin上的代码是旧代码，所以overlay_nextimg是jsbin上的javascript中的overlay_content.click

Jquery灯箱，抓住我们刚刚点击的链接的下一个链接，取出它的href，淡出当前图像，然后加载到下一个img。

另外，我如何保持overlay_content居中？更改图像时，是否将其设置为新位置的动画？接下来我会解决这个问题，但我在这里为什么不这样做。

Jquery和Html，我已经将之前使用的overlay_content.click更改为overlay_nextimg，以减少混淆。

Jquery的：

$(function (){ 
$('a.lightbox').click(function() {  
    var imghref = $(this).attr("href"); 
    loadImage(imghref); 
    alert(imghref)
    return false; 
});  

$('.overlay_nextimg').click(function (){
    var currlink = $("a[href='" + $(".overlay_content img").attr("src") + "']");
    var nextlink = $(currlink).next(".lightbox");
    var prevlink = $(currlink).prev(".lightbox");
    alert(nextlink);
    loadImage(nextlink);
    });

$('.overlay_previmg').click(function (){
    var currlink = $("a[href='" + $(".overlay_content img").attr("src") + "']");
    var nextlink = $(currlink).next(".lightbox");
    var prevlink = $(currlink).prev(".lightbox");
    alert(prevlink);
    loadImage(prevlink); 
    });

function loadImage(href, prevlink, nextlink) { 
var currentImg = $('.overlay_content img');
    var img = new Image(); 
    var docHeight = $(document).height();
    $('.overlay_content').delay(300).fadeIn(400);
    $(".overlay_bg").height(docHeight).fadeIn(400, function(){ 
    $(img).load(function () { 
        $(img).hide(); 
        $('.overlay_content').html(img); 
        $(img).fadeIn('slow');
    }).error(function () { 
        $('.overlay_content').html("you SUCK at Javascript")
    }).attr('src', href); 
        })   
}

$('.overlay_bg').click(function (){
    $(this).fadeOut(300);
    $(".overlay_content").fadeOut(300, function(){
        $(this).html('');
    });
});              
});

HTML：

<div class="overlay_bg"></div>
<div class="overlay_content"></div>

<h1>links</h1>
<a href="images/watercolor.jpg" class="lightbox">Load a water color image.</a>
<a href="images/library_book.png" class="lightbox">Load a library book, yeah.</a>
<a href="http://www.sohtanaka.com/web-design/examples/image-zoom/preview.jpg"     class="lightbox">from the interweb.</a>
<a href="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/02/Teaching-20100210-164155.jpg" class="lightbox">internet image.</a>
<a href="http://francorobles.files.wordpress.com/2009/10/cyber_jquery1.jpg" class="lightbox">HUGE</a>

Answer 1

请添加更多代码/ HTML - 是$（“overlay_content”）。点击（...）您需要修复的功能？

您可以使用eq（）选择器获取页面上的第n个a.lightbox。但显然你需要跟踪你当前所处的链接，即

$("a.lightbox:eq(1)")

或者 - 使用当前显示的图像的src，找出点击了哪个链接然后从那里移动，即

$("a.lightbox[href='" + currentImg.attr("src") + "']").next()

在我刚点击的链接之后立即选择链接

1 个答案: