Question

我正试图从头开始在jquery中构建一个灯箱式的库。

我已经完成了所有工作（当你点击目标链接时，黑暗的，固定的背景和不透明的白色容器/框架淡入）除了我得到一个小问号框，其中应该是全尺寸图像。

根据我的研究，听起来这是一个图像预加载问题，但我不确定。这是基本脚本：

JQUERY

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){
    $(".lightboxtrigger").click(function(e) {
        e.preventDefault()           // to keep from opening href in new window
        var bigpic = $(this).attr('href');     // to extract the image url from a's href
        var index = '<img src="' + bigpic + '">';     // to create an image element with the a's href as its src
        $('body').find("#content").html(index);     // to select the lightbox div container and set the src of its embedded image to the href value
        $(".lightbox").delay(800).fadeIn(300);      // to make the lightbox visible
        $(".lightboxbg").fadeIn(800);       // to make the lightbox's surrounding background visible
    });
}); 
</script>

HTML

<body>

<div class="lightboxbg"></div>     
<div class="lightbox">     
    <div id="content">
            <img src="#">
    </div>   
</div>


<div id="samplebox">
    <a class="lightboxtrigger" href="img1-LARGE.png"><img src="img1-SMALL.png"></a> 
    <a class="lightboxtrigger" href="img2-LARGE.png" ><img src="img2-SMALL.png"></a>
    <a class="lightboxtrigger" href="img3-LARGE.png"><img src="img3-SMALL.png" ></a>
</div>

</body>

Answer 1

尝试删除此内容：

$('body').find("#content").html(index);

并替换它：

$('#content').html(index);

但是，如果您向我们展示示例，则有助于改进答案。

Answer 2

工作正常。你有合适的地方的照片吗？

＆＃13;

$(document).ready(function(){
    $(".lightboxtrigger").click(function(e) {
        e.preventDefault()           // to keep from opening href in new window
        var bigpic = $(this).attr('href');     // to extract the image url from a's href
        var index = '<img src="' + bigpic + '">';     // to create an image element with the a's href as its src
        $("#content").html(index);     // to select the lightbox div container and set the src of its embedded image to the href value
        $(".lightbox").delay(800).fadeIn(300);      // to make the lightbox visible
        $(".lightboxbg").fadeIn(800);       // to make the lightbox's surrounding background visible
    });
});

＆＃13;

<div class="lightboxbg"></div>     
<div class="lightbox" style="display: none">     
    <div id="content">
            <img src="#">
    </div>   
</div>


<div id="samplebox">
    <a class="lightboxtrigger" href="http://lorempixel.com/200/100"><img src="http://lorempixel.com/100/80"></a> 
  <a class="lightboxtrigger" href="http://lorempixel.com/200/100"><img src="http://lorempixel.com/100/80"></a> 
  <a class="lightboxtrigger" href="http://lorempixel.com/200/100"><img src="http://lorempixel.com/100/80"></a> 
</div>

＆＃13;

Jquery - 无法在灯箱样式库中加载图像

2 个答案: