リンク先の画像をポップアップ表示するjQueryプラグインとブックマークレット

以前作成した リンク先の画像をポップアップ表示するブックマークレット を jQuery プラグインとして書き直し、さらに機能を追加したものを公開します。 また、このプラグインを実行するブックマークレットも作成したので合わせて公開します。

機能

• 画像へのリンクにマウスカーソルを乗せたとき、リンク先の画像をポップアップ表示します。
• 画像の上下が画面からはみ出さないよう、位置を調整して表示します。
• ポップアップされた画像はドラッグして好きな位置へ移動できます。
• ポップアップされた画像の上でマウスホイールを操作することで、画像を拡大・縮小できます。
• ポップアップされた画像をダブルクリックすることでオリジナルのサイズにリサイズ出来ます。
• z-index を調整し、最前面に画像をポップアップ表示します。
• 以下の script タグをページ内にあらかじめ書いておくことでも実行できます。 <script type="text/javascript" charset="UTF-8" src="https://b.tipszone.jp/imagePopup-2.js"></script>

以下のブラウザで動くことを確認済みです。
: Internet Explorer (9.0)
: Chrome (20.0)
: Firefox (12.0)
: Safari (5.1)
: Opera (12.00)

ブックマークレット

★ブックマークレット用リンク

以下のリンクをクリックするとリンク先画像ポップアップ機能が有効になります。
お気に入りなどに登録してご利用ください。

• imagePopup v2

画像へのリンクのサンプル

にわとり 新宿駅 ペリカン ソーセージ 車 アザラシ 猫 GIFアニメ1 GIFアニメ2 GIFアニメ3

ソースコード

imagePopup-2.js

jQuery プラグイン

使い方

次のように jQuery UI と jquery.mousewheel プラグインをロード後に、このプラグインを実行してください。

:javascript:
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/jquery-ui.min.js'></script>
<script src='https://b.tipszone.jp/jquery.mousewheel.min.js'></script>
<script src='https://b.tipszone.jp/jquery.imagePopup.js'></script>
<script>
$(function(){
    $('body').imagePopup();
});
</script>

ソースコード

jquery.imagePopup.js

このコードは改変や配布含め自由に使っていただいてかまいません。
不具合などありましたら、コメント欄からご連絡ください。

参考にした書籍

[amazon asin="4798124281" /]