-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>
頁面上有幾個元素具有相同的ID。 'ID = 「single_image」'。不是說這是你問題的根源，但你的'id'值必須是唯一的。 –
您已將fancybox附加到文檔準備好的活動。這會在頁面打開時打開燈箱，這是你想要的嗎？ – ShaggyInjun