-2

私の理解では、これにより、Retina ディスプレイを搭載したデバイスが可能な限り最高の画像を表示することが保証されます。

<img src="image_400x300.jpg" width="200" height="150" />

...そしてこれは FancyBox のデモコードです

<a id="fb_image" href="image_800x600.jpg" title="The Title">
    <img src="image_400x300.jpg" width="200" height="150" />
</a>

...メイン Web ページのサムネイルは Retina ディスプレイをサポートしますが、FancyBox で開いた画像を Retina をサポートするようにプログラムする方法がわかりません。

何か案は？

4

2 に答える 2

3

fancyBoxに網膜サポートのプルリクエストを追加しました 。https ：//github.com/fancyapps/fancyBox/pull/420をご覧ください。

于 2012-10-17T23:53:23.650 に答える
0

beforeShow次のようなコールバックを使用してハックする必要がある場合があります。

$(document).ready(function() {
 $("#fb_image").fancybox({
  beforeShow: function(){
   var retinaWidth = this.width / 2; // set new image retina display width
   $(".fancybox-image").css({"width":retinaWidth,"height":"auto"}); // apply new retina display size to img
   // set new values for parent container
   this.width = retinaWidth;
   this.height = $(".fancybox-image").innerHeight();
  }
 }); // fancybox
}); // ready

このコードを複数の画像に使用している場合は、class代わりにa を使用してください

<a class="fb_image" href...

と

$(".fb_image").fancybox()
于 2012-10-13T20:26:10.887 に答える