让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工作？

回答

相关问题