Load various size images in a fancybox

Question

I have 5-6 images with various sizes like width from 1000px to 1048px and height from 593px to 1736px. But its not loading small images. I tried to pass the width & height but its not working.

HTML

<a class="fancybox" href="images/press/creating websies for NGOS.png" data-fancybox-group="gallery" title="Creating websites for NGOs" data-width="1048" data-height="593">
    <img src="images/press/creating websies for NGOS.png" style="border:0" alt="">
</a>

JQUERY

$(".fancybox").fancybox({
        beforeShow: function () {
        this.width  = $(this.element).data("width");
        this.height = $(this.element).data("height");
        }
});

So how do it. It will load as per the width & height passed from html. Any idea guys ?

Answer 1

Part of the problem is the context of this being lost.

Whenever we use this in a function, the context of this takes that function.

So we can assign it early : var $this = $(this);

---

Edit: Perhaps this.element is a fancybox way to get the element, I don't know, if so, I'm wrong. Nontheless, here's what we can do , if you want to make use of those data height and width attributes:

$('a.fancybox').on('click', function (e) {
    e.preventDefault(); /* stop the default anchor click */

    var $this = $(this); /* register this */
    $.fancybox({
        'content': $this.html(), /* the image in the markup */
        'width': $this.attr("data-width"),
        'height': $this.attr("data-height"),
        'autoDimensions': false,
        'autoSize': false
    });

});

Try this out here

---

Also some CSS will help keep the fancybox frame from scrolling ( for this direct image usage )

.fancybox-inner img {
    display:block;
    width:100%;
    height:100%;
}

Answer 2

The Problem

Your current URL is

http://firstplanet.in/about/feature.php/

and your images are linked to

images/press/commitment to unemployment.png

which gets expanded to

http://firstplanet.in/about/feature.php/images/press/creating%20websies%20for%20NGOS.png

change your image links to

/about/images/press/commitment to unemployment.png

to get them working.

More Info

Read this article on relative URLs. Here is an excerpt.

Not prepending a /

If the image has the same host and the same path as the base document:

http://www.colliope.com/birdpics/owl/pic01.jpg
http://www.colliope.com/birdpics/owl/page.html

We would write < img src="pic01.jpg" >

Prepending a /

If the image has the same host but a different path:

http://www.colliope.com/gifs/groovy14/button.gif
http://www.colliope.com/birdpics/owl/page.html

We would write < img src="/gifs/groovy14/button.gif" >

Answer 3

Try

$.fancybox("<img src='images/press/creating_websies_for_NGOS.png' style='border:0'>");