Question

我很擅长使用JQuery插件，我必须承认，我完全不知道我在做什么。我正在尝试在我的图片库中安装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>

Answer 1

您在所有链接上使用相同的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

让Fancybox工作？

1 个答案: