画像ポップアップ用スクリプト

※WordPressへ移行時に LightBox 機能の Plugin を導入した為,すべて同じ表示になります。

ココログの場合、画像をポップアップ付きでアップロードすると

（画像をクリックするとポップアップします）

こんな風に枠無しのウインドウで開かれるわけですが、

↓のように、ターゲットの指定をを書き換えて、

onclick="window.open(this.href, '<span style="color: #ff3300;">_blank</span>',～

↓

onclick="window.open(this.href, '<span style="color: #ff3300;">_popup1</span>',～

ウインドウを閉じずにサイズが違う画像を表示させると

（画像をクリックして開いたウインドウを閉じずに隣の画像をクリックすると．．．）
window.open() で開いているので最初に開いた画像のサイズのままになってしまいます。

もともと、本家サイトでココログ風な枠無しで画像をポップアップさせる物が欲しくてフリーのJavaScriptを探していたのですが、自分が欲しい動きをするものが見つからず、それらを参考にしながら作ってみたところ、ココログなどで使っても良さそうなの物に仕上がったので、ちょこっと公開します。

<<< ソースのダウンロードはこちら >>>

ココログの編集機能で自動的に貼り付けた場合との違いは、

1.同じターゲットでも指定されたサイズで自動的にウインドウのサイズをあわせます。

2.好きな幅と色で、ウインドウに枠を付けることが出来ます。

3.画像の下にキャプションを表示できます。

＃キャプション指定時に枠指定が無い場合は、自動的に黒い枠がつきます。

＃指定が無い場合、枠：黒、キャプション：白　になります。

といった所で、実際の動作は、こうなります。

サイズが違う画像で、同じターゲットを指定 (枠無し)

popupView(this.href,'_popup2',450,600)

popupView(this.href,'_popup2',600,450)

（画像をクリックして開いたウインドウを閉じずに隣の画像をクリックするとサイズが調整されます）

枠を表示
(黒枠 10px)/(青枠 20px)

popupView(this.href,'_popup2',450,600,'',10)

popupView(this.href,'_popup2',600,450,'',20,'blue')

（画像をクリックするとポップアップします）

キャプションの表示

(枠指定無し/枠指定有り(赤枠 20px,黒文字)

popupView(this.href,'_popup2',450,600,<strong>'ホテイアオイ'</strong>)</span>

popupView(this.href,'_popup2',600,450,<strong>'ゼラニウム',20,'red','black'</strong>)

（画像をクリックするとポップアップします）

文字サイズの計算とか、かなり適当ですが．．．

一応、各種ブラウザで動作するようにしてありますので、

それなりに使える程度の物にはなってるかと思います。

ココログで使用する場合、まず普通にポップアップ付きで画像をアップロードしてから、ソースを修正するのが簡単です。

修正方法は、以下の通り。

該当画像の参照部分で赤の太字部分を削除します。

href=”http://******.cocolog-nifty.com/.shared/image.html?/photos/uncategorized/******.jpg”

修正後はこんな感じ。

href=”http://******.cocolog-nifty.com/photos/uncategorized/******.jpg”>

次に、

onclick=”window.open(this.href, ‘_blank’, ‘width=600,height=450　～ ); return false” ～

を、ポップアップ用の関数へ置き換えます。

onclick=”return popupView(this.href,’_blank‘,600,450)“

あとは、枠やキャプションをお好みに合わせて設定してください。

<<< ソースのダウンロードはこちら >>>