めも帖

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

フォトアルバム（Prototype.js必要）

JavaScript

highslide.js風なフォトアルバムを作ってみました。IE7とFF2.0しか動作確認していないですけれど...。あ、highslide.jsは、動かすうことが出来るんだ。う〜ん。そうした機能はいらないや。

書籍

未だ読んでいないけれど、よさそうなのはやっぱりオライリーの本です。
JavaScriptについて深く知りたいと思ったときに役立ちそうな感じがします。
あと、Prototype.jsを使ってみると、Rubyを知りたくなる。

Prototype & script.aculo.us ―JavaScriptライブラリによるAjaxアプリケーション開発

Prototype & script.aculo.us ―JavaScriptライブラリによるAjaxアプリケーション開発

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">
body{
}

#imageAlbum li{
	display:inline;
}

#imageAlbum a{
	cursor: url('./images/zoomin.cur'), pointer;
}

#targetImage {
	position : absolute;
	z-index : 1000;
	left : 0%;
	top  : 10%;
}

#targetImage img{
	cursor: url('./images/zoomout.cur'), pointer;
}

#targetImageFrame{
	background-color:#ffffff;
	padding:1em;
	border:1px solid #e7e7e7;
}
</style>
</head>
<body>


<div id="targetImage"></div>
<ul id="imageAlbum">
	<li><a href="./images/sample_2.jpg" rel="images" title="しなもん0"><img src="./images/sample_1_thum.jpg" border="0" alt="" /></a></li>
	<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>

</ul>


</body>
</html>

JavaScript

// 初期設定
var imageListTag = [];
var imageList    = [];

// 
function photoAlubumInit(){
	imageListTag = $('imageAlbum').getElementsByTagName('a');
	//imageList    = $('imageAlbum').getElementsByTagName('img');

	for( var i=0; i < imageListTag.length; i++ ){
		if( imageListTag[i].getAttribute('rel') ){
			var temp = new Array();
			temp['title'] = imageListTag[i].getAttribute('title');
			temp['href']  = imageListTag[i].getAttribute('href');
			imageList[i] = temp;
			imageListTag[i].id = i;
			imageListTag[i].onclick = function(e) { changeImage(this.id); return false; };
		}
	}
};

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

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

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

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

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

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