如何在我的燈箱畫廊中添加導航？

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