フォトアルバム(Prototype.js必要)
highslide.js風なフォトアルバムを作ってみました。IE7とFF2.0しか動作確認していないですけれど...。あ、highslide.jsは、動かすうことが出来るんだ。う〜ん。そうした機能はいらないや。
書籍
未だ読んでいないけれど、よさそうなのはやっぱりオライリーの本です。
JavaScriptについて深く知りたいと思ったときに役立ちそうな感じがします。
あと、Prototype.jsを使ってみると、Rubyを知りたくなる。
Prototype & script.aculo.us ―JavaScriptライブラリによるAjaxアプリケーション開発
- 作者: Christophe Porteneuve,栗山淳(監訳),吉田遼二
- 出版社/メーカー: オライリージャパン
- 発売日: 2008/07/28
- メディア: 大型本
- 購入: 5人 クリック: 51回
- この商品を含むブログ (35件) を見る
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);});