一個我剛剛點擊

之後選擇鏈接也扔它在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

一個我剛剛點擊

回答

相關問題