index.php
<?php
mysql_connect('*mysql_server*','*account*','*password*');
mysql_select_db('*database_name*');
//取出最小與最大的 pid 值 (Picture ID, 亂數取圖用)
$sql = 'select min(pid),max(pid) from cpg133_pictures;';
$rs = mysql_query($sql);
list($min,$max) = mysql_fetch_row($rs);
$cnt = 1; //已取出的圖片計數
$max_thumbs = 21; //縮圖總數量
$straid = ""; //Album ID 字串集, 轉成陣列供相簿超連結用
$strpid = ""; //Picture ID 字串集, 轉成陣列供 show.php、thumb.php 取圖用
$strtitle = ""; //相簿名稱字串集, 轉成陣列供顯示用
//隨機取出 $max_thumbs 張圖片
while ($cnt <= $max_thumbs) {
$pid = mt_rand($min,$max);
$sql = "select p.filepath,p.filename,a.title,a.aid from cpg133_pictures p inner join cpg133_albums a on p.aid = a.aid where p.pid=$pid;";
$rs = mysql_query($sql);
list($filepath,$filename,$title,$aid) = mysql_fetch_row($rs);
$file= "/var/www/html/gallery/albums/$filepath" . $filename;
//如果取出的資料是 .jpg 圖檔 [且] 檔案存在 [且] 此次還沒有被挑選過, 則選用此圖片
if (strpos(strtolower($file),'.jpg') && file_exists($file) && strpos($strpid,strval($pid)."\t") === false) {
$straid .= strval($aid) . "\t";
$strpid .= strval($pid) . "\t";
$strtitle .= $title . "\t";
$cnt++;
}
}
//字串轉陣列, 分隔符號為 TAB 字元 (\t)
$aryaid = split("\t",$straid);
$arypid = split("\t",$strpid);
$arytitle = split("\t",$strtitle);
?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Jamyy's Gallery Remix</title>
<style>
/* 標題 */
.title { font-family:"Bitstream Vera Sans","Arial"; font-size:18pt; color:#C0C0C0; }
/* 縮圖方框 */
.thumb_box { border:1px dashed #333333; text-align:center; width:86px; height:65px; }
/* 相簿名稱 */
#album_title { margin-left:5px; position:relative; top:-8px; font-family:"Bitstream Vera Sans","微軟正黑體"; font-size:11pt; color:#808080; }
/* 預載圖片 */
#source { display:none; }
/*「重新整理」按鈕 */
#reloadbtn { cursor:pointer; }
</style>
<script language="javascript">
var intValue = 0; //for clearTimeout
function setOpacity(obj, opacity) {
//Ref: http://clagnut.com/sandbox/imagefades/
opacity = (opacity == 100)?99.999:opacity;
// IE/Win
obj.style.filter = "alpha(opacity:"+opacity+")";
// Safari<1.2, Konqueror
obj.style.KHTMLOpacity = opacity/100;
// Older Mozilla and Firefox
obj.style.MozOpacity = opacity/100;
// Safari 1.2, newer Firefox and Mozilla, CSS3
obj.style.opacity = opacity/100;
}
function fadeIn(objId,opacity) {
if (document.getElementById) {
obj = document.getElementById(objId);
if (opacity <= 100) {
setOpacity(obj, opacity);
//以下兩個設定決定圖片漸顯特效的細膩程度
opacity += 3; //每次累加多少, 直到 100 (完全不透明)
intValue = window.setTimeout("fadeIn('"+objId+"',"+opacity+")", 5); //變化速度,數字越小間隔時間越短
}
}
}
function fn_action(strImgName,strAlbumTitle) {
var obj = document.getElementById('thephoto');
var strTargetImage = 'show.php?pid=' + strImgName;
if (String(obj.src).indexOf(strTargetImage) == -1) {
window.clearTimeout(intValue); //停止仍在進行中的漸顯特效**
setOpacity(obj, 0); //設定大圖的透明度; 數字=圖片一開始的透明度(0=完全透明;100=完全不透明)**
obj.src = strTargetImage; //載入大圖
document.getElementById('album_title').innerHTML = strAlbumTitle; //顯示相簿名稱
fadeIn('thephoto',0); //啟動漸顯特效; 數字=特效一開始的透明度**
//*若要停用漸顯特效, 用雙斜線註解上面三行標有 "**" 的程式碼
}
}
function fn_onload() {
for (var i=1; i<document.getElementsByTagName("img").length; i++) {
//設定所有縮圖 (含最後那個 reload 圖片) 透明度為 65
setOpacity(document.getElementsByTagName("img")[i],65);
}
//將 loading 動畫圖片設為不可見、顯示主畫面 (圖片方框與 reload 圖片)
document.getElementById('loading').style.display = 'none';
document.getElementById('container').style.display = '';
document.getElementById('reloadbtn').style.display = '';
}
</script>
</head>
<!--onload 呼叫 fn_action 顯示第一張圖片-->
<body bgcolor="#000000" text="#ffffff" onload="fn_onload();fn_action('<?php echo $arypid[0]; ?>','<?php echo $arytitle[0]; ?>');">
<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0"><tr><td align="center" valign="middle">
<!--標題--><p class="title">Jamyy's Gallery Remix</p>
<!--"Loading" 動畫圖--><img src="loading.gif" width="398" height="300" id="loading">
<table border="0" cellspacing="0" cellpadding="0" id="container" style="display:none">
<tr>
<td valign="top"><table width="642" height="482" border="0" cellpadding="0" cellspacing="0" style="border:1px solid #808080"><tr><td align="center" valign="middle"><!--大圖--><img id="thephoto" src="null.png"></td></tr></table></td>
<!--下面這個 <table> 就是用來盛裝縮圖的表格；縮圖方框大小與樣式由 class="thumb_box" 設定-->
<td valign="top"><table border="0" cellspacing="0" cellpadding="0">
<?php
//每列顯示三張縮圖
for ($i=0; $i<$max_thumbs; $i+=3) {
echo "<tr>";
for ($j=$i; $j<$i+3; $j++) {
//把 pid 帶入 thumb.php 即時製作縮圖
//滑鼠點選縮圖即開新視窗連入該縮圖所屬相簿
//滑鼠移到縮圖上, 即呼叫 fn_action() 以漸顯特效顯示大圖
//滑鼠移到縮圖上, 該縮圖不透明度=100 (完全不透明); 滑鼠移出後, 該縮圖不透明度=65
//第二個 <img> 以 show.php 載入大圖, 此預載行為 (preload) 目的是為了能立即顯示漸顯特效的大圖
echo "<td class=\"thumb_box\"><img src=\"thumb.php?pid=$arypid[$j]\" onclick=\"window.open('/gallery/thumbnails.php?album=$aryaid[$j]')\" onmouseover=\"setOpacity(this,100);fn_action('$arypid[$j]','$arytitle[$j]')\" onmouseout=\"setOpacity(this,65);\"><img src=\"show.php?pid=$arypid[$j]\" id=\"source\"></td>";
}
echo "</tr>";
}
?>
</table><p id="album_title"><!--顯示相簿名稱--></p></td>
</tr>
</table>
<p><!--Refresh 按鈕--><img src="refresh.png" width="36" height="36" id="reloadbtn" onclick="window.location.reload()" onmouseover="this.src='refresh.gif'" onmouseout="this.src='refresh.png'" style="display:none"></p>
</td></tr></table>
</body>
</html>
show.php
<?php
mysql_connect('*mysql_server*','*account*','*password*');
mysql_select_db('*database_name*');
//取出最小與最大的 pid 值 (Picture ID, 亂數取圖用)
//保留這個功能讓程式可不加參數直接執行而隨機秀出圖片
$sql = 'select min(pid),max(pid) from cpg133_pictures;';
$rs = mysql_query($sql);
list($min,$max) = mysql_fetch_row($rs);
while (true) {
if ($_GET['pid']) {
//取出指定的圖片
$pid = $_GET['pid'];
} else {
//隨機取出圖片
$pid = mt_rand($min,$max);
}
$sql = "select p.filepath,p.filename from cpg133_pictures p inner join cpg133_albums a on p.aid = a.aid where p.pid=$pid;";
$rs = mysql_query($sql);
list($filepath,$filename) = mysql_fetch_row($rs);
$file= "/var/www/html/gallery/albums/$filepath" . $filename;
//如果取出的資料是 .jpg 圖檔 [且] 檔案存在就跳出迴圈
if (strpos(strtolower($file),'.jpg') && file_exists($file)) {
break;
}
}
//令程式輸出內容為 jpeg 圖形
header("Content-type: image/jpeg");
list($width,$height) = getimagesize($file);
$max_width = 640;
$max_height = 480;
//讓圖片尺寸不超過 max_* 所指定的像素
if ($width > $max_width || $height > $max_height) {
//如果圖片尺寸超過限制, 則以 imagecopyresampled() 縮小圖片
if ($width > $height) {
$new_width = $max_width;
$new_height = $height / ($width / $max_width);
if ($new_height > $max_height) {
$new_width = $new_width / ($new_height / $max_height);
$new_height = $max_height;
}
} else {
$new_width = $width / ($height / $max_height);
$new_height = $max_height;
}
$thumb = imagecreatetruecolor($new_width,$new_height);
$source = imagecreatefromjpeg($file);
imagecopyresampled($thumb, $source, 0, 0, 0, 0, $new_width, $new_height, $width, $height);
} else {
//如果圖片尺寸不超過限制範圍, 則直接以 imagecreatefromjpeg() 載入圖檔
$thumb = imagecreatefromjpeg($file);
}
//輸出圖片
imagejpeg($thumb);
imagedestroy($thumb);
?>
thumb.php
<?php
mysql_connect('*mysql_server*','*account*','*password*');
mysql_select_db('*database_name*');
//取出最小與最大的 pid 值 (Picture ID, 亂數取圖用)
//保留這個功能讓程式可不加參數直接執行而隨機秀出圖片
$sql = 'select min(pid),max(pid) from cpg133_pictures;';
$rs = mysql_query($sql);
list($min,$max) = mysql_fetch_row($rs);
while (true) {
if ($_GET['pid']) {
//取出指定的圖片
$pid = $_GET['pid'];
} else {
//隨機取出圖片
$pid = mt_rand($min,$max);
}
$sql = "select p.filepath,p.filename from cpg133_pictures p inner join cpg133_albums a on p.aid = a.aid where p.pid=$pid;";
$rs = mysql_query($sql);
list($filepath,$filename) = mysql_fetch_row($rs);
$file= "/var/www/html/gallery/albums/$filepath" . "thumb_" . $filename;
//如果取出的資料是 .jpg 圖檔 [且] 檔案存在就跳出迴圈
if (strpos(strtolower($file),'.jpg') && file_exists($file)) {
break;
}
}
//令程式輸出內容為 jpeg 圖形
header("Content-type: image/jpeg");
list($width,$height) = getimagesize($file);
$max_width = 85;
$max_height = 64;
//讓圖片尺寸不超過 max_* 所指定的像素
if ($width > $max_width || $height > $max_height) {
//如果圖片尺寸超過限制, 則以 imagecopyresampled() 縮小圖片
if ($width > $height) {
$new_width = $max_width;
$new_height = $height / ($width / $max_width);
if ($new_height > $max_height) {
$new_width = $new_width / ($new_height / $max_height);
$new_height = $max_height;
}
} else {
$new_width = $width / ($height / $max_height);
$new_height = $max_height;
}
$source = imagecreatefromjpeg($file);
$thumb = imagecreatetruecolor($new_width,$new_height);
imagecopyresampled($thumb, $source, 0, 0, 0, 0, $new_width, $new_height, $width, $height);
} else {
//如果圖片尺寸不超過限制範圍, 則直接以 imagecreatefromjpeg() 載入圖檔
$thumb = imagecreatefromjpeg($file);
}
//輸出圖片
imagejpeg($thumb);
imagedestroy($thumb);
?>