jQuery：jQZoom-拡大鏡。

jQZoomは、 Marco Renziによって書かれた小さなjQueryプラグインです。
jQZoomは、大きな画像に対応するために限られたスペースで使用するのに便利な拡大鏡です。
虫眼鏡をミニチュアに移動することで、ユーザーに画像の詳細を表示する機会を簡単に与えることができます。

デモ
必要なファイルをHEADセクションに含めます。そのうちの2つはjQueryライブラリ自体（ちなみに、バージョン1.2.3はそれほど前ではありませんでした）とjquery.jqzoom.jsファイルです。




プラグインをダウンロードする

スタイリングについては-ここで作成できます。 プラグインはクラス名を使用するため、変更しないことをお勧めします。 CSSコードは提供しませんが、サンプルファイルで確認できます。また、複雑でもありません。

ニュアンスがあるため、ここに小さな画像を表示するHTMLコードの断片を示します。



画像はjqzoomクラス名で div要素に挿入されます。 原則として、このクラスをimgタグに単純に割り当てることができます... src属性を使用すると、すべてが明確になります（小さな画像ファイルへの相対パス）。 いくつかのjqimg属性に注意してください 。 大きな画像ファイルへの相対パスがその値として使用されます。

このようなコードは確かに検証テストに合格しないため、このような属性は存在しないため、あまりエレガントなソリューションではありません。

さて、そして最も興味深い-これが機能するために他に何を追加する必要がありますか？ デフォルト設定の最も単純なケースでは、これのみ：


ただし、表示を制御できる追加オプションがあります。 このオプションを見てください：


いつものように、すべてが関数$（ドキュメント）.ready（関数（）{}）によって「ラップ」されます。 、DOMの準備ができたことを追跡します。 次に、クラス名がjqzoomのすべての要素を選択し、追加のパラメーターを渡すjqueryzoomプラグインを呼び出します。

xzoom-大きな画像の一部が表示されるdiv要素の幅。 デフォルトは200pxです。

yzoom-大きな画像の一部が表示されるdiv要素の高さ。 デフォルトは200pxです。

offset-メイン画像（サムネイル）の大きな画像の一部が表示されるdiv要素のインデント。 デフォルトは10pxです。

position-大きな画像の一部が表示されるdiv要素の位置。 デフォルトは正しいです。

確かに、プラグインの作成者は受け入れ可能な値のリストを提供していませんでしたが、右に加えておそらく左もあると推測できます。

preload-プリロードされた大きな画像の数。 デフォルトは1です。
Isst。