0

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

サイトを固定幅 960px のサイトに設計しています。人々に画像を表示したいのですが、画面に表示できる場合はより大きな画像も表示したいです。

Facebookがさまざまなサイズの画像をユーザーに配信する方法に少し似ています。

ウィンドウが小さすぎてフルサイズで表示できない場合、Fancyboxは画像を縮小するので、2つの画像でfancyboxを使用するにはどうすればよいか考えていました。

1 つの画像は幅 960 ピクセルで、画面が 960 ピクセル以下のユーザー向けです (fancybox によって縮小されます)。

960pxを超える画面用に1200以上の幅の別の画像があります

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

これは、小さい画面のユーザーが大きな画像をダウンロードする必要がないようにするためです。このバーセットで、1500幅の画像などを出すことができました。

また、floatbox http://floatboxjs.com/demoを見 たことがありますが、fancybox の機能のいくつかは 1 つのことを除けば優れていると判断しました。floatbox には、フルサイズで表示されていない場合に画像を拡大する機能があります。地球の写真のデモを見るか、他の画像の 1 つを小さなウィンドウで開いてください。ファンシーボックスはこれを行うことができますか?ボタンでこれを行うことができることは知っていますが、フロートボックスのように行う方法を知りたいと思っていました。ユーザーに画像を保存させながら。

css でこれを行う他の方法、画像のスワップアウトなどを検討しましたが、ページにコンテンツを取得する方法は機能しません。また、画像を保存したい場合は、何らかの理由で小さい方が保存されます。- http://csswizardry.com/2011/07/responsive-images-right-now/

ありがとう

4

1 に答える 1

0

fancybox v2.x を使用する場合、同じ大きな画像を「スケーリング」して、解像度に関係なくビューポートに収まるようにしてから、buttonsヘルパーを使用して画像を元の (大きな) サイズに拡大できます。

http://fancyapps.com/fancybox/#docsでデモを確認してください。拡張機能 == > ボタン ヘルパー (javascript タブを確認することを忘れないでください)

于 2012-04-15T21:39:25.917 に答える