我已经为此工作太久了。在我得到大量建议图像库脚本的答案之前,我想了解这对我自己来说是如何工作的。我已经使用 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>
最佳答案
您正在将大量 anchor 附加到 #imageFrame div 中。每个 anchor 都有一个 lightBox 类。
然后单击时,您将检索具有 lightbox 类的所有元素的数组,并获取其中一个元素的 href 属性 - 可能是第一个元素。
由于 onlick 是图像,请尝试类似的操作
a_href = $(this).parent().prop('href');
关于javascript - 显示与动态创建的缩略图关联的正确图片,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30245681/