Javascript 在fancybox中加载各种大小的图像

我有5-6张不同大小的图像，比如宽度从1000px到1048px，高度从593px到1736px。但它不会加载小图像。我试图通过宽度和高度，但不起作用

HTML

那么怎么做呢。它将根据html传递的宽度和高度加载。伙计们，有什么好主意吗？

试试看

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

$.fancybox（“”）；

问题 您当前的URL是

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

让他们工作

更多信息 阅读这篇文章。这里有一段摘录

未在

/

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

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

我们将编写

在前面加上一个

/

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

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

我们将编写

---

问题的一部分是

此
丢失的上下文

每当我们在函数中使用
this
时，
this
的上下文将使用该函数

因此我们可以尽早分配它：
var$this=$（this）


编辑：也许
this.element
是一种获取元素的fancybox方法，我不知道，如果是，我错了。但是，如果您想利用这些
数据
高度和宽度属性，下面是我们可以做的：

$('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
框架滚动（用于此直接图像使用）

我在本地主机上做这件事……那么告诉我如何获得fancybx插件，你相信我的编程能力吗？@PratikJoshi很抱歉我的回复太晚了……从这里你可以获得插件，你可以创建一个插件吗？你的例子加载速度太慢了，我们可以尝试任何东西。使用
但不加载小图像是什么意思？2). 是否要以实际大小显示图像（不通过fancybox缩小）？如果是这样，则不需要传递任何
数据-*
值。3). 为什么使用与缩略图相同的目标图像（
href
）而不是编辑/缩放的缩略图（图像的标签
src
）？对于如此大的图像，您正在为页面负载增加开销。在
标记中使用一个小图像，并在
标记的
href
属性中瞄准大图像。@我有几个图像，正如你在链接中看到的那样…但是我必须单击这些图像以在一个大弹出窗口中显示这些图像。不，这对我不起作用。图像正在单独打开，完整链接未显示在弹出窗口中，显示“无法加载请求的内容”。我复制了您的代码，但未加载……我不知道问题出在哪里如果您在本地执行，我无法为您调试：（嘿，我使用了你的相同代码…我不知道是什么问题…jquery版本重要吗？@RIA Dev没有加载你的JS文件，检查它们是否有相同的问题。谢谢@rob its工作得非常好…谢谢你的时间和精力
http://www.colliope.com/gifs/groovy14/button.gif
http://www.colliope.com/birdpics/owl/page.html

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

});

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