我使用錯誤的jquery運行fancybox？

-2

<link href="../css/layout.css" rel="stylesheet" type="text/css"> 
<link href="../css/fancybox.css" rel="stylesheet" type="text/css"> 
<script type="text/javascript" src="../js/jquery-1.11.1.min.js"></script> 
<script type="text/javascript" src="../js/expandtag.js"></script> 
<script type="text/javascript" src="../js/fancybox.js"></script>

正如你看到的我是從LOKESH的網站上運行的jQuery 1.11.1和下載花哨的框，是從今天開始，我假設它的最新版本。我將lightbox.css文件中的圖像路線從img更改爲圖像，這是我在我的網站中使用的文件夾，並且是放置文件的目的地。我還將.js文件放入我的網站的js文件夾中。我將rel =「light-box」屬性應用於我希望使用lightbox的頁面上的圖像hrefs。當我在Chrome中預覽它時，當我點擊縮略圖時沒有任何反應。有什麼建議麼？

來源

2014-09-04 Eben Hafkamp

提網址url – diEcho 2014-09-04 11:23:32

小提琴請。 – 2014-09-04 11:24:00

向我們展示您用來調用燈箱的js代碼 – andrew 2014-09-04 11:24:24

rel：屬性在我的圖像上不起作用，因爲jquery觸發器正在尋找一個名爲.fancybox的類，它也只能用於鏈接。我不得不將自己的縮略圖鏈接到自身，並在自身的鏈接版本上放置類.fancybox。我還發現，將元素鏈接到fancybox代碼的jquery最好放在底部，就在body標籤之前，以達到性能目的。

來源

2014-09-08 06:08:56

對不起，要完成類似這項工作所需的設置量很難。通常，如果JavaScript插件不起作用，則應檢查頁面的來源。當你點擊與插件相關的外部JavaScript和CSS文件時，他們都拉起來了？

如果是這樣，那麼確保插入實際的腳本，該腳本將爲您的外部JavaScript頁面中存在的插件運行代碼。

Fancybox提供了多種方式來激活燈箱的示例。像這樣的東西需要被添加到你的HTML頁面。

<script> 
$(document).ready(function() { 

    /* This is basic - uses default settings */ 

    $("a#single_image").fancybox(); 

    /* Using custom settings */ 

    $("a#inline").fancybox({ 
     'hideOnContentClick': true 
    }); 

    /* Apply fancybox to multiple items */ 

    $("a.group").fancybox({ 
     'transitionIn' : 'elastic', 
     'transitionOut' : 'elastic', 
     'speedIn'  : 600, 
     'speedOut'  : 200, 
     'overlayShow' : false 
    }); 

}); 
</script>

很明顯，這有幾種不同的方式來觸發你的燈箱，你不需要所有這些選項。第一組是我要開始的地方。確保你的圖像看起來像這樣。

<a class="group" rel="group1" href="image_big_1.jpg"><img src="image_small_1.jpg" alt=""/></a>

如果這仍然不起作用，您希望在Chrome中拉起您的網站。右鍵單擊並選擇檢查元素。在檢查控制檯內部，單擊控制檯選項卡，這很可能會顯示紅色的內容，說明JavaScript錯誤的可能位置。

來源

2014-09-04 12:36:39

感謝您的幫助，我不確定在哪裏粘貼（「#id」）。lightbox_me（）;碼。那麼在標題中的腳本標記中？ – 2014-09-04 12:44:52

實際上你問的問題很好，有時候燈箱不工作，因爲代碼在頁面加載之前觸發。因此它正在查找的項目尚未加載。我會在關閉標記之前放置Jquery腳本和Lightbox腳本。確保頭文件中的腳本放在$（document）.ready（function（）{ - > here here}）中;因爲這將確保在加載JavaScript插件和頁面之前代碼不會被解僱。 – 2014-09-04 12:46:19

對不起，你是什麼意思的來源？通過點擊外部的js和css文件，他們應該拉起一些東西？我不確定那是什麼意思。我下載的外部文件位於我的站點根文件夾中各自的js和css位置。我不需要更改那些內部的實際代碼？我已經確定腳本標記中的鏈接，它們從它們的位置調用它們，並且它確定了Dreamweaver中的路徑是正確的。我認爲我遇到的最麻煩的事情是將jquery合併到我想要在Lightbox中顯示的元素中。 – 2014-09-04 13:20:55

我使用錯誤的jquery運行fancybox？

回答

相關問題