將高度和寬度從圖像點擊發送到fancybox

Question

我說有10張圖像，當單擊其中的任何一個時，它們都會打開一個Fancybox框架（HTML）。 問題是每個圖像都有一個需要打開的不同尺寸的Fancybox框架。 如何從被單擊的圖像發送高度和寬度。

$("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)'
            }
        }
    }
});

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>

Answer 1

基本上，您需要一個腳本來將所有鏈接綁定到fancybox，然后使用data-* （HTML5）屬性分別傳遞width和height

您可以使用以下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>

...並使用fancybox beforeShow回調獲取每個鏈接的大小，例如：

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

... $(this.element)表示每個單擊的元素。

參見JSFIDDLE

請我注釋掉不在V2.X有效一些API選項小提琴通知 （它們是V1.3.4和不兼容）

Answer 2

您可以像這樣獲得圖像的寬度和高度：

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

Answer 3

由於您是將內容加載到iframe中，因此在iframe中呈現html之后，才能獲得fancybox所需的尺寸。

你可以做的是使用的onComplete所描述的HTML渲染后調整的fancybox 這里 。

因此，對於您的情況，您可以執行以下操作：

$("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)'}}}});