-1

私は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>
4

1 に答える 1

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です

于 2012-12-28T23:13:59.637 に答える