0

我是一个初学者，我正在尝试用 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(){

   });
});
4

3 回答 3

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

 });



});
于 2013-03-20T00:32:11.927 回答
0

我会说类似

$('.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() { ... });
于 2013-03-18T15:55:33.043 回答
0

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

于 2013-03-18T16:06:16.927 回答