画像のポップアップ（Prev Next付き）新バージョン

★　画像のポップアップ（Prev Next付き）新バージョン

変更来歴

2013.09.24


①　ＰＲＥＶ　ＮＥＸＴ　が表示されるのは、ポップアップされた画像の半分部分に
カーソルを乗せた場合に表示される。

②　ＣＳＳ部分の変更・・・赤字部分（ＰＲＥＶ　ＮＥＸＴの表示位置）



/* --------------------- */
/* 画像のポップアップ　　*/
/* Prev Next バージョン　*/
/* --------------------- */
#lbox_prev:hover{
background-image:url(http://stat001.ameba.jp/user_images/20121016/23/new-blue-777/73/df/g/o0063003212240549867.gif);
background-repeat:no-repeat;
cursor:pointer;
background-position:left 20%;
}
#lbox_next:hover{
background-image:url(http://stat001.ameba.jp/user_images/20121016/23/new-blue-777/e6/be/g/o0063003212240549866.gif);
background-repeat:no-repeat;
cursor:pointer;
background-position:right 20%;
}

◆　以前までのものとの変更点

①　Prev Next の機能を追加しました。
　ポップアップされた画像の右上の少し下、左上の少し下にカーソルを乗せると Prev Nextの
　表示がされ、ページ内の画像を順番に見ることができます。

使用する画像の例は下記。


Prev
http://stat001.ameba.jp/user_images/20121016/23/new-blue-777/73/df/g/o0063003212240549867.gif




Next
http://stat001.ameba.jp/user_images/20121016/23/new-blue-777/e6/be/g/o0063003212240549866.gif



②　アニメーションでの効果の廃止。


③　そのほかの機能は下記の記事と同じです。

http://ameblo.jp/new-blue-777/entry-11131277134.html





◆　実例は私のブログに設置しています。



●　window.onload が２つある場合は、１つにまとめる必要があります。



◆　フリープラグインへ入れる


①　クローズボタンありの場合

<script type='text/javascript' src='http://stat100.ameba.jp/blog/js/apm001.js'></script>

<script type="text/javascript">

var border_px = 20;          // 画像枠の幅(px)

var border_color = "#ffffff";// 画像枠の色(色コード)

var fade_in_time = "2000";   // 表示時間 (ミリ秒)

var fade_out_time = "1000";  // 消去時間 (ミリ秒)

var back_color = "#000000";  // 全体背景色(色コード)

var back_parent = 0.1;       // 全体背景透過度(0～1.0)

var r_click="OK";            // 右クリック可能

var D_center="Y";            // 中央に配置

var D_close="Y";             // クローズボタンを表示します

var D_title="NN";            // タイトルを左下に表示します

var lbox_expand="";          // 当プラグイン拡張用

var close_img='http://stat.ameba.jp/user_images/20101111/01/new-bulue9/87/80/p/o0105004010852331277.png';// Close画像

window.onload = function(){lbox_v4_0();}

</script>

<script src="http://usrcss.ameblo.jp/skin/templates/e7/52/10035423649.css" type="text/javascript"></script>

②　クローズボタンなしの場合

<script type='text/javascript' src='http://stat100.ameba.jp/blog/js/apm001.js'></script>

<script type="text/javascript">

var border_px = 20;          // 画像枠の幅(px)

var border_color = "#ffffff";// 画像枠の色(色コード)

var fade_in_time = "2000";   // 表示時間 (ミリ秒)

var fade_out_time = "1000";  // 消去時間 (ミリ秒)

var back_color = "#000000";  // 全体背景色(色コード)

var back_parent = 0.1;       // 全体背景透過度(0～1.0)

var r_click="OK";            // 右クリック可能

var D_center="Y";            // 中央に配置

var D_close="N";             // クローズボタンを表示します

var D_title="NN";            // タイトルを左下に表示します

var lbox_expand="";          // 当プラグイン拡張用

window.onload = function(){lbox_v4_0();}

</script>

<script src="http://usrcss.ameblo.jp/skin/templates/e7/52/10035423649.css" type="text/javascript"></script>

◆　説明

　・　下記はフリープラグインの最初に１つあればOKです。

<script type='text/javascript' src='http://stat100.ameba.jp/blog/js/apm001.js'></script>






◆　ＣＳＳへ追記する。

①　ＣＳＳへ追記


★　IE（インターネット・エクスプローラ）対応として下記画像（透明の画像）を追加しました。
http://stat001.ameba.jp/user_images/20121017/18/new-blue-777/e0/41/p/o0063003212241588850.png

/* --------------------- */

/* 画像のポップアップ　　*/

/* Prev Next バージョン　*/

/* --------------------- */

#lbox_prev:hover{

background-image:url(http://stat001.ameba.jp/user_images/20121016/23/new-blue-777/73/df/g/o0063003212240549867.gif);

background-repeat:no-repeat;

cursor:pointer;

background-position:left 20%;

}

#lbox_next:hover{

background-image:url(http://stat001.ameba.jp/user_images/20121016/23/new-blue-777/e6/be/g/o0063003212240549866.gif);

background-repeat:no-repeat;

cursor:pointer;

background-position:right 20%;

}

#lbox_prev{

background-image:url(http://stat001.ameba.jp/user_images/20121017/18/new-blue-777/e0/41/p/o0063003212241588850.png);

background-repeat:no-repeat;

cursor:pointer;

}

#lbox_next{

background-image:url(http://stat001.ameba.jp/user_images/20121017/18/new-blue-777/e0/41/p/o0063003212241588850.png);

background-repeat:no-repeat;

cursor:pointer;

}

◆　例