ウインドウは、画像がデスクトップの解像度を超える場合の動作は、ブラウザによって違うので、確実に表示できる大きさの画像を指定するのがいいです。いずれにしても、一旦画像をロードしてサイズを取得するので、無駄に大きいものは良くありません。 ウインドウは、計算でデスクトップ中央に表示されます。そのあたりの位置はプラグイン内で変更できます。また、要素に data- で属性として目的の画像をセットするような仕様にするのは簡単ですが、IE の古いブラウザの場合は、コードで対応する必要があります。しかし、現在ではその対応はあまり意味が無いので具体的な記述はしていません。( この記事の最後に、IE 全てに対応し、セレクタで一括指定できるようにしたコードを掲載しました ) IE の場合は、仕様の為か、周りに余白ができます。もうちょっと作りこめば、それもどうにかできますが、画像を表示したいだけなのでこれで十分だと思います。


画像は、Picasa の画像を使用しているので URL が長くなっています。Picasa の画像は、サーバー側でサムネイルを作成できるので、このような場合に便利ですが、長い URL を避けたい場合、Google の URL 短縮を 画像の URL に対して行うといいです。 関連する記事 Picasa のサムネイルの使い方 イメージユニット作成サービス / window.open と Lightbox2 と Shadowbox
<script> // jQuery ロード部分 if ( !window.jQuery ) { if ( typeof window[window.location.hostname+'.loadjQuery'] === 'undefined' ) { if ( window.addEventListener ) { window[window.location.hostname+'.loadjQuery'] = '//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js'; } else { window[window.location.hostname+'.loadjQuery'] = '//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js'; } } document.write("<"+"script src=\"" + window[window.location.hostname+'.loadjQuery'] + "\"></"+"script>"); } </script> <script> // プラグインインストール部分 $.fn.extend({ setOpenImage: function(url){ var jq = this; var obj = new Image(); $( obj ).load(function(){ var __h = this.naturalHeight || this.height; var __w = this.naturalWidth || this.width; jq.css("cursor", "pointer").click(function(){ window.open( url, "", "width="+__w+",height="+__h+",resizable=1,left="+(screen.width-__w)/2+",top="+(screen.height-(__h+100))/2) }); }); $( obj ).prop( "src", url ); } }); </script> <script> // ロード後の実装部分 $(function(){ $("#open_target_1").setOpenImage("https://lh4.googleusercontent.com/-1hrl6J4BkAI/UmfOlBCk8VI/AAAAAAAAQ08/2QbL_BEtAjA/s900/UrbanFuture3_1.jpg"); $("#open_target_2").setOpenImage("https://lh4.googleusercontent.com/-ivV-h9giVL0/Ul7TtLhF37I/AAAAAAAAQvk/AQJamcu3-mc/s640/ub3_lights.jpg"); }); </script> <img id="open_target_1" src="https://lh4.googleusercontent.com/-1hrl6J4BkAI/UmfOlBCk8VI/AAAAAAAAQ08/2QbL_BEtAjA/s400/UrbanFuture3_1.jpg"> <img id="open_target_2" src="https://lh4.googleusercontent.com/-ivV-h9giVL0/Ul7TtLhF37I/AAAAAAAAQvk/AQJamcu3-mc/s200/ub3_lights.jpg">
カスタム属性とクラスで一括指定 IE に対する対応は、かなり特殊なので省いてもいいのですが、IE9 と IE10 の時代で outerHTML から属性を取得する処理が必要で、この処理はひょっとすると、他の実装にも役立つかもしれません。 それより何より、HTML の要素に記述する事によって、each 処理で、セレクタによる全ての要素に一括対応ができるようになります。これが一番実質的に意味があるので作成してみました。( 最初のコードでもセレクタによる一括指定はできますが、一つの指定で指定できる画像は一つです ) さらに読みやすくする為に、Google の URL短縮 を実際に使用しています。
<script> // jQuery ロード部分 if ( !window.jQuery ) { if ( typeof window[window.location.hostname+'.loadjQuery'] === 'undefined' ) { if ( window.addEventListener ) { window[window.location.hostname+'.loadjQuery'] = '//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js'; } else { window[window.location.hostname+'.loadjQuery'] = '//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js'; } } document.write("<"+"script src=\"" + window[window.location.hostname+'.loadjQuery'] + "\"></"+"script>"); } </script> <script> // プラグインインストール部分 $.fn.extend({ setOpenImageAll: function(url){ this.each(function(idx,elm){ var jq = $(elm); var img_url = url; if ( typeof jq[0].dataset !== 'undefined' ) { img_url = jq[0].dataset.image; } if ( typeof jq[0]["data-image"] !== 'undefined' ) { img_url = jq[0]["data-image"]; } if ( typeof img_url === 'undefined' ) { var wk = jq[0].outerHTML; var wk2 = wk.match(/data-image=\"([^"]+)\"/); img_url = wk2[1]; } var obj = new Image(); $( obj ).load(function(){ var __h = this.naturalHeight || this.height; var __w = this.naturalWidth || this.width; jq.css("cursor", "pointer").click(function(){ window.open( img_url, "", "width="+__w+",height="+__h+",resizable=1,left="+(screen.width-__w)/2+",top="+(screen.height-(__h+100))/2) }); }); $( obj ).prop( "src", img_url ); }); } }); </script> <script> // ロード後の実装部分 $(function(){ $(".open_image").setOpenImageAll(); }); </script> <img class="open_image" src="http://goo.gl/kbi8oV" data-image="http://goo.gl/7vItxm"> <img class="open_image" src="http://goo.gl/Dl1Lrv" data-image="http://goo.gl/ZYx6VC">
img_url = jq[0]["data-image"]; は、IE8 以前の対応です。昔の IE は、HTML で書いた属性がそのままプロパティとして実装される仕様でした。ですから、obj.data-image というプロパティが実際に作成されています。しかし、参照する場合、プロパティに -( ハイフン ) は使え無いので、jq[0]["data-image"] という文字列での表現で利用します。 さらに、IE9 と IE10 で、この仕様が無くなったのですが、IE11 でやっと、カスタム属性が利用可能になります。そこで、IE9 と IE10 のみ、outerHTML から文字列を取得して、正規表現で書かれている URL を取得しています。 関連する記事 IE11 から利用可能になったカスタムデータ属性(datasetプロパティ)
|
【プラグイン作成(jQuery)の最新記事】
- jQuery の回転アニメーション / $({kakudo: 0}).animate(properties, options )
- HTML 上のデータをローカルに保存する jQuery プラグイン
- jQuery のプラグインで動的なコントロールの処理を作成 : add_button / set_event / set_link
- TD 内のテキストを入力可能にする tableinput.js / jQuery プラグイン
- スマホとPC で別の処理を記述できる jQuery のストリートビュープラグイン
- jQuery のプラグインとしてストリートビューを利用する
- jQuery の簡単なプラグインを $.fn.extend で作成( 0〜9のみ入力可能なフィールド )
- INPUT type="number" の振る舞いをブラウザ間で調整する jQuery プラグイン
- jQuery の回転アニメーションでくるくる回る『実行中アイコン』
- jQuery を使ったCSS 一括エフェクトアニメーション( rotate, skew, borderRadius, boxShadow )
- jQuery : IFRAME 作成プラグインと、アニメーションによる表示切替
- jQuery でかなり実用的かもしれない入力制限( 入力値復帰型 )
- jQuery で、指定文字集合のみ入力可能なプラグイン
- jQuery の fn.extend メソッドと extend メソッド の違いは $(セレクタ) のメソッドとして実行できるかどうか ( extend の仕様について )