シンプルなフォトギャラリー/画像表示/SolidStateEveryday - Ajax,javascript,UIサンプルとチュートリアル -

SAMPLE
CODE
DownLoad

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Photo Gallery</title>
<link rel="stylesheet" type="text/css" href="main.css" />
<script type="text/javascript" src="mootools.js"></script>
<script type="text/javascript" src="script.php"></script>
<script type="text/javascript" src="main.js"></script>
</head>

<body>

<div id="container">

<div id="picture_section">
	<div id="inside">

	</div>
</div>

<div id="controls_vert">
	<div id="up" class="deactivated">Scroll Up</div>
    <div id="down">Scroll Down</div>
</div>

<div id="controls_horz">
	<div id="left">Left</div>
    <div id="right">Right</div>
</div>

</div>

<div id="display_picture_container">
    <div id="display_picture">画面をクリックするとギャラリーへ戻ります</div>
    <div id="display_picture_img"></div>
</div>

</body>
</html>

	Create a Spectacular Photo Gallery with MooTools - Nettuts+

mootools.jsを使用したシンプルなフォトギャラリー。
サムネイル表示と拡大表示、コマ送りなど、最低限あると便利な機能がついています。
拡大表示はギャラリーサイズ内の大きさになります。

デフォルトのスクリプトを改造して、指定フォルダ内の画像を自動で読み込む、ファイル番号によるソート変更、を機能として加えてみました。
一度設置してしまえば、フォルダに画像を入れていくだけなので、管理も楽になると思います。

セッティング
main.jsカスタム

１．ダウンロード/セッティング

サイトへ行きスクリプトをダウンロードします。（Sourceをクリック！）
解凍したら、mootools.js , main,js , main.css をアップロード。
down.jpg , up.jpg , left.jpg , right.jpg については、自サイト内の画像を入れてるフォルダにアップしても良いかもしれません。
その場合、main.css 内の画像を指定している箇所を、置いた場所に合わせて調節します。
main.css内の記述も、既存のCSSファイル内に追加記述しても良いと思います。

２．<head>設定

アップしたスクリプト＆CSSを読み込ませます。
CSSファイルを前工程でまとめた場合は省いてください。

パスは置いた場所に合わせて調節してください。

３．HTMLマークアップ

まず大枠の<div>を記述します。

次にサムネイル表示部分を記述。

そして、上下スクロール用ボタンと、左右画像送り用ボタンを記述します。

<div id="container">
   <div id="picture_section">
   <div id="inside">
   </div>
   </div>
   <div id="controls_vert">
   <div id="up" class="deactivated">Scroll Up</div>
   <div id="down">Scroll Down</div>
   </div>
   <div id="controls_horz">
   <div id="left">Left</div>
   <div id="right">Right</div>
   </div>
</div>　

最後に、拡大表示用のスペースを記述して終了です。

<div id="display_picture_container">
<div id="display_picture">画面をクリックするとギャラリーへ戻ります</div>
<div id="display_picture_img"></div>
</div>　

この記述は、<div id="container">～</div>の外に書き込んで下さい。
これで指定された箇所に、サムネイル画像や拡大画像が表示されるようになります。

ギャラリーのサイズと画像サイズはmain.cssで定義されているので、サイトに合わせて調節してください。

■画像サイズ
#picture_section img

■ギャラリーサイズ
#container , #picture_section ,

４．スクロールの間隔

ワンクリックした時のスクロール間隔を調節するには、main.jsファイルの６４行目と７６行目、

$('inside').tween('margin-top', '-'+ (64 * vertical_moves) +'px');　

の値を変更します。デフォルトだと１スクロールで64px移動する設定になっています。

５．画像ファイル

ギャラリーに表示したい画像は、拡大用とサムネイル用で２種類ずつ用意し、それぞれ picturesフォルダ と thumbsフォルダ に 1.jpg , 2.jpg といった連番で入れていきます。
ギャラリーでは、このファイル名の番号順にサムネイル画像が表示されます。

また、デフォルトの状態だと、表示する画像の数を、main.jsに記述しなくてはなりません。
main.jsの一行目の、

var number_of_pictures = 32;　

この値を画像の数に書き換えてください。

自動的に読み込ませたい場合は、カスタマイズが必要ですので、このページの「main.jsカスタム」タブを開いて内容を確認してください。

main.jsをカスタマイズすることで、フォルダ内の画像を自動的に読み込んだり、
サムネイル画像を作らなくてよくなったり、ファイル番号の大小順でソートさせることができます。
独自に改造したので、不具合があった場合は、デフォルトのものに戻してください。

１．main.jsのカスタマイズ

１行目から４８行目までを以下のコードと差し替えてください。

var image_folder = 'pictures';  // 画像を入れるフォルダ名
var thumbs_width = 117; // サムネイル画像の横幅
var image_sort = 'ASC'; //ASC(ファイル番号最後～) or DESC(ファイル番号１～)

function show_pictures () {
if(image_sort == 'DESC'){
var while_pictures = 1;
while(while_pictures <= number_of_pictures) {
   show_imagebild (while_pictures);
   while_pictures++;
}
}else if(image_sort == 'ASC'){
var while_pictures = number_of_pictures;
while(while_pictures >= 1) {
   show_imagebild (while_pictures);
   while_pictures--;
}
}
}
function show_imagebild (while_pictures){
var new_image = new Element('img', {
'src': image_folder + '/' + while_pictures + '.jpg',
'id': 'image_' + while_pictures,
'width': thumbs_width,
'events': {
'click': function (){
$('display_picture_img').innerHTML = "<img src=\"" + this.src + "\" id=\"big_picture\" class=\"" + this.id + "\" />";
$('display_picture_container').fade(1);
$('big_picture').fade(.999999);
$('controls_vert').setStyle('display', 'none');
if(this.id.replace('image_', '')==1) {
$('left').set('class', 'deactivated');
$('right').erase('class');
} else if(this.id.replace('image_', '')==number_of_pictures) {
$('left').erase('class');
$('right').set('class', 'deactivated');
} else {
$('left').set('class', 'activated');
$('right').erase('class');
}
$('controls_horz').setStyle('display', 'block');
if(Browser.Engine.trident4) { $('left').tween('margin-left', '143px'); } else { $('left').tween('margin-left', '330px'); }
}
}
});
new_image.inject($('inside'));
// preload all of the images
var preload_image = new Element('img', {
'src': 'pictures/' + while_pictures + '.jpg',
'class': 'hide'
});
preload_image.inject($('container'));
}

コード冒頭のコメントが書いてある箇所をサイトに合わせて変更して下さい。

２．script.phpの作成

phpを使用して画像の数を調べます。

<?php
$dir = 'pictures';
header("Content-type: application/x-javascript");
$result = array();
$command = "find " . $dir . " -name '*.jpg' | wc -l";
exec($command, $result);
echo "document.write('<script type=\"text/javascript\">var number_of_pictures = " . $result[0] . ";</script>')";
?>

上記のコードを、script.php と名づけて保存したら、サーバーへアップして下さい。
そして、<head>に以下の形で読み込ませます。

必ず、main.js より先に記述してください。

これで、もっと使いやすくなるかと思います。