Home/ Questions/Q 9046701
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-16T11:42:49+00:00

I’m pretty new to using JQuery plug-ins and I must admit, I have absolutely

  • 0

I’m pretty new to using JQuery plug-ins and I must admit, I have absolutely no idea what I am doing. I’m trying to install Fancybox on my image gallery, but on click the images are just opening up in a completely new page instead of in the lightbox view. Any help is greatly appreciated.

<!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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You are using the same id on all links.. That is invalid and is causing the problems..

    Use a class instead 

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

    And use 

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

    On a sidenote, why are you using v1.4 of jQuery ? the current version is v1.8.3

    • 0