めも帖

「めも帖」代わりにダラダラと書いていったり、めもしたりしているだけです。

簡単な画像切り替えフォトアルバム

JavaScript
  • リンク要素にrel属性をつけます
  • lightbox風だけれど、低機能だよ
  • prototype.js 1.5必須

HTMLファイル

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta http-equiv="content-script-type" content="text/javascript">
<script type="text/javascript" charset="UTF-8" src="../prototype.js"></script>
<script type="text/javascript" charset="UTF-8" src="./photoAlbum.js"></script>
<title>フォトアルバム</title>
<style type="text/css">
</style>
</head>
<body>
<div id="targetImage"></div>
<ul id="imageAlbum">
	<li><a href="./images/sample_1.jpg" rel="images" title="しなもん1"><img src="./images/sample_1_thum.jpg" border="0" alt="" /></a></li>
	<li><a href="./images/sample_2.jpg" rel="images" title="しなもん2"><img src="./images/sample_2_thum.jpg" border="0" alt="" /></a></li>
	<li><a href="./images/sample_1.jpg" rel="images" title="しなもん3"><img src="./images/sample_1_thum.jpg" border="0" alt="" /></a></li>
	<li><a href="./images/sample_2.jpg" rel="images" title="しなもん4"><img src="./images/sample_1_thum.jpg" border="0" alt="" /></a></li>
</ul>
</body>
</html>

photoAlbum.js

// 初期設定
var imageListTag = document.getElementsByTagName('a')
var imageList    = [];

// 
function photoAlubumInit(){
	for( var i=0; i < imageListTag.length; i++ ){
		if( imageListTag[i].getAttribute('rel') ){
			if( !targetNum ){
				var targetNum = 0;
			}
			var temp = new Array();
			temp['title'] = imageListTag[i].getAttribute('title');
			temp['href']  = imageListTag[i].getAttribute('href');
			imageList.push(temp);
	
			imageListTag[i].id = targetNum;
	
			// event
			Event.observe( imageListTag[i], 'mouseover', function(event){
				this.className = '';
			});
			Event.observe( imageListTag[i], 'mouseout', function(event){
				this.className = '';
			});
			imageListTag[i].onclick = function(e) { changeImage(this.id);return false; };
	
			targetNum++;
		}
	}
};

// 画像切り替え
function changeImage( targetNum ){
	$('targetImage').childElements().each(function(elm){elm.remove()});

	var h1 = document.createElement('h1');
	h1.innerHTML = imageList[targetNum].title;

	var div = document.createElement('div');
	div.innerHTML = '';
	div.className = '';
	div.id        = '';

	var img = document.createElement('img');
	img.src = imageList[targetNum].href;
	img.onclick = function(e) { window.open(this.src, 'images');return false; };

	div.appendChild(h1);
	div.appendChild(img);
	$('targetImage').appendChild(div);
};

Event.observe( window, 'load', function(event){photoAlubumInit();changeImage(0);});
//window.onload = changeImage(0);