0

これが私が見ているものの画像です、何が起こっているのかを非常に明確にするかもしれません：

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

（クリックしてズーム）

基本的に、fancybox-innerプロパティを見て、画像自体のサイズを変更するのではなく、fancybox内の画像のサイズを縮小するようにスタイルを設定したいと考えています。

次に、ファンシーボックスの右側にサイドバー領域を追加して、ユーザーが[高解像度画像のダウンロード]をクリックして高解像度バージョンをダウンロードできるようにしますが、それが次のステップです。

4

2 に答える 2

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​

注：これはfancyboxv2.1.3+用です

于 2012-12-19T03:10:18.713 に答える
0

簡単な「ハック」でうまくいくようです。完全な解決策ではありませんが、それはあなたにとって良い出発点になるはずです。

jquery.fancybox.cssファイルで、ファイルの下部に次を追加して、画像の幅を300pxに制限します。

.fancybox-skin,
.fancybox-outer,
.fancybox-inner{max-width:300px;margin:0 auto;}
于 2012-12-19T01:35:40.337 に答える