用于灯箱的 jquery 下一个/上一个按钮

Question

我是一个初学者，我正在尝试使用 jquery 制作一个灯箱网络画廊。 这是一个基本的图库，当您单击列表中的图像（缩略图）时，jquery 会显示隐藏的灯箱 div，这会使背景变暗并显示带有白色边框的当前图像（全尺寸），带有下一个/上一个和关闭边框上的按钮。 我的下一个/上一个按钮只能工作一次，我不知道如何修复它。 （我没有用 prev 按钮做任何事情，所以这显然根本不起作用。） 有任何想法吗？代码如下：

html

<ul class="gallery">
        <li> <a href="img/gallery/fullsize/full_foto001.jpg" class="lightbox_trigger"> <img src="img/gallery/thumbnail/thumbnail_foto001.jpg"> </a> </li>
        <li> <a href="img/gallery/fullsize/full_foto002.jpg" class="lightbox_trigger"> <img src="img/gallery/thumbnail/thumbnail_foto002.jpg"> </a> </li>
        <li> <a href="img/gallery/fullsize/full_foto003.jpg" class="lightbox_trigger"> <img src="img/gallery/thumbnail/thumbnail_foto003.jpg"> </a> </li>
        <li> <a href="img/gallery/fullsize/full_foto004.jpg" class="lightbox_trigger"> <img src="img/gallery/thumbnail/thumbnail_foto004.jpg"> </a> </li>
        <li> <a href="img/gallery/fullsize/full_foto005.jpg" class="lightbox_trigger"> <img src="img/gallery/thumbnail/thumbnail_foto005.jpg"> </a> </li>
        <li> <a href="img/gallery/fullsize/full_foto006.jpg" class="lightbox_trigger"> <img src="img/gallery/thumbnail/thumbnail_foto006.jpg"> </a> </li>
        <li> <a href="img/gallery/fullsize/full_foto007.jpg" class="lightbox_trigger"> <img src="img/gallery/thumbnail/thumbnail_foto007.jpg"> </a> </li>
        <li> <a href="img/gallery/fullsize/full_foto008.jpg" class="lightbox_trigger"> <img src="img/gallery/thumbnail/thumbnail_foto008.jpg"> </a> </li>
        <li> <a href="img/gallery/fullsize/full_foto009.jpg" class="lightbox_trigger"> <img src="img/gallery/thumbnail/thumbnail_foto009.jpg"> </a> </li>
    </ul>

<div id="lightbox">

<div id="gallery_content">

</div>

jquery

 $('.lightbox_trigger').click(function(e) {
    //prevent default action (hyperlink)
    e.preventDefault();

    $('#lightbox').show('slow');

    var image_href = $(this).attr("href");

    var image_href2 = $(this).parent().next('li').children('a').attr("href");


   $('#gallery_content').html('<img src="' + image_href + '" />' + 
   '<div id="gallery_close"> <img src="img/gallery/lightbox/close.png"/> </div>' + 
   '<div id="gallery_next"> <img src="img/gallery/lightbox/next.png"/> </div>'+
   '<div id="gallery_prev"> <img src="img/gallery/lightbox/previous.png"/> </div>');

   //next
   $(document).on('click', '#gallery_next', function(){
        $('#gallery_content').html('<img src="' + image_href2 + '" />' +
        '<div id="gallery_close"> <img src="img/gallery/lightbox/close.png"/> </div>' + 
        '<div id="gallery_next"> <img src="img/gallery/lightbox/next.png"/> </div>'+
        '<div id="gallery_prev"> <img src="img/gallery/lightbox/previous.png"/> </div>');

   });


   //previous
   $('#gallery_prev').click(function(){

   });
});

Answer 1

我想通了。我不知道它有多“优雅”，但它确实有效。 这里是：

$(document).ready(function() {
 $('.lightbox_trigger').click(function(e) {
        //prevent default action (hyperlink)
        e.preventDefault();

        $('#lightbox').show('slow');

        $(this).attr('class','this');

        var image_href = $(this).attr("href");

        var image_href2 = $('.this').parent().next('li').children('a').attr("href");


       $('#gallery_content').html('<img src="' + image_href + '" />' + 
       '<div id="gallery_close"> <img src="img/gallery/lightbox/close.png"/> </div>' + 
       '<div id="gallery_next"> <img src="img/gallery/lightbox/next.png"/> </div>'+
       '<div id="gallery_prev"> <img src="img/gallery/lightbox/previous.png"/> </div>');



 });



  //next
  $(document).on('click', '#gallery_next', function(){
            var image_href2 = $('.this').parent().next('li').children('a').attr("href");
            $('#gallery_content').html('<img src="' + image_href2 + '" />' +
            '<div id="gallery_close"> <img src="img/gallery/lightbox/close.png"/> </div>' + 
            '<div id="gallery_next"> <img src="img/gallery/lightbox/next.png"/> </div>'+
            '<div id="gallery_prev"> <img src="img/gallery/lightbox/previous.png"/> </div>');

            $('.this').attr('class', 'remove');
            $('.this').removeAttr('class', 'this');
            $('.remove').parent().next('li').children('a').attr('class', 'this');
            $('.remove').removeAttr('class', 'remove');

  });


  //previous


 //hide 
 $(document).on("click", "#gallery_close", function(event){
        $('.lightbox_trigger').removeAttr('class', 'this');
        $('.lightbox_trigger').removeAttr('class', 'remove');

        $('#lightbox').hide();

 });



});

Answer 2

我会说类似

$('.lightbox_trigger').click(function(e) {
    //prevent default action (hyperlink)
    e.preventDefault();

    $('#lightbox').show('slow');

    var image_href = $(this).attr("href");

    var image_href2 = $(this).parent().next('li').children('a').attr("href");


   $('#gallery_content').html('<img src="' + image_href + '" />' + 
   '<div id="gallery_close"> <img src="img/gallery/lightbox/close.png"/> </div>' + 
   '<div id="gallery_next"> <img src="img/gallery/lightbox/next.png"/> </div>'+
   '<div id="gallery_prev"> <img src="img/gallery/lightbox/previous.png"/> </div>');
});
//next
    $('#gallery_next').live('click', function(){
         $('#gallery_content').html('<img src="' + image_href2 + '" />' +
         '<div id="gallery_close"> <img src="img/gallery/lightbox/close.png"/> </div>' + 
         '<div id="gallery_next"> <img src="img/gallery/lightbox/next.png"/> </div>'+
         '<div id="gallery_prev"> <img src="img/gallery/lightbox/previous.png"/> </div>');
    });
// prev
    $('#gallery_prev').live('click', function() { ... });

Answer 3

您检查过 javascript 错误控制台吗？如果触发了错误，脚本将停止执行，这就是为什么某些东西只触发一次的常见原因。此外，我只会替换图像的 src，而不是该 div 中的整个 html。