2015-10-14 92 views
3

好吧,所以我認爲需要幾分鐘才能實現的功能現在佔用了我一個多小時的時間,而且我完全感到困惑。Lightbox2不會啓動

我下載了lightbox2,按照說明操作;嵌入他們的CSS和JS在我的index.html

<link href="lightbox/lightbox.css" rel="stylesheet"> 
<script src="lightbox/lightbox-plus-jquery.js"></script> 

我只在本地主機上測試,如果說有什麼區別的頭。該路徑正確設置100%,所以是到4個圖像的CSS需要的路徑..

現在,在我的身上,我使用A HREF與data-lightbox屬性這樣

<a class="example-image-link" href="gallery/i1.jpg" data-lightbox="group" data-title="Optional caption."> 
    <img class="example-image" src="gallery/i1.jpg" alt="desc"> 
</a> 
<a class="example-image-link" href="gallery/i2.jpg" data-lightbox="group" data-title="Optional caption."> 
    <img class="example-image" src="gallery/i2.jpg" alt="desc"> 
</a> 

有沒有別的網頁上這樣的結果看起來是這樣的: result

的問題是,當我點擊,而不是燈箱彈出圖像的圖像之一,只是在一個全屏選項卡中打開。這就像燈箱根本不工作,它只是在a href圖像..我甚至嘗試JSFiddle和加載相同的CSS和JS作爲外部資源,它做的完全一樣的事情。看看你自己 - >JSFIDDLE

我對任何想法開放..真的不明白我在想什麼。

+0

似乎工作正常** Codepen ** http://codepen.io/noobskie/pen/OyxyrP可能是你的加載腳本的方式? – NooBskie

+0

和我所做的相同的來源,對嗎?那可能怎麼樣? –

+0

是的,使用與jsfiddle @ 1cgonza中使用的相同的東西,可以使用 – NooBskie

回答

8

您應該將<script src="lightbox/lightbox-plus-jquery.js"></script>位移至HTML中body標記的末尾,而不是head。問題是,如果腳本在頭部,它將在圖像準備好被庫解析之前運行。

+0

我只是想到了自己...我發誓我讀了5次指令,只有第6次我注意到它說「包括Javascript在在你的頁面底部關閉之前標籤「真的很抱歉這個帖子.. –

+0

完美的解決方案。這是我發現的唯一工作。 – dspacejs