Question

现在已经做了很长时间了。在我收到大量建议图片库脚本的答案之前，我想了解一下这对我自己有用。我已经使用ajax和php动态创建了一个缩略图库，我唯一无法做到的就是当点击缩略图时，弹出框中会显示完整尺寸的图像。如果没有jquery来禁用默认链接操作，则相关图像将显示在新选项卡中，因此我知道动态创建的代码是可以的。我已经设置了我的代码以获取动态链接的href属性，我认为我遇到了问题，无论点击缩略图，我都可以显示一个图像

创建缩略图的代码

<script type="text/javascript">

$(document).ready(function() {//READY FUNC

$(".albumName").click(function(){//click
     var albumid = this.id;
     $('#imageFrame').empty();
     $.post("includes/viewgallery.php",{albumId:albumid},function(data)  {//json
        console.log(data);  
        data = jQuery.parseJSON(data);
           $.each(data, function(key, val) {//iterate each data

               var albumName = val.albumName;
               var photoId = val.photoId;
               var photoName = val.photoName;
               var photoUrl = val.photoUrl;
               var thumbId = val.thumbId;
               var thumbName = val.thumbName;
               var thumbnailUrl = val.thumbnailUrl;
               var href = "http://217.199.187.191/mandingaarts.co.uk";

               $('#imageFrame').append('<a id"'+photoId+'" class="lightBox" href="'+href+'' +photoUrl+ '"><img id"'+thumbId+'" class="thumbnail" src="'+href+'' +thumbnailUrl+ '"/></a>'); 

              })//iterate each data

         });//json

    });//click

});//READY FUNC
</script>

获取全尺寸图片并在弹出框中显示的代码

<script type="text/javascript">

$('#imageFrame').on('click', '.thumbnail', function(e)
{

    e.preventDefault()
    var a_href = $('.lightBox').prop('href');
    console.log(a_href)
    $('#lightboxImage').prop('src', a_href)
$("#faded").fadeToggle("scale");
});

$('#lightbox').on('click', '#closeLightbox', function() {
    $('#faded').fadeToggle("scale")
    $('#lightboxImage').prop('src', '#')
});

</script>

Answer 1

你要在#imageFrame div中添加很多锚点。每个锚点都有一类lightBox。

然后点击你用一类灯箱转换所有元素的数组并获取其中一个的href属性 - 可能是第一个元素。

因为onlick是图像尝试类似

a_href = $（this）.parent（）。prop（＆＃39; href＆＃39;）;

显示与动态创建的缩略图关联的正确图片

1 个答案: