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

クリック型スクリーンギャラリー/Photo Gallery #01

【DEMO】

【ディレクトリ構成例】

index.html (gallery.htmlギャラリートップページ)
　　　 |
　　　 +-- css / style.css
　　　 |
　　　 +-- js / jquery-1.2.6.js
　　　 |
　　　 +-- images /img1-lg.jpg
　　　　　　　　　　　　 img2-thumb.jpg
　　　　　　　　　　　　 img2-lg.jpg
　　　　　　　　　　　　 img3-thumb.jpg
　　　　　　　　　　　　 img3-lg.jpg
　　　　　　　　　　　　 img4-thumb.jpg
　　　　　　　　　　　　 img4-lg.jpg
　　　　　　　　　　　　 img5-thumb.jpg
　　　　　　　　　　　　 img5-lg.jpg
　　　　　　　　　　　　 img6-thumb.jpg
　　　　　　　　　　　　 img6-lg.jpg

【code】

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

html
css
javascript
image
Sample Code

【html】

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

<h1>ギャラリータイトル</h1>
<p class="thumbs">
<a href="images/img2-lg.jpg" title="タイトル 2">
<img src="images/img2-thumb.jpg" />
</a>
<a href="images/img3-lg.jpg" title="タイトル 3">
<img src="images/img3-thumb.jpg" />
</a>
<a href="images/img4-lg.jpg" title="タイトル 4">
<img src="images/img4-thumb.jpg" />
</a>
<a href="images/img5-lg.jpg" title="タイトル 5">
<img src="images/img5-thumb.jpg" />
</a>
<a href="images/img6-lg.jpg" title="タイトル 6">
<img src="images/img6-thumb.jpg" />
</a>
</p>
<p><img class="largeImage" src="images/img1-lg.jpg" alt="タイトル 1" /></p>

【style.css】

h1{
font-family: Verdana;
font-size: 20px;
font-weight: bold;
color: #000;
margin:0;
}
h1 em{
font-size: 18px;
color: #FF9900;
}
.largeImage{
border: solid 1px #ccc;
width: 550px;
height: 400px;
padding: 5px;
}
.thumbs img{
border: solid 1px #ccc;
width: 100px;
height: 100px;
padding: 4px;
}
.thumbs img:hover{
border-color: #FF9900;
}

【javascript】

jquery-1.2.6.js

下記のコードをHTMLドキュメントの<HEAD>セクションにコピー＆ペーストしてください。

<script type="text/javascript">
$(function() {
$("h1").append('<em></em>')
$(".thumbs a").click(function() {
var largePath = $(this).attr("href");
var largeAlt = $(this).attr("title");
$(".largeImage").attr({ src: largePath, alt: largeAlt });
$("h1 em").html(" (" + largeAlt + ")");
return false;
});
});
</script>

【images】

デモで使用しているサンプル画像です。

【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>フォトギャラリーサンプル #01</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-1.2.6.js"></script>
<script type="text/javascript">
$(function() {
$("h1").append('<em></em>')
$(".thumbs a").click(function() {
var largePath = $(this).attr("href");
var largeAlt = $(this).attr("title");
$(".largeImage").attr({ src: largePath, alt: largeAlt });
$("h1 em").html(" (" + largeAlt + ")");
return false;
});
});
</script>
</head>
<body>
<h1>ギャラリータイトル</h1>
<p class="thumbs">
<a href="images/img2-lg.jpg" title="タイトル 2">
<img src="images/img2-thumb.jpg" />
</a>
<a href="images/img3-lg.jpg" title="タイトル 3">
<img src="images/img3-thumb.jpg" />
</a>
<a href="images/img4-lg.jpg" title="タイトル 4">
<img src="images/img4-thumb.jpg" />
</a>
<a href="images/img5-lg.jpg" title="タイトル 5">
<img src="images/img5-thumb.jpg" />
</a>
<a href="images/img6-lg.jpg" title="タイトル 6">
<img src="images/img6-thumb.jpg" />
</a>
</p>
<p><img class="largeImage" src="images/img1-lg.jpg" alt="タイトル 1" /></p>
</body>
</html>

クリック型スクリーンギャラリー