1

I've been experimenting with Fancybox, as a lightbox alternative. However, I don't seem to be able to get it to work. My images always open in a new tab/window instead of the lightbox. I have tested it with an implementation of my own code, and with the original code.

Own code: http://www.demoeial.be/devversion/artikels/10369/Studentenraad-van-Louvain-la-Neuve-sluit-zich-weer-aan-bij-de-FEF.dhtml

Original code: http://www.demoeial.be/devversion/fancybox/test.php

Any ideas? I have tried adding/deleting code which may be interfering, but I'm not able to get it to work.

Code

Head:

<script type="text/javascript" src="http://www.demoeial.be/devversion/js/jquery.min.js"></script>
<script type="text/javascript" src="http://www.demoeial.be/devversion/js/jquery.mousewheel-3.0.6.pack.js"></script>
<script type="text/javascript" src="http://www.demoeial.be/devversion/js/fancybox/jquery.fancybox.js?v=2.1.1"></script>
<link rel="stylesheet" type="text/css" href="http://www.demoeial.be/devversion/css/fancybox/jquery.fancybox.css?v=2.1.1" media="screen" />


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

        /*
         *  Different effects
         */

        // Change title type, overlay closing speed
        $(".fancybox").fancybox();
       }
</script>

Body:

<div id='article'><div id='articletitle'>Studentenraad van Louvain-la-Neuve sluit zich weer aan bij de FEF</div>
                  <div class='publication_date'>Artikel gepubliceerd op 18 Oktober 2012 om 12:57</div><div id='sidebarpics'><a class='fancybox' href='http://media.demoeial.be/photos/2012/10/10369_509_xl.jpg' title='' rel='fancybox' ><img src='http://media.demoeial.be/photos/2012/10/10369_509_side.jpg' width='280' alt='' /></a><div class='imagedescription_side'></div></div>
purplizer
  • 59
  • 1
  • 6

1 Answers1

1

Line 19 of your HTML page, you open a

$(document).ready(function() {

but you don't close it

You should have a code like this :

$(document).ready(function() {
     // Change title type, overlay closing speed
     $(".fancybox").fancybox();
});

You would have seen the error in the firebug console for example.

Jscti
  • 14,096
  • 4
  • 62
  • 87
  • updated the code, alas, not the solution to the problem @Bixi – purplizer Oct 18 '12 at 19:38
  • you should definitely install firebug and check the console... Now you're having another error : `TypeError: $(".fancybox").fancybox is not a function` – Jscti Oct 18 '12 at 19:44
  • check http://stackoverflow.com/questions/3992054/fancybox-is-not-a-function You're loading jquery lib twice (one time before loading fancybox and one time after = kaboom) – Jscti Oct 18 '12 at 19:50
  • Well @Bixi that was it. I had already read that post, but simple didn't think about a second jquery. I searched for it in my code in Dreamweaver, but it didn't show. It works now. Thank you so much! – purplizer Oct 18 '12 at 19:56