HTML
<div class="test">
<a href="/example/123.html" class="fancybox"> link 1</a>
<a href="/example/123.html" class="fancybox"> link 1</a>
<a href="/example/123.html" class="fancybox"> link 1</a>
</div>
JQuery - updated
$('.fancybox').each(function(){
$(this).fancybox({
type: 'ajax',
autoHeight: true,
width: 930,
autoSize: false,
autoCenter: true,
fitToView: false,
topRatio: 0,
arrows: false,
closeBtn: true,
closeClick: true,
autoPlay: false,
openSpeed: 1,
closeSpeed: 'fast',
closeClick: false,
live: true,
helpers: {
overlay: {
openSpeed: 'fast'
}
}
});
});
Attempted with only
$('.fancybox').fancybox();
The first clicked link will open fancybox
. Then the next clicked link will not open fancybox
and just show blank overlay.
Noticed that if with parent.location.reload(true);
, it worked by refreshing whole page and then show fancybox
. That is not what I wanted. It should work every time click on different links and show fancybox
without refresh.
Thought with ajax that it could get href to process and then show fancybox
but it does not work :(
Another thing is that Fancybox
seemed to be initialized more than once. How to prevent it from being initialized more than once?
Got error: `Uncaught TypeError: $(...).fancybox is not a function
Is there any way to make fancybox
work without having to refresh page everytime click on link?
Updated
I edited the code above and it is still giving me trouble.