ファンシーボックスで画面サイズに応じて異なるサイズの画像が2つある

Question

fancyboxをライトボックスとして使用してウェブサイトに画像を表示しようとしています。

サイトを固定幅960ピクセルのサイトに設計しています。私は人々に画像を見せたいだけでなく、画面に表示できる場合は大きな画像を持っていたい。

どのようにfacebookが異なるサイズの画像をユーザーに配信するかのようなビット。

ファンシーボックスは、フルサイズで表示するためにウィンドウが小さくなると画像を縮小しますので、2つの画像でどのようにfancyboxを使用できるか考えていました。

つの画像は、960ピクセル幅の広いこと、および（fancyboxによって縮小）画面960ピクセル幅および小さい を持つユーザーのためになる

及びIは960ピクセル幅

上画面の広い1200+厥別の画像を持っているだろう

画面に1100ピクセルが表示される場合、大きな画像が縮小されます。

これは、画面のサイズが小さくても大きな画像をダウンロードする必要がないためです。 このバーセットで、私はなど

を1500広い画像を出すことができ、また、私はfloatbox http://floatboxjs.com/demo を見ていたが、fancyboxの機能のいくつかは、一つのことから離れて優れている、floatboxが機能を持っていることを決定しました画像がフルサイズで表示されていない場合はズームインします。地球の絵デモを見るか、小さなウィンドウで他のイメージを開きます。 fancyboxはこれを行うことができますか？私はあなたがボタンでこれを行うことができることを知っていますが、floatboxのようにそれを行う方法が不思議でした。ユーザーに画像を保存させることができます。

私はCSSを使ってこれを行う他の方法を見てきましたが、イメージのスワップなどがありましたが、ページにコンテンツが表示されていますが、これは動作しません。また、イメージを保存する場合は、何らかの理由で小さいイメージを保存します。 - あなたはfancyboxのバージョン2.xを使用する場合はhttp://csswizardry.com/2011/07/responsive-images-right-now/

おかげ

Answer 1

は、あなたが持っているものは何でも解決のためのビューポートに適合し、その後に画像を拡大するbuttonsヘルパーを使用するために、「スケール」と同じ大きな画像を持つことができます元の（大きな）サイズ。

この理由は、その小さな画面のユーザーは、大きな画像をダウンロードする必要はありませんある拡張機能==>ボタンヘルパー（ジャバスクリプトタブをチェックすることを忘れないでください）