在 fancybox 中加载各种尺寸的图像

Question

我有 5-6 张不同尺寸的图像，例如宽度从 1000 像素到 1048 像素，高度从 593 像素到 1736 像素。但它不加载小图像。我尝试传递宽度和高度，但它不起作用。

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

那么要怎么做呢？它将根据从 HTML 传递的宽度和高度进行加载。大家有什么想法吗？

Answer 1

问题

您当前的网址是

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

并且您的图像已链接到

images/press/commitment to unemployment.png

扩展为

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

将您的图片链接更改为

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

让他们工作。

更多信息

阅读这篇文章关于相对 URL 。这是摘录。

不前置

/

如果镜像与基础文档具有相同的主机和相同的路径：

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

我们会写

< img src="pic01.jpg" >

前置

/

如果镜像具有相同的主机但不同的路径：

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

我们会写

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

Answer 2

问题的一部分是

this

丢失了背景。

每当我们在函数中使用

this

时，

this

的上下文都会采用该函数。

所以我们可以尽早分配：

var $this = $(this);

---

编辑：也许

this.element

是一种获取元素的fancybox方式，我不知道，如果是这样，我错了。尽管如此，如果您想使用这些

data

高度和宽度属性，我们可以这样做：

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

});

试试这个这里

---

另外一些CSS将有助于防止

fancybox

框架滚动（对于这种直接图像使用）

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

Answer 3

尝试

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