写真のサイズを変更するfancybox.js

Question

多くのJPEGを持つサイトでは、fancyboxを使用しています。私は、単一の大きな画像ファイルを使用して、KBを減らすために少なくとも圧縮された最終的な最大表示サイズを少なくとも2倍にします。このテクニックはうまくいくように見え、各オリジナルのx2とx3バージョンを作るのに多くの時間を節約し、srcsetの使用を避けます。

ファンシーボックスを使用してズームした画像で表示される画像の代替ビューがありますが、ズームされた画像はファイルの実際のピクセルサイズで表示されるため、fancyboxの最終的な表示サイズを制御する方法を理解できません。 d画面上の画像を拡大した。

できますか？おかげで、ピーター・H.

（ズーム画像はすべて同じサイズではありません）

Answer 1

あなたがfancyBox3を使用している場合は、画像のサイズを変更するには、「後負荷」のコールバックを使用することができます。

$('[data-fancybox]').fancybox({ 
    afterLoad : function(instance, slide) { 
     if (slide.type === 'image') { 
      slide.width = slide.width * 0.5; 
      slide.height = slide.height * 0.5; 
     } 
    } 
}); 

将来のすべてのインスタンスにこれを適用したい場合は、それも可能です。例：

$(document).on('onComplete.fb', function(e, instance, slide) { 
    // Your code goes here 
});