的fancybox;如何设置fancybox-inner属性的样式？看起来它已经在某种程度上被设计了

Question

以下是我所看到的图像，可能会清楚地说明正在发生的事情：

http://i.imgur.com/bMFrJ.jpg

（点击放大）

基本上，查看fancybox-inner属性，并希望对其进行样式化以减小fancybox中图像的大小，而不是调整图像本身的大小。

然后我会尝试在fancybox右侧添加一个侧边栏区域，用户可以点击“下载高分辨率图像”，然后下载高分辨率版本，但这是下一步。

Answer 1

您可以使用beforeShow回调来动态设置图像的新大小，如：

$(".fancybox").fancybox({
    beforeShow: function() {
        var newWidth = 250; // set new image display width
        $(".fancybox-inner img").css({
            width  : newWidth,
            height : "auto"
        }); // apply new size to img
        // optionally :
        // set new values for parent container IF you want to match the image size
        // this.width  = newWidth;
        // this.height = $(".fancybox-inner img").innerHeight();
    }
}); // fancybox​

注意：这适用于fancybox v2.1.3 +

Answer 2

快速'黑客'似乎让它运转起来，虽然不是完整的解决方案，但它应该是一个很好的起点。

在jquery.fancybox.css文件中，在文件底部添加以下内容，将图像宽度限制为300px ..

.fancybox-skin,
.fancybox-outer,
.fancybox-inner{max-width:300px;margin:0 auto;}