如何在我的灯箱画廊中添加导航？

Question

我为我的网站构建了一个灯箱画廊。我在选中的当前图像的左侧和右侧添加了箭头。我需要一些关于如何使左箭头选择上一张图像和右箭头选择图库中下一张图像的指导。我一直在试验和寻找，但我一直无法自己弄清楚。任何帮助，将不胜感激。谢谢！

https://jsfiddle.net/fabfivefebby/2z9unx02/2/

var $overlay = $('<div id="overlay"></div>'); 
var $image = $("<img>"); 
var $caption = $("<p></p>"); 
var $exit = $("<div><button id='exit'> x </button></div>"); 
var $buttonLeft = $("<button id='buttonLeft'> < </button>"); 
var $buttonRight = $("<button id='buttonRight'> > </button>"); 

$overlay.append($exit); 
$overlay.append($buttonLeft); 
$overlay.append($buttonRight); 
$overlay.append($image); 

//2.2 A Caption 
$overlay.append($caption); 

//2. Add overlay 
$("body").append($overlay); 

var updateImage = function (imageLocation, captionText) { 
//1.2 Update overlay with the imagelinked in the link 
$image.attr("src", imageLocation); 

//1.3 Add Caption from alt. Get child's alt att and set Caption 
$caption.text(captionText); 

} 

//1. Capture the click event on a link to an image 
$("#stillGallery a").click(function(event) { 
event.preventDefault(); 
var imageLocation = $(this).attr("href"); 
var captionText = $(this).children("img").attr("alt"); 

$index = $(this).parent().index(); 

    //this is calling that new Update overlay function above 
updateImage(imageLocation, captionText); 

//1.1 Show the overlay 
$overlay.show(); 

}); 

$buttonRight.click(function() { 
console.log("testing"); 
}); 

$exit.click(function(){ 
$overlay.hide(); 
}); 

$overlay.click(function(){ 
$overlay.hide(); 
}); 

Answer 1

更新小提琴，https://jsfiddle.net/2z9unx02/12/

首先更新您的CSS类，如下图所示

#exit { 
    color: white; 
    background-color: transparent; 
    border: none; 
    font-size: 1.5em; 
    position: absolute; 
    top: 10px; 
    right:30px; 
    cursor: pointer; 
    z-index: 100; 
} 

#buttonLeft, #buttonRight { 
    background-color: transparent; 
    color: white; 
    font-size: 2em; 
    border: none; 
    position: absolute; 
    top:50%; 
    cursor: pointer; 
} 

#buttonLeft { 
    left: 10px; 
} 

#buttonRight { 
    right: 10px; 
} 

现在，改变你的JavaScript如下，

//Problem: User when clicking on image goes to dead end 
//Solution: Create an overlay with the large image 

var $overlay = $('<div id="overlay"></div>'); 
var $image = $("<img>"); 
var $caption = $("<p></p>"); 
var $exit = $("<div><button id='exit'> x </button></div>"); 
var $buttonLeft = $("<button id='buttonLeft'> < </button>"); 
var $buttonRight = $("<button id='buttonRight'> > </button>"); 

    $overlay.append($exit); 
    $overlay.append($buttonLeft); 
    $overlay.append($buttonRight); 
    $overlay.append($image); 

//2.2 A Caption 
    $overlay.append($caption); 

//2. Add overlay 
    $("body").append($overlay); 

var updateImage = function (imageLocation, captionText) { 
    //1.2 Update overlay with the imagelinked in the link 
    $image.attr("src", imageLocation); 

    //1.3 Add Caption from alt. Get child's alt att and set Caption 
    $caption.text(captionText); 

} 

//1. Capture the click event on a link to an image 
$("#stillGallery a").click(function(event) { 
    event.preventDefault(); 
    var imageLocation = $(this).attr("href"); 
    var captionText = $(this).children("img").attr("alt"); 

    $index = $(this).parent().index(); 

     //this is calling that new Update overlay function above 
    updateImage(imageLocation, captionText); 

    //1.1 Show the overlay 
    $overlay.show(); 
    $(this).parent("li").addClass("active"); 
}); 
$buttonLeft.click(function() { 
    console.log("testing Left"); 
    var temp = $("li.active").parents("div.pic_wrapper").prev(); 
    var imageLocation = temp.find("a").attr("href"); 
    var captionText = temp.find("img").attr("alt");  
    updateImage(imageLocation, captionText); 
    $("li.active").removeClass("active"); 
    temp.find("li").addClass("active"); 
}); 
$buttonRight.click(function() { 
    console.log("testing"); 
    var temp = $("li.active").parents("div.pic_wrapper").next(); 
    var imageLocation = temp.find("a").attr("href"); 
    var captionText = temp.find("img").attr("alt");  
    updateImage(imageLocation, captionText); 
    $("li.active").removeClass("active"); 
    temp.find("li").addClass("active"); 
}); 

$exit.click(function(){ 
    $("li.active").removeClass("active"); 
    $overlay.hide(); 
}); 

/*$overlay.click(function(){ 
    $overlay.hide(); 
});*/ 

正如你所看到的，我将一个active类添加到li，使固定覆盖图中显示图像。点击右键后，您可以使用.next()选择器来选择下一个li元素。同样，使用.prev()选择器来选择以前的li元素。

Answer 2

OK，让我们开始

1日追加一个隐藏的范围，以覆盖赶上div的指数conatin你在CSS显示点击

// append span to get index 
    $overlay.append('<span id="getimgcount"></span>'); 

它没有IMG

#getimgcount{ 
    display: none; 
} 

和现在忽略该行..因为它会隐藏覆盖图，如果我们点击箭头..你需要使用e.target以后

个

$overlay.click(function(){ 
    //$overlay.hide(); 
}); 

为左，右箭头使用

$(document).on('click','#buttonRight',function() { 
var this_img_count = parseInt($('#getimgcount').text());  
    var getnextimg = $('.pic_wrapper').eq(this_img_count + 1).find('img').attr('src'); 
    var getnextp = $('.pic_wrapper').eq(this_img_count + 1).find('h1').text(); 
    $('#overlay').find('img').attr('src',getnextimg); 
    $('#overlay').find('p').text(getnextp); 
    $('#getimgcount').text(this_img_count + 1); 

}); 
$(document).on('click','#buttonLeft',function() { 
var this_img_count = parseInt($('#getimgcount').text());  
    var getprevimg = $('.pic_wrapper').eq(this_img_count - 1).find('img').attr('src'); 
    var getprevp = $('.pic_wrapper').eq(this_img_count - 1).find('h1').text(); 
    $('#overlay').find('img').attr('src',getprevimg); 
    $('#overlay').find('p').text(getprevp); 
    $('#getimgcount').text(this_img_count - 1); 

}); 

你会需要一些如果在这里statments知道你是否达到第一图像和最后一个图像

DEMO HERE