My picture hides after closing the fancybox window

Question

I'm trying to use fancyBox and I wonder why when I close the fancyBox window, my element gets a "display:none;" style. Is there any solution to avoid this ?

My html file includes :

<script type="text/javascript" src="../js/jquery.fancybox.pack.js"></script>
<link rel="stylesheet" href="../css/jquery.fancybox.css" type="text/css" media="screen" />

The target element is this:

<div id="cadre" class="planche"><a id="inline" href="#photo"><img src="../img/new/img/1_ADELE_HAENEL_Actress-H.jpg" alt="ADELE HAENEL" id="photo"></a></div>

My Fancybox js is:

$(document).ready(function() {

    /* This is basic - uses default settings */

    $("a#single_image").fancybox();

    /* Using custom settings */

    $("a#inline").fancybox({
        'hideOnContentClick': false
    });

    /* Apply fancybox to multiple items */

    $("a.group").fancybox({
        'transitionIn'  :   'elastic',
        'transitionOut' :   'elastic',
        'speedIn'       :   600, 
        'speedOut'      :   200, 
        'overlayShow'   :   false
    });

});

fancybox will always hide the `inline` content because it supposed to be its original state. What is the purpose to show something that is already visible? .... anyways, check http://stackoverflow.com/a/13003020/1055987 (you may need to use `onComplete` and `onClosed` options instead for fancybox v1.3.4) — JFK, Dec 27 '12 at 18:08
I need to let the visibility set to "on" because my purpose is to zoom in the picture. After zooming we go back to the middle sized picture and no in an empty div. I've got the same result with this, in CSS "display : block !important;" targeting my original picture. Thank you for your help. — Fabrice Chapot, Dec 29 '12 at 16:51
It's advisable to have a different visible image (mid-size) in your page and target (via `href`) the big-size image you want to zoom stored somewhere else ... generally speaking is not a good idea to re-size images via html, that will affect your page load. Anyways, I pointed the workaround in the link of my previous comment. — JFK, Dec 29 '12 at 20:39

score 14 · Answer 1 · answered Oct 23 '13 at 06:04

14

I had the same problem and the solution was to to populate the href attribute of the a element with a valid href

answered Oct 23 '13 at 06:04

emanuel.virca

598
1
6
13

1

this can not be an answer – Dinesh Kanivu Oct 23 '13 at 06:25
@DineshKanivu can you explain why this cannot be an answer? – Leo Jan 06 '16 at 14:12

Krishnadas PC · Answer 2 · 2015-07-15T07:39:00.990

6

Add a valid href tag to the a element. Below is a simple example for the same. I faced the same issue and fixed with that.

<a class="fancybox" href="http://fancyapps.com/fancybox/demo/1_b.jpg"><img src="http://fancyapps.com/fancybox/demo/1_s.jpg" alt=""/></a>

Then call the fancybox.

$(".fancybox").fancybox({});

JsFiddle demo example

http://jsfiddle.net/FM82s/

edited Jul 15 '15 at 07:39

answered Jul 15 '15 at 07:31

Krishnadas PC

5,981
2
53
54

score 2 · Answer 3 · answered Feb 23 '16 at 14:05

A few things to check first. You should be calling the .fancybox() against the <A> tag, not the image:

Your HTML should be formatted as:

<a href="image-url" class="fancybox" ...>
   <img src="image-url" />
</a>

Your jQ:

$('.fancybox').fancybox()

Secondly, if your URL does not contain a known image extension or data:image string, it will fail the "isImage" call and will not open a fancybox (most likely just fallback to standard behaviour).

isImage function, for your reference (2.1.5):

isImage: function (str) {
    return isString(str) && str.match(/(^data:image\/.*,)|(\.(jp(e|g|eg)|gif|png|bmp|webp|svg)((\?|#).*)?$)/i);
},

score 0 · Answer 4 · answered Apr 04 '15 at 19:07

0

Had the same problem.

The solution was to use another class name for the Tag then the tag. Searched for weeks... :/

answered Apr 04 '15 at 19:07

My picture hides after closing the fancybox window

4 Answers4