讓Fancybox工作？

-1

我很新使用JQuery插件，我必須承認，我完全不知道我在做什麼。我試圖在我的圖片庫上安裝Fancybox，但點擊圖片只是在全新的頁面中打開，而不是在Lightbox視圖中打開。任何幫助是極大的讚賞。讓Fancybox工作？

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="UTF-8"> 
    <link rel="stylesheet" href="styles/styles.css"> 
    <link rel="stylesheet" href="styles/HTML5CSSReset.css"> 
    <link rel="shortcut icon" href="images/favicon.ico"> 

<!-- FancyBox --> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> 
    <script type="text/javascript" src="fancybox/jquery.fancybox-1.3.4.pack.js"></script> 
    <script type="text/javascript" src="fancybox/jquery.mousewheel-3.0.4.pack.js"></script> 
    <link rel="stylesheet" href="fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" /> 
<!-- End --> 

    <title>Circle Bar</title> 
</head> 

<body> 
    <div id="ground"> 
    <div id="container"> 
    <div id="header"> 
    </div> 
    <div id="nav"> 
     <ul> 
      <li><a href="index.html">Information</a></li> 
      <li><a href="calendar.html">Calendar</a></li> 
      <li><a href="imageGallery.html">Images</a></li> 
      <li><a href="informationContact.html">Contact & Directions</a></li> 
     </ul> 
    </div> 
    <div id="content" class="sidePage"> 
     <a id="single_image" href="images/gallery/1.jpg"><img src="images/thumbs/1.jpg" alt=""/></a> 
     <a id="single_image" href="images/gallery/2.jpg"><img src="images/thumbs/2.jpg" alt=""/></a> 
     <a id="single_image" href="images/gallery/3.jpg"><img src="images/thumbs/3.jpg" alt=""/></a> 
     <a id="single_image" href="images/gallery/4.jpg"><img src="images/thumbs/4.jpg" alt=""/></a> 
     <a id="single_image" href="images/gallery/5.jpg"><img src="images/thumbs/5.jpg" alt=""/></a> 
     <a id="single_image" href="images/gallery/6.jpg"><img src="images/thumbs/6.jpg" alt=""/></a> 
    </div> 
    </div> 
    </div> 
    </div> 

<!-- FancyBox --> 
<script type="text/javascript"> 
$(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> 
<!-- End --> 

</body> 
</html>

來源

2012-12-28 hplodnarmas

頁面上有幾個元素具有相同的ID。 'ID = 「single_image」'。不是說這是你問題的根源，但你的'id'值必須是唯一的。 –

您已將fancybox附加到文檔準備好的活動。這會在頁面打開時打開燈箱，這是你想要的嗎？ – ShaggyInjun

您正在使用的所有鏈路使用相同的ID ..這是無效的，導致問題..

使用一個類來代替

<a class="single_image" href="images/gallery/1.jpg"><img src="images/thumbs/1.jpg" alt=""/></a> 
<a class="single_image" href="images/gallery/2.jpg"><img src="images/thumbs/2.jpg" alt=""/></a> 
<a class="single_image" href="images/gallery/3.jpg"><img src="images/thumbs/3.jpg" alt=""/></a> 
<a class="single_image" href="images/gallery/4.jpg"><img src="images/thumbs/4.jpg" alt=""/></a> 
<a class="single_image" href="images/gallery/5.jpg"><img src="images/thumbs/5.jpg" alt=""/></a> 
<a class="single_image" href="images/gallery/6.jpg"><img src="images/thumbs/6.jpg" alt=""/></a>

並使用

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

開一個旁註，爲什麼你使用jQuery的v1.4？當前版本是v1.8.3

來源

2012-12-28 23:13:59

它的工作！非常感謝你。我更新了JQuery，我使用頁面示例中的鏈接並沒有檢查v。信息。 – hplodnarmas

讓Fancybox工作？

回答

相關問題