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

好吧，让我们开始吧

第一个附加一个隐藏的跨度来覆盖以捕获div点击的指数你点击的img

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

在css中将其显示为无

#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);

});

这里需要一些if语句才能知道你是否到达了第一张图片和最后一张图片

DEMO HERE

如何在灯箱库中添加导航？

2 个答案: