«デジカメで花火撮影、露出補正を使いこなす編｜ メイン ｜2008年夏、上半期の花火大会で撮影した画像のまとめ»
2008年07月30日
jQuery+PHPでフォトギャラリー『ImageSlider』を作ってみた
JavaScriptライブラリjQueryとPHPを使って素人でも簡単に更新が出来るフォトギャラリーを作成してみました。
作成したといっても色々プラグインを合わせてみたりコードを参考にさせてもらったりですが。ImageSliderってのは私が勝手につけた名前ですw
まずはデモから。
→ImageSlider
無駄にshadowbox.jsでデモはこちら→ImageSlider
shadowboxに関してはprototype.jsベースでshadowbox.jsを使ってみるをご覧ください。
サンプルの写真は写真素材 足成【フリーフォト、無料写真素材サイト】から拝借しました。
詳細は以下よりどうぞ。
ImageSliderの特徴
- 横スクロールで画像のサムネイルを流す
- マウスオーバーで停止
- 画像を指定のフォルダにUPするだけで反映
- 縦横比を崩さずに画像サイズを変更してサムネイル作成
- サムネイルをクリックするとLightBoxで表示
という点が特徴かなぁと思います。
フォルダ内のファイルを取得しimgタグを生成
まずはPHPを記述してフォルダ内のファイルを取得してimgタグを生成します。
フォルダのファイル名の取得はディレクトリのファイルを一覧表示 - PHP/データベースを参照させて頂きました。
それから画像のリサイズはcodeなにがし::PHPでJPEG画像のリサイズを参照させて頂きました。
<?php
$lst = "./photos"; // 表示するリストの名前(パス)
$drc=dir($lst);
while($fl=$drc->read()) {
$lfl = $lst."/".$fl;
$din = pathinfo($lfl);
// 自分自身と上位階層のディレクトリを除外
if($fl!=".." && $fl!=".") {
//画像のリサイズの為にサイズを取得する
list($width , $height) = getimagesize($lfl);
//縦幅100pxに固定
$dstHeight = 100;
//縦幅100pxに合わせて横幅のリサイズ
$dstWidth = $width / ($height/100);
print("<li>");
//imgタグの出力
print(
"<a href=".$lst."/".$fl.">"
."<img src=".$lst."/".$fl."
width=\"$dstWidth\" height=\"$dstHeight\" />"
."</a>"
);
print("</li>");
}
}
$drc->close();
?>
処理の内容はコメントアウトを参考にしてください。
※PHPに関しては専門家ではないのでご指摘歓迎です＞＜
jQuery liScrollで横スクロールを実装する
横スクロールにはjQuery liScrollを使用しています。
上記サイトからJSファイルをDLしてきて以下の様に読み込みます。
Scriptの記述
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="li-scroller.js"></script>
<script type="text/javascript">
$(function(){
$("ul#ticker01").liScroll();
});
</script>
パス・ファイル名は環境に合わせて適宜変更してください。
↑のScriptで指定したID名"ul#ticker01"が↓のHTML部分と連動します。
HTMLの記述
<ul id="ticker01"><!-- Script部分に対応するID名 --> ここにPHPでイメージを出力 </ul>
それからCSSを追加する必要があります。
CSSの記述
ul.newsticker {
position: relative;
}
この指定が無いと横スクロールが動きません。
ul.newstickerはli-scroller.jsの中で付与されます。
li-scroller.jsのここで付与されてるよ↓
var $strip = jQuery(this);
$strip.addClass("newsticker")
これでイメージを出力して横スクロールまで完成です。
LightBoxエフェクトを加える
LightBoxエフェクトには折角jQueryを読み込んでいますので、jQuery版のLightBoxを使用したいと思います。
jQueryでLightBoxを実現するjavascript「jQuery lightBox plugin」を参考にさせて頂きました。
以下の様にJavaScriptとCSSを読み込みます。
LightBox様の画像が格納されているimagesディレクトリもUPしています。
#ticker01内のaタグにLightBoxエフェクトを
<script type="text/javascript" src="jquery.lightbox-0.5.js"></script>
<script type="text/javascript">
$(function() {
$('#ticker01 a').lightBox({
overlayBgColor: '#FFF',
overlayOpacity: 0.7,
txtImage: 'Photo',
txtOf: 'of'
}
);
});
</script>
<link rel="stylesheet" type="text/css" href="jquery.lightbox-0.5.css" media="screen" />
ついでに既存のLightBoxでは無かったオーバーレイカラーの変更とかを加えています。
以上でImageSlider（しつこいけど勝手に銘銘）の出来上がりです。
画像をUPするだけで反映されるので結構色々な用途で使えるのでは。
今度はアップローダーとか作ってみたいです。
Posted by ; k. 2008年07月30日 00:47
このエントリーのタグ
このカテゴリーの最新記事
トラックバック
このエントリーのトラックバックURL：
