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。

jquery下一个/上一个灯箱按钮

3 个答案: