Select link right after the one i just clicked.

Question

also threw it up on jsbin: http://jsbin.com/ohazo/2 but the code on jsbin is the old code, so overlay_nextimg is overlay_content.click in the javascript on jsbin

Jquery lightbox, grab next link from the one we just clicked, take it's href, fade out the current image, and load in the next img.

Also, how would i go about keeping the overlay_content centered? when changing images, have it animate to the new position? i was gonna tackle that next, but i'm here so why not.

Jquery and Html, i've changed the overlay_content.click that we were using before to overlay_nextimg, to be less confusing.

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

Please add more of the code/HTML - Is $("overlay_content").click(...) the function you need to fix?

You can use the eq() selector to get the n-th a.lightbox on the page. But obviously you'll need to track what link you're currently on., i.e.

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

Or - using the src of the image currently being displayed, find out which link was clicked and move next from there, i.e.

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