Question

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

以下是我到目前为止所提出的问题。图像调整得很好，我可以点击图像来显示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: {}
    }
});

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

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

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

Answer 2

另一个变种示例（fancybox 2.1.5）：

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

和css：

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

Answer 3

首先上传您在preferences->images->thickbox_default

中设置的相同尺寸的所有图片

然后上传.jpg文件。

更改/js/jquery/plugins/fancybox/jquery.fancybox.js

中的以下值

fitToView:!0至 - ＆gt; fitToView:!1

立即尝试。

使用fancybox查看完整大小的图像

3 个答案: