jquery - 花式盒子；如何设置 fancybox-inner 属性的样式？看起来它已经以某种方式设计了

Question

这是我所看到的图像，可能会很清楚发生了什么：

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

（点击放大）

基本上，查看 fancybox-inner 属性，并希望对其进行样式设置以减小 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

一个快速的“hack”似乎可以让它工作，虽然不是完整的解决方案，但它应该是你的一个很好的起点。

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

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