クリック型ポップボックス｜フォトギャラリー設置方法 Tips【myisland】

クリック型ポップボックス / Photo Gallery #12

このサンプルは、画像をアニメーション付で拡大表示するライブラリです。
イメージをクリックすると大きくズームし拡大後キャプションなどが表示されます。

【DEMO】

【ディレクトリ構成例】

index.html (gallery.htmlギャラリートップページ)
　　　 |
　　　 +-- css / gallery12.css
　　　 |
　　　 +-- js / popbox.js
　　　 |
　　　 +-- images / spinner40.gif
　　　 | 　　　　　　　　　magminus.gif
　　　 | 　　　　　　　　　magplus.gif
　　　 |
　　　 +-- photos /1_s.jpg
　　　　　　　　　　　　 1_b.jpg
　　　　　　　　　　　　 2_s.jpg
　　　　　　　　　　　　 2_b.jpg
　　　　　　　　　　　　 3_s.jpg
　　　　　　　　　　　　 3_b.jpg
　　　　　　　　　　　　 4_s.jpg
　　　　　　　　　　　　 4_b.jpg
　　　　　　　　　　　　 5_s.jpg
　　　　　　　　　　　　 5_b.jpg
　　　　　　　　　　　　 6_s.jpg
　　　　　　　　　　　　 6_b.jpg
　　　　　　　　　　　　 7_s.jpg
　　　　　　　　　　　　 7_b.jpg
　　　　　　　　　　　　 8_s.jpg
　　　　　　　　　　　　 8_b.jpg
　　　　　　　　　　　　 9_s.jpg
　　　　　　　　　　　　 9_b.jpg

【code】

編集・カスタマイズ等はエディタで開き修正をしてください。

html
css
javascript
images
photo
Sample Code

【html】

HTMLファイルの<body></body>の間に下記のコードを入力します。

・各タイトル名 (写真画像タイトル名)

・各写真画像紹介文

・各1_s.jpg(サムネイル) ・サイズ(px)/ 1_b.jpg(拡大時)写真画像ファイル名

・拡大時のアニメーション速度です。値が小さいと低速に、大きいと高速になります。

<div id="wrap">
<img class="smallimage" src="photos/1_s.jpg" width="150" height="99" alt="タイトル #1" pbsrc="photos/1_b.jpg" pbCaption="画像紹介文" onclick="Pop(this,30, null);" />
<img class="smallimage" src="photos/2_s.jpg" width="150" height="99" alt="タイトル #2" pbsrc="photos/2_b.jpg" pbCaption="画像紹介文" onclick="Pop(this,30, null);" />
<img class="smallimage" src="photos/3_s.jpg" width="150" height="99" alt="タイトル #3" pbsrc="photos/3_b.jpg" pbCaption="画像紹介文" onclick="Pop(this,30, null);" />
<img class="smallimage" src="photos/4_s.jpg" width="150" height="99" alt="タイトル #4" pbsrc="photos/4_b.jpg" pbCaption="画像紹介文" onclick="Pop(this,30, null);" />
<img class="smallimage" src="photos/5_s.jpg" width="150" height="99" alt="タイトル #5" pbsrc="photos/5_b.jpg" pbCaption="画像紹介文" onclick="Pop(this,30, null);" />
<img class="smallimage" src="photos/6_s.jpg" width="150" height="99" alt="タイトル #6" pbsrc="photos/6_b.jpg" pbCaption="画像紹介文" onclick="Pop(this,30, null);" />
<img class="smallimage" src="photos/7_s.jpg" width="150" height="99" alt="タイトル #7" pbsrc="photos/7_b.jpg" pbCaption="画像紹介文" onclick="Pop(this,30, null);" />
<img class="smallimage" src="photos/8_s.jpg" width="150" height="99" alt="タイトル #8" pbsrc="photos/8_b.jpg" pbCaption="画像紹介文" onclick="Pop(this,30, null);" />
<img class="smallimage" src="photos/9_s.jpg" width="150" height="99" alt="タイトル #9" pbsrc="photos/9_b.jpg" pbCaption="画像紹介文" onclick="Pop(this,30, null);" />
</div>

【gallery12.css】

#wrap{
width: 500px;
margin: 20px auto;
}
.smallimage {
background-color : #fff;
border: 1px solid #CCC;
padding: 3px;
margin: 10px 5px 0 0;
}

【javascript】

popbox.js

<script type="text/javascript"><!--
popBoxWaitImage.src = "images/spinner40.gif";
popBoxRevertImage = "images/magminus.gif";
popBoxPopImage = "images/magplus.gif";
// --></script>

【images】

【photo】

▼デモで使用しているサンプル画像です。(500×330px)

【Sample Code】

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
<title>フォトギャラリーサンプル #12</title>
<link href="css/gallery12.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript" src="js/popbox.js"></script>
<script type="text/javascript"><!--
popBoxWaitImage.src = "images/spinner40.gif";
popBoxRevertImage = "images/magminus.gif";
popBoxPopImage = "images/magplus.gif";
// --></script>
</head>
<body>
<div id="wrap">
<img class="smallimage" src="photos/1_s.jpg" width="150" height="99" alt="タイトル #1" pbsrc="photos/1_b.jpg" pbCaption="画像紹介文" onclick="Pop(this,30, null);" />
<img class="smallimage" src="photos/2_s.jpg" width="150" height="99" alt="タイトル #2" pbsrc="photos/2_b.jpg" pbCaption="画像紹介文" onclick="Pop(this,30, null);" />
<img class="smallimage" src="photos/3_s.jpg" width="150" height="99" alt="タイトル #3" pbsrc="photos/3_b.jpg" pbCaption="画像紹介文" onclick="Pop(this,30, null);" />
<img class="smallimage" src="photos/4_s.jpg" width="150" height="99" alt="タイトル #4" pbsrc="photos/4_b.jpg" pbCaption="画像紹介文" onclick="Pop(this,30, null);" />
<img class="smallimage" src="photos/5_s.jpg" width="150" height="99" alt="タイトル #5" pbsrc="photos/5_b.jpg" pbCaption="画像紹介文" onclick="Pop(this,30, null);" />
<img class="smallimage" src="photos/6_s.jpg" width="150" height="99" alt="タイトル #6" pbsrc="photos/6_b.jpg" pbCaption="画像紹介文" onclick="Pop(this,30, null);" />
<img class="smallimage" src="photos/7_s.jpg" width="150" height="99" alt="タイトル #7" pbsrc="photos/7_b.jpg" pbCaption="画像紹介文" onclick="Pop(this,30, null);" />
<img class="smallimage" src="photos/8_s.jpg" width="150" height="99" alt="タイトル #8" pbsrc="photos/8_b.jpg" pbCaption="画像紹介文" onclick="Pop(this,30, null);" />
<img class="smallimage" src="photos/9_s.jpg" width="150" height="99" alt="タイトル #9" pbsrc="photos/9_b.jpg" pbCaption="画像紹介文" onclick="Pop(this,30, null);" />
</div>
</body>
</html>

スライダー＃１２