Question

我目前正在学习jQuery（所以请耐心等待:)并尝试创建自己的简单图片库

这是我的HTML代码：

<img src="http://placehold.it/100x100" class="thumb" data-title="This is Title 1 " data-desc="Description 1 goes here" data-url="http://jsfiddle.net" data-large="http://lorempixel.com/g/400/200/" data-close="<span>x</span>"/>   
<img src="http://placehold.it/100x100" class="thumb" data-title="This is Title 2" data-desc="Description 2 goes here" data-url="http://jsfiddle.net" data-large="http://lorempixel.com/g/400/200/" data-close="<span>x</span>"/>

<div class="overlay"></div>

这里是jquery

$(document).on('click', '.thumb', function()
{
    var data_title = $(this).data('title');
    var data_desc = $(this).data('desc');
    var data_url = $(this).data('url');
    var data_close = $(this).data('close');
    $('.overlay').html('<div class="inner">' + data_title + data_desc + data_url + data_close+ '<img src="data_large" />' + '</div>' ).fadeIn( "slow", "linear" );
});
$(document).on('click', '.overlay span', function()
{
$('.overlay').fadeOut();
});

这里是css

.overlay {
    display:none;
    width:100%;
    height:100%;
    position:absolute;
    background:rgba(0,0,0,0.5);
    top:0;
}
.inner {
    border:1px solid #fff;
}
.show {
    display:block;
}
.hide {
    display:none;
}
.overlay span {
    background:#333;
    color:#fff;
    position:absolute;
    right:10px;
    top:10px;
    padding:20px;
}

代码运行良好，但我面临两个问题。第一个是打开覆盖图层时没有显示的大图像（请参阅this image），第二个图像是 jsfiddle 覆盖图层运行正常，但当我通过本地html在我的计算机上试用它时，叠加层会多次显示。

任何可以帮助我吗？

谢谢

Answer 1

第一个问题是先创建图像元素

         img = $('<img src="'+data_url+'"/>');

然后将此元素附加到叠加层。

  $('.overlay .inner').append(img);

创建一个简单的图库

1 个答案: