Send height and width to fancybox from an image click

Question

I have say 10 images and when anyone of them is clicked they open up a Fancybox frame (HTML). The problem is each images has a different sized Fancybox frame that needs to be opened. How can I send the height and width from the image being clicked.

$("a.various").fancybox({
    beforeClose: function () {
        $("#gallery_spacer").remove();
    },
    openEffect: 'fade',
    openSpeed: 1500,
    closeEffect: 'fade',
    closeSpeed: 400,
    padding: '0',
    width: 660,
    height: 700,
    maxWidth: 660,
    maxHeight: 700,
    fitToView: false,
    autoSize: false,
    closeClick: false,
    autoScale: 'false',
    autoDimensions: 'false',
    transitionIn: 'true',
    transitionOut: 'true',
    type: 'iframe',
    openEffect: 'fade',
    helpers: {
        overlay: {
            css: {
                'background': 'rgba(255, 255, 255, 0.0)'
            }
        }
    }
});


$("a.various1").fancybox({
    beforeClose: function () {
        $("#gallery_spacer").remove();
    },
    openEffect: 'fade',
    openSpeed: 1500,
    closeEffect: 'fade',
    closeSpeed: 400,
    padding: '0',
    scrolling: 'no',
    width: 660,
    height: 1870,
    maxWidth: 660,
    maxHeight: 1870,
    fitToView: false,
    autoSize: false,
    closeClick: false,
    autoScale: 'false',
    autoDimensions: 'false',
    transitionIn: 'true',
    transitionOut: 'true',
    type: 'iframe',
    openEffect: 'fade',
    helpers: {
        overlay: {
            css: {
                'background': 'rgba(255, 255, 255, 0.0)'
            }
        }
    }
});

The HTML

<li><a class="various1 fade " href="FOOTWEAR_SUB_PAGES/MERCURIAL_SUPERFLY.html"><img src="MAIN_IMAGES/MERCURIAL_SUPERFLY-2.jpg"  border="0" /></a></li>
<li><a class="various2 fade " href="FOOTWEAR_SUB_PAGES/AIRMAX_MOTO.html"><img src="MAIN_IMAGES/AIRMX-22.jpg"  border="0"  /></a></li>

score 3 · Accepted Answer · answered Feb 23 '13 at 18:35

You basically need a single script to bind all your links to fancybox, then use data-* (HTML5) attributes to pass the width and height individually

You could use this html :

<li><a class="fancybox" data-width="660" data-height="700"  href="FOOTWEAR_SUB_PAGES/MERCURIAL_SUPERFLY.html"><img src="MAIN_IMAGES/MERCURIAL_SUPERFLY-2.jpg"  border="0" /></a></li>
<li><a class="fancybox" data-width="660" data-height="1870" href="FOOTWEAR_SUB_PAGES/AIRMAX_MOTO.html"><img src="MAIN_IMAGES/AIRMX-22.jpg"  border="0"  /></a></li>

... and fetch the size of each link using fancybox beforeShow callback like :

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

... where $(this.element) refers to each clicked element.

See JSFIDDLE

Please notice in the fiddle that I commented out some API options that are not valid in v2.x (they are for v1.3.4 and are not compatible)

score 1 · Answer 2 · answered Feb 22 '13 at 22:54

1

you can get the width and height of the image like that:

var w = $("a.various1 img").width();
var h = $("a.various1 img").heigth();

answered Feb 22 '13 at 22:54

Oden

756
8
21

Thanks but when someone clicks the image a html page is opened. each page is a different but specific size. – gVidal Feb 22 '13 at 22:57
I don't think the OP is asking for the size of the image clicked but how to pass size values after click – JFK Feb 23 '13 at 18:38

score 1 · Answer 3 · edited May 23 '17 at 12:06

Since you are loading content into an iframe, you cannot get the required dimensions for fancybox until after the html is rendered in the iframe.

What you can do is use onComplete to resize the fancybox after the html is rendered as described here.

So for your case you do something like this:

$("a.various").fancybox({
            beforeClose: function () { $("#gallery_spacer").remove(); },
            'onComplete' : function() {
                $('#fancybox-frame').load(function() {
                    $('#fancybox-content').height($(this).contents().find('body').height()).width($(this).contents().find('body').width());
            });
            openEffect: 'fade',openSpeed: 1500,closeEffect: 'fade',closeSpeed: 400,'padding': '0','width': 660,'height': 700,
            maxWidth: 660,maxHeight: 700,fitToView: false,autoSize: false,closeClick: false,'autoScale': 'false','autoDimensions': 'false',
            'transitionIn': 'true','transitionOut': 'true','type': 'iframe','openEffect': 'fade',
            helpers: {overlay: { css: {'background': 'rgba(255, 255, 255, 0.0)'}}}});

`onComplete` is an option for fancybox v1.3.4 and the OP since to be using version 2.x, in that case they should use `afterShow` — JFK, Feb 23 '13 at 04:57

Send height and width to fancybox from an image click

3 Answers3