-largeAny Ideas folks? I'm trying to link the opened image in fancybox. I've looked everywhere! It sounds so simple...
So here's the code I'm using:
<a id="manual1" href="javascript:;"><img src="/example-thumb.png" alt="example" /></a>
<script type="text/javascript" src="/Cms_Data/Sites/Base/Files/js/fancyboxV2.1.0/jquery.fancybox.pack.js"></script>
<script type="text/javascript">
$("#manual1").click(function() {
$.fancybox([
'/example-large.jpg',
'/example-large2.jpg',
{
'href' : '/example-large3.jpg',
'title' : 'Lorem ipsum '
}
], {
padding : 38,
nextEffect : 'fade',
prevEffect : 'fade'
});
});
</script>
Im still not sure what you are after but is if when you click on the anchor you could do two things: etiher you find the image and its src and replace -thumb to -full and use that to trigger your fancybox method, or you could use html5 data attribute and tell what image url you want:
<a id="manual1" data-image="/example-full.jpg,/example-full-2.jpg'><img src="/example-thumb.png" alt="example" /></a>
<script type="text/javascript">
$('#manual1').click(function() {
var data = $(this).data('images').split(','),
options = {
padding : 38,
nextEffect : 'fade',
prevEffect : 'fade',
type: 'image'
};
$.fancybox.open(data , options );
})
</script>
and a demo: http://jsfiddle.net/voigtan/jJpAM/2/
Demo if you are using one image only
$('.test').click(function() {
var a = this,
images = [],
data = $(a).data('images').split(','),
options = {
padding : 38,
nextEffect : 'fade',
prevEffect : 'fade',
type: 'image',
afterShow: function() {
$("img.fancybox-image").click(function() {
window.location.href = a.href;
});
}
};
$.fancybox.open(data , options );
return false;
})
and another demo: http://jsfiddle.net/voigtan/jJpAM/3/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With