再設計されたライクス博物館のサイトに出くわしましたが、ここにはいくつかの素晴らしい機能があります. 特に1つは画像のズームです。私のプロジェクトの 1 つでこのようなことをしたいと思っていますが、それを分析することはできません。
彼らがそれをどのように行ったか、またはどのプラグインが使用されたかについてのアイデアはありますか? 洞察をいただければ幸いです。
ありがとうございました!ダニー
再設計されたライクス博物館のサイトに出くわしましたが、ここにはいくつかの素晴らしい機能があります. 特に1つは画像のズームです。私のプロジェクトの 1 つでこのようなことをしたいと思っていますが、それを分析することはできません。
彼らがそれをどのように行ったか、またはどのプラグインが使用されたかについてのアイデアはありますか? 洞察をいただければ幸いです。
ありがとうございました!ダニー
すべてではないにしてもほとんどの JQuery 画像ズーム ライブラリは、追加の大きな画像を背景に読み込み、ホバーするとその一部を表示します。これはうまくスケーリングできません。非常に近くまで拡大したい場合は、マルチメガピクセルの画像をプリロードする必要があります。
アムステルダム国立美術館 (および前述の JSfiddle ) が行うことは、ディープ ズームと呼ばれることがあります。これは、オンライン マップ ナビゲーション (GoogleMaps など) の概念を非地理的画像に適用します。
残念ながら、この方法には追加の作業が必要です。元の画像を事前に異なるズーム レベルのタイルに分割し、これらのファイルをピクセル座標系に関連付ける必要があります。Leaflet.js を使用したスクリプトベースのアプローチについては、この手順を参照してください。