jquery下一个/上一个按钮

q0qdq0h2 于 2023-06-22 发布在 jQuery

关注(0)|答案(3)|浏览(151)

我是一个初学者，我试图用jquery做一个lightbox网络画廊。这是一个基本的图库，当你点击列表中的一张图片（缩略图）时，jquery会显示隐藏的lightbox div，它会使背景变暗，并显示当前图片（全尺寸），带有白色边框，边框上有next/prev和close按钮。我的下一个/上一个按钮只工作一次，我不知道如何修复它。（我还没有对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(){

   });
});

jquery

来源：https://stackoverflow.com/questions/15481119/jquery-next-previous-button-for-lightbox

3条答案

按热度按时间

6qftjkof1#

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

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

 });


});

赞(0）回复(0）举报 2023-06-22

ql3eal8s2#

我会说

$('.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() { ... });

赞(0）回复(0）举报 2023-06-22

svmlkihl3#

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

赞(0）回复(0）举报 2023-06-22