Выберите ссылку сразу после того, я просто нажал

Question

и бросил его на 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> 

Answer 1

Пожалуйста, добавьте больше кода/HTML - это $ ("overlay_content") нажмите кнопку (...) функция вам нужно исправить?

Вы можете использовать селектор eq(), чтобы получить n-й a.lightbox на странице. Но, очевидно, вы должны будете отслеживать, какие ссылки вы находитесь в данный момент, то есть

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

Или. - с помощью СРК изображения, отображаемый в данный момент, выяснить, какая ссылка была нажата и двигаться рядом оттуда, т.е.

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