jquery - ライトボックスにフルサイズの画像にリンクするサムネイルを表示する (2 つの個別の画像ファイルなし)

Question

標準の HTML 形式で多数の画像を表示しています。画像のサイズがわかりません。サイズが小さいものもあれば、かなり大きいものもあります。

<img src="image1.jpg">
<img src="image2.jpg">

やりたいこと..

1. 画像を歪ませずに縮小します (幅が 250px x 250px を超える場合)。
2. ユーザーは画像をクリックして、ライトボックスでフルサイズを表示できる必要があります。

ライトボックスのjQueryプラグインを見たのですが、別途サムネイル画像が必要なようです。それをまだ活用する方法はありますか？

最新の Chrome を使用しているため、このプロジェクトでは HTML5/CSS3/jQuery/etc を使用できます。

Answer 1

いくつかのアドバイス:

プレビューとしてフル イメージを使用すると全体的な読み込みパフォーマンスに影響するため、サムネイル/フル スケール イメージを処理する必要がある場合は常に両方を提供する必要があります [モバイル デバイスについて考える]。

サーバーを制御できる場合は、オンデマンド スケーリング[ PHP の GD ライブラリなど]またはサムネイルのプリエンプティブ キャッシュ[より優れたスケーラブルなオプション] の使用を検討してください。

最後にもう 1 つ: Chromeを使用している場合は、 IE8で立ち往生している人がいると考えてください。テスト環境だけでなく、Web サイトの対象ユーザーについても考えてください。