Jquery 使用fancybox查看全尺寸图像

我正在尝试开发一些代码，jquery在其中拍摄图像并调整它们的大小以适应父div，还可以选择单击图像以使用fancybox查看完整大小的图像。我试图用类“expand”来完成所有的图像，并且不要期望在每个页面上有超过该类的图像

下面是我到目前为止的想法。图像的大小调整得很好，我可以点击图像打开fancybox，但它的大小是调整后的，而不是原来的大小。我将fwidth和fheight作为原始尺寸的变量，但指定它们不起作用，因为它们是内联的。因此，我需要使用一个我已经找到的iframe，并尝试在其周围环绕一个链接，并将该链接指定为具有指定维度的iframe，grabbing.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'
        });
}

---

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

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

这会将按钮工具栏添加到视口顶部。如果按“调整大小”按钮，视口将展开以向用户显示完整图像。因此，如果上载图像，生成缩略图，并在缩略图上使用fancybox，用户可以单击缩略图查看视口，然后单击视口顶部的按钮展开视口，使其显示完整图像。可在此处找到一些文档：

---

请看关于扩展功能的部分

另一个变体作为示例（fancybox 2.1.5）：

---

首先，上传所有大小与您在

首选项->图像->thickbox\u default

然后上传.jpg文件

在

/js/jquery/plugins/fancybox/jquery.fancybox.js

fitToView:！0到->
fitToView:！1

现在试试

$('.fancybox').fancybox({
  afterShow: function() {
    $('<div class="fancybox-fullsize"></div>').appendTo(this.skin).click(function() {
      $.fancybox.toggle();
      $(this).toggleClass('fancybox-fullsize fancybox-fullsize-r');
    });
  }
});

.fancybox-fullsize, .fancybox-fullsize-r {
  position: absolute;
  width: 36px;
  height: 36px;
  top: -18px;
  left: -18px;
  z-index: 99999;
  cursor: pointer;
}

.fancybox-fullsize {
  background-image: url(img/fancybox_fullsize.png);
}

.fancybox-fullsize-r {
  background-image: url(img/fancybox_fullsize-r.png);
}