So I'm using fancybox 2 on a div. But for some reason, when I click the div and fancybox opens, it hides the div (only showing the outline of the wrapper div), and the only way I can get the div back is to reload the page. Anyone else have this problem? If so, how do I fix it?
I searched google all last night and couldn't find anyone who was having this problem. And after reading the license page I don't think fancybox 2 supports the onClose or onStart attributes.
Here's my div
<div class='photo'><img class='fancybox' src='images/jpge1.jpg></div>
$(document).ready(function() {
$('.fancybox).click(function() {
$('.fancybox').fancybox();
});
});
There are a couple of issues with your code (without mentioning the syntax errors : your src attribute and your jQuery selectors are not properly quote closed)
if you bind fancybox to an element other than an anchor <a> then fancybox treats it as inline content and it will always place it back with a display:none property.
When you do
$(document).ready(function() {
$('.fancybox).click(function() {
$('.fancybox').fancybox();
});
});
The first click on .fancybox selector only binds itself to fancybox but it will only fire fancybox after the second click
So if you want to properly bind fancybox to an element other than an anchor (a div in your case) and then open the image (which is inside the div) inside fancybox without hiding it after fancybox is closed, then you have to do:
Bind fancybox to the div by setting the class fancybox to it, not to the img tag
<div class='photo fancybox'>
<img src='images/jpge1.jpg' />
</div>
Then use this code :
$(document).ready(function () {
$('.fancybox').click(function () {
var href = $(this).find("img").attr("src");
$.fancybox({
href: href,
type: "image"
});
return false;
});
});
See JSFIDDLE
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments