使用fancybox查看完整大小的图像
我正在尝试开发一些代码，其中jquery获取图像并调整它们以适应父div，可以选择单击图像以使用fancybox以完整大小查看它。 我正在尝试使用“扩展”类来完成所有图像，并且预计每页的图像不会超过该类。
以下是我到目前为止所提出的内容。 图像调整得很好，我可以点击图像来显示fancybox，但它是resize，而不是原始大小。 我有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' }); } 确保在项目中包含jquery.fancybox-buttons.css和jquery.fancybox-buttons.js。 然后你可以做这样的事情来添加按钮：
$(".fancybox").fancybox({ helpers: { buttons: {} } });
这会将按钮工具栏添加到视口顶部。 如果按下resize按钮，视口将展开以向用户显示完整图像。 因此，如果您上传图像，生成缩略图，并在缩略图上使用fancybox，则用户可以单击缩略图以查看视口，然后他们可以单击视口顶部的按钮以展开视口，以便显示完整的图像。 有些文档可以在这里找到：
http://fancyapps.com/fancybox/#instructions
请查看有关扩展function的部分。
另一个变种示例（fancybox 2.1.5）：
$('.fancybox').fancybox({ afterShow: function() { $('').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); }
首先上传您在preferences->images->thickbox_default设置的相同大小的所有图像
然后上传.jpg文件。
更改/js/jquery/plugins/fancybox/jquery.fancybox.js的以下值
fitToView:!0到 – > fitToView:!1
现在试试。