Search code examples
jqueryhtmlfancybox

jQuery FancyBox just opens images in a new tab and not in a modal window

Fancybox just opens in a new tab and not in a modal gallery as desired. Please can you look at my code and help me out with what I have done wrong.

Many thanks, Harry.

LINKS 

    <link rel="stylesheet" href="css/jquery.fancybox.css" type="text/css" media="screen" />
    <script type="text/javascript" src="js/jquery.fancybox.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

    <link rel="stylesheet" href="js/helpers/jquery.fancybox-buttons.css" type="text/css" media="screen" />
    <script type="text/javascript" src="js/helpers/jquery.fancybox-buttons.js"></script>
    <script type="text/javascript" src="js/helpers/jquery.fancybox-media.js"></script>

    <link rel="stylesheet" href="js/helpers/jquery.fancybox-thumbs.css" media="screen" />
    <script type="text/javascript" src="js/helpers/jquery.fancybox-thumbs.js"></script>

HTML & JAVASCRIPT

  <script type="text/javascript">
            $(document).ready(function() {
                $(".fancybox").fancybox();
            });
  </script>

<a class="fancybox" rel="group" href="images/one.jpg"><img src="images/one.jpg" width="200" alt="" /></a>
<a class="fancybox" rel="group" href="images/two.jpg"><img src="images/two.jpg" width="200" alt="" /></a>
Solution

  • To start with, jQuery should be loaded before fancybox, since fancybox is dependent on jQuery to work. So you'll want to switch the order of those scripts. I'd recommend following the fancybox setup documentation found here - http://fancybox.net/howto

    To find out about other potential errors, if you are using Chrome you should use the Console to help notify you to various errors (all other browsers have similar tools available, but I personally prefer Chrome's). The console can be reached from Tools->Developer Tools, or by right-clicking anywhere on the page and clicking 'Inspect Element'. The Console will be the far-right most tab in Developer Tools. It will notify you to various errors which will help debug.

    Hope that helps.