一个我刚刚点击

之后选择链接也扔它在jsbin：http://jsbin.com/ohazo/2 但jsbin代码是旧代码，所以overlay_nextimg overlay_content.click是在JavaScript上jsbin一个我刚刚点击

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>

来源

2010-02-20 ExodusNicholas

我们错过了许多重要信息。处理链接的点击方法在哪里？加载图像功能实际上做了什么？图像显示时，DOM的外观如何？如果我们知道这些事情，你的问题可能会在一分钟内回答。 – Sampson 2010-02-20 05:28:31

再次更新代码以包含您给我的内容。它现在在单击下一个或前一个链接时在警报中显示“对象对象”，然后在overlay_contents div中显示错误，而不是显示下一个图片。 – ExodusNicholas 2010-02-20 13:40:03

请添加更多的代码/ HTML的 - 为$（ “overlay_content”）点击（...）的功能，您需要固定？

您可以使用eq（）选择器来获取页面上的第n个a.lightbox。但显然你需要跟踪什么联系您目前所用，即

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

或 - 利用当前显示的图像的src，找出被点击哪个链接和明年从那里，即移动

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

来源

2010-02-20 04:00:09

一个我刚刚点击

回答

相关问题