I've been trying to get Fancybox and Quicksand to work together. I've got them both working, on the same page, just not "together".
Here's some pieces of code:
<head>
<script type="text/javascript">
$(document).ready(function() {
$("a:visible").fancybox({
'type' : 'image',
'titlePosition' : 'outside',
'overlayColor' : '#000',
'overlayOpacity' : 0.7
});
});
</script>
</head>
And Then:
<a href="./gallery/img/shots/3.jpg" ><img src="./gallery/img/shots/3.jpg" /></a>
Together, these work. However, is doesn't work (Just opens image in new tab) on anything in the Quicksand "area", such as:
<section id="container">
<ul id="stage">
<li data-tags="Urban"><a href="./gallery/img/shots/1.jpg"><img src="./gallery/img/shots/1.jpg" alt="Illustration" /></li></a>
</ul>
</section>
I've looked around, and found that I might have to change the following code from the tutorial:
$('#stage').quicksand(link.data('list').find('li'));
to
$('#stage').quicksand(link.data('list').find('li'),function(){
// FancyBox initialization code.
});
I've also looked around for this "initialization code", and all I;ve found is fancybox_init();
. This doesn't seem to do anything? :S I've also tried changing it to the $('a:visible').fancybox({...});
, but this doesn't work either.
I know it's something small/silly, I just can't see it.
I know this works on any link on the page, but that's something to fix later, I don;t think it's the issue?
Thanks for any help,
Joseph Duffy
I believe the reason that it might not be working is that you're including a link tag in your mark-up. Basically, your link gets clicked and the image opens up as the result of the click. Try removing the 'a' tags and see if you still experience the same problem.