使用fancybox查看完整大小的图像 [英] Using fancybox to view full sized image

问题描述

我正在尝试开发一些代码，其中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）{
 //设置操作变量
 var ratio =（height / width）; 
 var new_width = maxwidth; 
 var new_height =（ new_width * ratio）; 
 
 //收缩图像并添加链接到完整尺寸的图像
 obj.height（new_height）.width（new_width）; 
 
 } 
}）; 
} 
 $（'img.expand'）。fancybox（{
'transitionIn'：'fade'，
'transitionOut'：'fade'，
' speedIn'：600，
'peedOut'：200，
'overlayShow'：false，
'titlePosition'：'inside'
}）; 
} 
  

解决方案

首先上传所有图片您在首选项 - > images-> thickbox_default

中设置的相同尺寸，然后上传.jpg文件。

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

fitToView：！0 to - > fitToView：！1

立即尝试。

I'm trying to develop some code where a jquery takes images and resizes them to fit the parent div, with an option to click on the image to view it in full size with fancybox. I'm trying to do it all images with class "expand", and don't anticipate having more than on image with that class per page.

Below is what I've come up with so far. The image resizes just fine, and I can click on the image to bring up the fancybox, but it is at the resized size, not the original. I have fwidth and fheight as vars for the original dimensions, but specifying them doesn't work, since its inline. So, I need to use an iframe I've figured out, and have tried to .wrap a link around it and specify the link as an iframe with the dimensions specified, grabbing .attr("src") for the link. But no matter what I do, it goes to the 404 page within the fancybox. Below is what I have, not sure how to proceed, or am I thinking about this issue in the wrong way?

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

解决方案

First of all upload all images of same size that you set in preferences->images->thickbox_default

then upload .jpg files.

change the below value in /js/jquery/plugins/fancybox/jquery.fancybox.js

fitToView:!0 to -> fitToView:!1

Try now.

这篇关于使用fancybox查看完整大小的图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！