How to combine FancyBox with an existing div? - popup

Question

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?

Answer 1

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