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 - 無法獲取圖像加載燈箱樣式的畫廊

回答

相關問題