Question

I’m not sure how to explain this, let me put the code first:

<div class="image">

    <a title="Some Title" rel="gallery" href="path/to/image.png">

        <img src="path/to/image.png" />
    </a>

</div>

I would like to use for the thumbnail (img) and the box content (a) the same image. But with the most basic FancyBox code:

$( '.image a' ).fancybox();

When clicked, tiny images are being stretched. And I want them to keep with their original sizes.

If I change the code to

$( '.image img' ).fancybox();

It works, but after FancyBox is opened, the thumbnail, behind the overlay, vanishes. And after closed, it not comes back.

I want this behavior because the images I’m using don’t need to be enlarged, but they need to have some “focus” and nothing better to direct the user attention to some image than a fancybox (lightbox, colorbox…)

I tried to set several options, once at a time and none of them worked.

Answer 1

If your images are so tiny, then you might need to change minWidth/minHeight – http://jsfiddle.net/EPGT9/

btw, in your second attempt, you are attaching fancyBox to the image that opens self as an inline content, and hides self after closing.