jquery - 无法获取图像加载灯箱样式的画廊

我试图从头开始在jquery中创建一个灯箱风格的画廊。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>

来源

2014-10-30 Birdman81

它工作正常。你有没有在正确的地方的照片？

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

<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>

来源

2014-10-30 01:31:18

谢谢！实际上，问题是在某个时候，我不小心将标签中的“class =”lightboxtrigger属性剪切并粘贴到嵌入的标签[额头掌托] – Birdman81 2014-10-30 16:01:06

尝试删除这个：

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

并更换了这一点：

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

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

来源

2014-10-30 01:29:10

jquery - 无法获取图像加载灯箱样式的画廊

回答

相关问题