jQuery: Fancybox plugin redirecting

Question

I am using fancybox to show a small QR code, then you can click on the code and it is shown in a lightbox. The problem is, when you click on the thumbnail, you are taken directly to the image instead of it being displayed in the lightbox.

Here is my code:

<a href="http://chart.apis.google.com/chart?chs=500x500&cht=qr&chld=|1&chl=sample_text" rel="fancybox" class="fancybox">
    <img src="http://chart.apis.google.com/chart?chs=50x50&cht=qr&chld=|1&chl=sample_text" alt=""/>
</a>
<script>
$(".fancybox").fancybox( {
    openEffect: 'elastic',
    closeEffect : 'elastic',
});
</script>

Here is my code in jsfiddle:

http://jsfiddle.net/zyjfC/1/

So it is. This solution isn't the most obvious thing in the documentation... — Jonno_FTW, Feb 17 '14 at 08:53

score 0 · Accepted Answer · answered Feb 17 '14 at 03:44

It looks like the link which triggers the fancy box looks for an extension type. (By testing, haven't looked through the source code.)

You can, if you are fine with this, try to fool the script by adding a parameter at the end of you a href

So your href would look something like this

http://chart.apis.google.com/chart?chs=500x500&cht=qr&chld=|1&chl=sample_text&.jpg

here is a fiddle with that work around

JSFiddle

Full code since SO hates jsfiddle links without code

<a href="http://chart.apis.google.com/chart?chs=500x500&cht=qr&chld=|1&chl=sample_text&.jpg" rel="fancybox" class="fancybox">
    <img src="http://chart.apis.google.com/chart?chs=50x50&cht=qr&chld=|1&chl=sample_text" alt=""/>
</a>

$(".fancybox").fancybox( {
    openEffect: 'elastic',
    closeEffect : 'elastic',
});

jQuery: Fancybox plugin redirecting

1 Answers1