Question

I have been trying to get fancybox to work in this free template that a nice guy gave away on reddit yesterday but I’m not having much luck. I’m decent with HTML/CSS but not too great at Jquery. If anyone could point me in the right direction I would appreciate it. I’m trying to get the portfolio images to pop up in fancyboxes. http://jsfiddle.net/yz93H/1/ Thanks in advance for any help.

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


   <figure class="entry web"> 
                <a class="fancybox" href="img/portfolio-image.jpg"><img src="img/portfolio-image.jpg" alt=""></a>
            </figure> 

Answer 1

The jsfiddle you posted is a little bit difficult to work with due to all the relative paths, still, one thing I noticed is that you’re not linking the Fancybox javascript into your document.

There should be something like:

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

Hopefully that will fix it.

EDIT: Sorry, missed your js at the end of the document. On a second look, I found your problem. The snippet you posted should come after jQuery has been loaded. Since your jQuery is only loaded at the end of the document, your code was throwing Object #<HTMLDocument> has no method 'ready'.

I’ve created a new fiddle with a working version of what you posted. Everything is loaded off CDN’s and I’ve used Twitter’s logo as a showcase: http://jsfiddle.net/tiagoespinha/yz93H/4/

Essentially, the only change you need is to put this

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

after jQuery’s script tag.