如何使用Esc键关闭灯箱页面覆盖 [英] How to use the esc key to close lightbox page overlay
问题描述
我对灯箱有疑问，请参见我的jsFiddle .点击其中一张图片会打开较大的绘画版本，作为页面叠加层.
I have a question about a lightbox see my jsFiddle. Clicking on one of the images opens a bigger version of the painting as a page overlay.
如何使用 ESC 键关闭此页面叠加层?
How to use the ESC key to close this page overlay?
以及如何使用箭头键移至下一张图像?
And how to use the arrow keys to move to the next image?
我需要哪种类型的jQuery插件/javascript?
What kind of jQuery plugin / javascript would I need to make this happen?
<ul class="lb-album">
<li>
<a href="#Fly-My-Pretties-Walled-Garden">
<img src="http://sandipa.com.au/images/works-for-sale/thumbs/Fly-my-Pretties-Walled-Garden-sm.jpg" alt="Fly My Pretties: Walled Garden">
<span>Fly My Pretties</span> </a>
<div class="lb-overlay" id="Fly-My-Pretties-Walled-Garden">
<a href="#page" class="lb-close">x Close</a>
<img src="http://sandipa.com.au/images/2010-2011/1000px-wide/Fly-my-Pretties-Walled-Garden.jpg" alt="Fly My Pretties: Walled Garden">
<div>
<h3>Fly My Pretties: Walled Garden<span>mixed media on canvas</span></h3>
<p>72 x 137 cm</p>
<a href="#Light-that-Shapes-the-Shadows" class="lb-prev">Prev</a>
<a href="#Central-Highlands-Circle-of-Gold" class="lb-next">Next</a>
</div>
</div>
</li>
<li>
<a href="#Central-Highlands-Circle-of-Gold">
<img src="http://sandipa.com.au/images/works-for-sale/thumbs/Central-Highlands-Circle-of-Gold-sm.jpg" alt="Central Highlands: Circle of Gold">
<span>Circle of Gold</span> </a>
<div class="lb-overlay" id="Central-Highlands-Circle-of-Gold">
<a href="#page" class="lb-close">x Close</a>
<img src="http://sandipa.com.au/images/works-for-sale/Central-Highlands-Circle-of-Gold.jpg" alt="Central Highlands: Circle of Gold">
<div>
<h3>Central Highlands: Circle of Gold<span>mixed media on canvas</span></h3>
<p>51 x 108 cm</p>
<a href="#Fly-My-Pretties-Walled-Garden" class="lb-prev">Prev</a>
<a href="#Guardian-of-the-Night" class="lb-next">Next</a>
</div>
</div>
</li>
</ul>
推荐答案
在上面的链接中提到的答案"既可以处理使用 ESC 键隐藏灯箱的问题，也可以使用左和右键浏览灯箱中的图像箭头键.
This Answer mentioned in the link above allows handling both the issues of Hiding Lightbox with ESC key as well as navigating through images in Lightbox using Left and Right arrow key.
以下是该答案"中的代码段，将帮助我们解决这两个问题.
Here are the Pieces of code from that Answer which will help us achieve these Two issues.
使用 ESC 键隐藏灯箱:
if(event.keyCode==27){ // If ESC key is pressed
if(document.getElementById("lightbox-container").classList.contains("showcontainer")){ // LIGHTBOX ON
document.getElementById("lightbox-container").classList.remove("showcontainer");
}
}
使用左右箭头键在Lightbox中浏览网页上的所有图像:
Navigating through all the images on a Webpage in Lightbox with Left and Right Arrow key :
else if(event.keyCode==37) { // Left arrow key
if(document.getElementById("lightbox-container").classList.contains("showcontainer")){ // LIGHTBOX ON
// first get the URL of image displayed in the LIGHT BOX
var currimgsrc = document.getElementById("lightbox-cont-img").getAttribute("src");
// now match the sequence number in the array
var serialofarray = 0;
for(k=0;k<allimgurlarray.length;k++){
if(currimgsrc == allimgurlarray[k][2]){
serialofarray = allimgurlarray[k][0];
}
}
// with LEFT arrow, we are supposed to reduce the sequence and then use its ATTR SRC to LIGHT BOX
if(serialofarray<=0){
serialofarray = allimgurlarray.length - 1;
}
else {
serialofarray = serialofarray - 1;
}
console.log("Left Arrow : "+serialofarray);
document.getElementById("lightbox-cont-img").setAttribute("src", allimgurlarray[serialofarray][2]);
}
}
else if(event.keyCode==39) { // Right Arrow Key
if(document.getElementById("lightbox-container").classList.contains("showcontainer")){
// first get the URL of image displayed in the LIGHT BOX
var currimgsrc = document.getElementById("lightbox-cont-img").getAttribute("src");
// now match the sequence number in the array
var serialofarray = 0;
for(l=0;l<allimgurlarray.length;l++){
if(currimgsrc == allimgurlarray[l][2]){
serialofarray = allimgurlarray[l][0];
}
}
// with RIGHT arrow, we are supposed to increase the sequence and then use its ATTR SRC to LIGHT BOX
if(serialofarray>=allimgurlarray.length-1){
serialofarray = 0;
}
else {
serialofarray = serialofarray + 1;
}
console.log("Right Arrow : "+serialofarray);
document.getElementById("lightbox-cont-img").setAttribute("src", allimgurlarray[serialofarray][2]);
}
}
与按键事件相关的这些条件案例在 document.onkeydown = function(event)中得到解决.
These conditional cases related to Key Pressing events are tackled in document.onkeydown = function(event).
下面的这段代码对于禁用IMG标签上的按键事件的默认行为以及将网页上的所有图像堆叠在中非常重要.允许在Lightbox中使用向左和向右箭头键导航的数组.
This piece of code below is very important for disabling the default behaviours of Key pressing events on IMG tags as well as stacking up all the images on a webpage in an Array to allow Navigation in Lightbox with Left and Right arrow key.
// Select all A tags with IMG child nodes
var atagswithimgtag = document.querySelectorAll("a[href]");
// then prevent the default behaviour of A tags by preventing of opening new page by HREF
// as well as collect all the HREF of A tags with images to enable RIGHT and LEFT arrow key
var allimgurlarray = [];
for(i=0;i<atagswithimgtag.length;i++){
var childAIMGtag = atagswithimgtag[i].childNodes;
if (childAIMGtag[0].nodeType != Node.TEXT_NODE) // or if (el[i].nodeType != 3)
{
// this seems too be a A tag with IMG tag as Childnode
// first we need to prevent the default behaviour of opening the IMG in New Tab
atagswithimgtag[i].addEventListener("click", function(event){
event.preventDefault();
});
// second is when we need to fill image URL aray with A HREF
var listofnodes = atagswithimgtag[i];
allimgurlarray[i] = [];
allimgurlarray[i][0] = i;
allimgurlarray[i][1] = " Image URL is ";//listofnodes.getAttributeNode("title").value;
allimgurlarray[i][2] = listofnodes.getAttributeNode("href").value;
}
console.log(childAIMGtag[0].innerHTML);
}
这篇关于如何使用Esc键关闭灯箱页面覆盖的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
