jquery - 使用 fancybox 查看全尺寸图像

Question

我正在尝试开发一些代码，其中 jquery 获取图像并调整它们的大小以适合父 div，并可以选择单击图像以使用 fancybox 查看完整尺寸。我正在尝试使用“expand”类来完成所有图像，并且预计每页不会有超过该类的图像。

以下是我到目前为止所想到的。图像大小调整得很好，我可以单击图像来调出 fancybox，但它是调整后的大小，而不是原始大小。我有 fwidth 和 fheight 作为原始尺寸的变量，但指定它们不起作用，因为它是内联的。因此，我需要使用我已经弄清楚的 iframe，并尝试在其周围包装一个链接，并将该链接指定为具有指定尺寸的 iframe，并获取该链接的 .attr("src") 。但无论我做什么，它都会进入 fancybox 内的 404 页面。以下是我所拥有的，不知道如何继续，或者我是否以错误的方式思考这个问题？

if($('img.expand').length){ 
        var parentClass = $('img.expand').parent().attr("class");           
        var fwidth = $('img.expand').attr("width");
        var fheight = $('img.expand').attr("height");                   
        if($('img.expand').parents().is('.grid_10')){
                $('img.expand').each(function() {
                var maxwidth = 590;
                var obj = $('img.expand');
                var width = obj.width();
                var height = obj.height();
                if (width > maxwidth) {
                    //Set variables for manipulation
                    var ratio = (height / width );
                    var new_width = maxwidth;
                    var new_height = (new_width * ratio);

                    //Shrink the image and add link to full-sized image
                    obj.height(new_height).width(new_width);

                }
            });
        }
        $('img.expand').fancybox({
            'transitionIn'  :   'fade',
            'transitionOut' :   'fade',
            'speedIn'       :   600, 
            'speedOut'      :   200, 
            'overlayShow'   :   false,
            'titlePosition' :   'inside'
        });
}

Answer 1

确保您的项目中包含 jquery.fancybox-buttons.css 和 jquery.fancybox-buttons.js。然后您可以执行以下操作来添加按钮:

$(".fancybox").fancybox({
    helpers: {
        buttons: {}
    }
});

这会将按钮工具栏添加到视口(viewport)的顶部。如果您按下调整大小按钮，视口(viewport)将展开以向用户显示完整图像。因此，如果您上传图像，生成缩略图，并在缩略图上使用 fancybox，用户可以单击缩略图来查看视口(viewport)，然后他们可以单击视口(viewport)顶部的按钮来展开视口(viewport)，以便显示完整图像。一些文档可以在这里找到:

http://fancyapps.com/fancybox/#instructions

查看有关扩展功能的部分。