「 Swinxy Zoom」javascript ライブラリ (jQuery ベース)を使用して、画像に素敵な拡大効果を加えています。
これまでのところ、ズームイベントを関連するタグにバインドすることで、期待される機能を実現しています。以下のコードを参照してください。
$(this).swinxyzoom({mode:'dock', zoom: 14 });
デフォルトでは、このライブラリはホバー時にズームをトリガーします。ただし、代わりにクリックでこれをトリガーしたいのですが、これを行うことができます (以下のコードを参照)。ただし、フォーカスが画像から外れると、swinxyzoom プラグインのバインドを解除する方法が見つかりません。
$('a.swinxyzoom').click(function(e) {
e.preventDefault();
$(this).swinxyzoom({mode:'dock', zoom: 14 });
/* here some code that unbinds the zoom on "mouse out" of image */
});
私が提案したソリューションは実際には回避策にすぎないため、組み込み機能が既に実装されている可能性があると思います。Swinxy Zoom ドキュメントを再確認しましたが、要件に一致するものが見つかりませんでした。