Javascript 从图像单击将高度和宽度发送到fancybox

我说有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>

您可以这样获得图像的宽度和高度：

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

---

您可以这样获得图像的宽度和高度：

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

---

因为您正在将内容加载到iframe中，所以在iframe中呈现html之前，您无法获得fancybox所需的维度

您可以做的是在html呈现后使用onComplete调整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)'}}}});

---

因为您正在将内容加载到iframe中，所以在iframe中呈现html之前，您无法获得fancybox所需的维度

您可以做的是在html呈现后使用onComplete调整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)'}}}});

---

基本上，您需要一个脚本将所有链接绑定到fancybox，然后使用

数据-*

（HTML5）属性分别传递

宽度和
高度

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

。。。其中，
$（this.element）
指的是每个单击的元素

请参见

请注意我在文章中注释了一些在v2.x中无效的API选项（它们适用于v1.3.4，不兼容）
您基本上需要一个脚本将所有链接绑定到fancybox，然后使用
数据-*
（HTML5）分别通过
宽度和
高度的属性

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

。。。其中，
$（this.element）
指的是每个单击的元素

请参见

请注意在小提琴中，我注释掉了一些在v2.x中无效的API选项（它们适用于v1.3.4，不兼容）
谢谢，但当有人单击图像时，会打开一个html页面。每个页面都有不同但具体的大小。我不认为OP要求的是点击图像的大小，而是点击后如何传递大小值。谢谢，但是当有人点击图像时，会打开一个html页面。每个页面都有一个不同但具体的大小。我不认为OP要求的是点击图像的大小，但如何在点击完成后传递大小值是fancybox v1.3.4和OP的一个选项，因为OP使用的是2.x版，在这种情况下，他们应该使用
afterShow
onComplete
是fancybox v1.3.4和OP的一个选项，因为要使用版本2.x，在这种情况下，他们应该使用
afterShow