JavaScriptﾗｲﾌﾞﾗﾘjQueryとPHPを使って素人でも簡単に更新が出来るﾌｫﾄｷﾞｬﾗﾘｰを作成してみました｡

ImageSliderってのは私が勝手につけた名前ですw
まずはﾃﾞﾓから｡
→ImageSlider

ｻﾝﾌﾟﾙの写真は写真素材 足成【ﾌﾘｰﾌｫﾄ､無料写真素材ｻｲﾄ】から拝借しました｡

ImageSliderの特徴

1. 横ｽｸﾛｰﾙで画像のｻﾑﾈｲﾙを流す
2. ﾏｳｽｵｰﾊﾞｰで停止
3. 画像を指定のﾌｫﾙﾀﾞにUPするだけで反映
4. 縦横比を崩さずに画像ｻｲｽﾞを変更してｻﾑﾈｲﾙ作成
5. ｻﾑﾈｲﾙをｸﾘｯｸすると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>

ﾊﾟｽ･ﾌｧｲﾙ名は環境に合わせて適宜変更してください｡

[ﾍﾟｰｼﾞ移動: 1 2]