我使用錯誤的jquery運行fancybox？

Question

HTML頭標記

<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中預覽它時，當我點擊縮略圖時沒有任何反應。有什麼建議麼？

Answer 1

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

Answer 2

對不起，要完成類似這項工作所需的設置量很難。通常，如果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錯誤的可能位置。