How to combine FancyBox with an existing div?

I'm trying to combine FancyBox with an existing div. This div includes caption hover effects. I have no idea on how to combine it though, as I don't know that much about JS yet. My HTML contains multiple pictures, this is one of them:

<!-- Image Caption 1 -->
  <div id="box-6" class="box">
    <img id="image-6" src="beeld/images/grafisch/image09.png"/>
    <span class="caption scale-caption">
        <h3>Scale Caption</h3>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, 
        sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
    </span>

All I want is for file:///Data$/marketing/2013/Sophia/Website/HTML/Beeld/images/bgimg.jpg (test image) to pop-up. Right now all it does is reopen the window to show the picture.

So basically I'm trying to merge that HTML with the FancyBox HTML:

<a id="single_3" href="http://farm9.staticflickr.com/8507/8454547519_f8116520e1_b.jpg" title="Ayvalık, Turkey (Nejdet Düzen)">
<img src="http://farm9.staticflickr.com/8507/8454547519_f8116520e1_m.jpg" alt="" />

Would there be any way to accomplish that?

The JS:

<script type="text/javascript">

$(document).ready(function() {
$(".fancybox").fancybox();
$("#single_1").fancybox({
      helpers: {
          title : {
              type : 'float'
          }
      }
  });

$("#single_2").fancybox({
    openEffect  : 'elastic',
    closeEffect : 'elastic',

    helpers : {
        title : {
            type : 'inside'
        }
    }
});

$("#single_3").fancybox({
    openEffect : 'elastic',
    closeEffect : 'none',
    helpers : {
        title : {
            type : 'outside'
        }
    }
});

$("#single_4").fancybox({
    helpers : {
        title : {
            type : 'over'
        }
    }
});
});
</script>

I tried to merge it myself, like this:

<!-- Image Caption 1 -->
    <a id="single_3" href="file:///Data$/marketing/2013/Sophia/Website/HTML/Beeld/images/bgimg.jpg" title="Ayvalık, Turkey (Nejdet Düzen)">
    <div id="box-6" class="box">
    <img id="image-6" src="beeld/images/grafisch/image_09.png"/></a>
    <span class="caption scale-caption">
        <h3>Scale Caption</h3>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, 
        sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
    </span>

but FancyBox simply won't popup.

What did I do wrong?

Solution

A couple of things:

1) Make sure you first load the jquery library

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

2) Then you must load the fancybox code

<script src="http://yourdomain.com/your_path_to_js/jquery.fancybox.pack.js"></script>

3) Then write this code in head section

$(document).ready(function() {
    $('#single_3').fancybox({
        openEffect : 'elastic',
        closeEffect : 'none',
        helpers : {
            title : {
                type : 'outside'
            }
        }
    });
});

4) And this in body section

<a id="single_3" href="http://farm9.staticflickr.com/8507/8454547519_f8116520e1_b.jpg" title="Ayvalık, Turkey (Nejdet Düzen)">
    <img src="http://farm9.staticflickr.com/8507/8454547519_f8116520e1_m.jpg" alt="" />
</a>

Here is a working demo http://jsfiddle.net/fkeVR/5/

5) make sure the file you are reffering to file:///Data$/marketing/2013/Sophia/Website/HTML/Beeld/images/bgimg.jpg is accessible from your script

6) make sure your javascript has no errors. If you use firefox, the console of Firebug is a great help for debugging