1

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

Joseph Duffy
  • 4,566
  • 9
  • 38
  • 68

1 Answers1

0

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.

evasilchenko
  • 1,862
  • 1
  • 13
  • 26
  • I'm not 100% sure what you're saying. Should I remove the `a href` from the links, or the `a` from the `a:visible`? I've changed that part to `.popupimage` and added that class to any images I want to have fancybox popup for. It works the first image (As it did before), but not the image(s) after. I think I get what you're saying about the image opening as a result of my click, but I don't get why it won't work when it's part of Quicksand, but works when it isn't. Also, how would Fancybox get it's info of what to show? I need it to click on a thumbnail and then show the full image. – Joseph Duffy Aug 08 '11 at 22:35
  • Basically you have an a tag within the li tag which is the reason that a new page opens with the click of the image. If you look at the quicksand examples they don't add link tags to their li elements. – evasilchenko Aug 08 '11 at 23:04
  • Thanks for the comment. I'll look over it again tomorrow, I'll get some sleep now. I quickly tried removing the a tag from it, but I don't get a popup. The Quicksand part works fine, I just need the images that are being shuffled to show an image through fancybox when clicked. Sorry for my lack of knowledge ;) I also looked at the examples, but I'll take a good look over them tomorrow :) – Joseph Duffy Aug 08 '11 at 23:28
  • @JosephDuffy have you solved it ?? i am on the same problem http://stackoverflow.com/q/8048063/716492 – Ajay Patel Nov 08 '11 at 09:51
  • @AjayPatel I believe I got it working, but I don't remember how at this time. I hope you found a solution, otherwise, I'll take a look again! – Joseph Duffy Nov 23 '11 at 17:45