Oldukça kolay ve kullanımı rahat bir scripti bu sefer sizlerle paylaşıyoruz. Amacınız elinizdeki resimleri en etkin bir şekilde web sayfanızda göstertmek ise bu script işinize yarayacaktır. Ayrıca Javascript ve Php ile resim ve dosyalar ile çalışmak için çok temel kodları bu örnekte bulabilirsiniz. Örneği bilgisayarınıza indirmek için şuraya tıklayabilirsiniz. Scripti dilediğiniz gibi ihtiyacınıza göre değiştirebilirsiniz.
Script iki farklı dosyadan oluşuyor. Index.php dosyamızda javascript fonksiyonları, css içeriği, biraz php ve html kısmını görüyoruz. Scale.php ise resimlerin thumbnail ve büyük görünümlerini php ile düzenleyen bir dosya.
İşte index.php;
<?php
$dh = new DirectoryIterator(”pics”);
$files = array();
foreach($dh as $file){
if(preg_match(”/[.]jpg$/”, $file))
$files[] = “$file”;
}
?>
<html>
<head>
<title>Slideshow</title>
<style>
body { background: black; }
#thumbnails { height: 140px; width: 100%; overflow: auto; }
#pic { text-align: center; height: 400px; padding: 20px; }
</style>
<script>
var image_list = [
<?php $first = true; foreach($files as $image){ ?>
<?php echo($first ? "" : ", "); ?>"<?php echo($image); ?>"
<?php $first = false; } ?>
];
var curimage = 0;
function switchimg(ind){
var image = image_list[ind];
var obj = document.getElementById(”selimg”);
obj.src=”scale.php?image=”+image+”&y=400″;
curimage = ind;
}
function nextImage(){
curimage++;
if(curimage >= image_list.length)
curimage = 0;
switchimg(curimage);
}
window.setInterval(”nextImage()”, 2000);
</script>
</head>
<body>
<div id=”thumbnails”>
<table width=”100%”>
<tr>
<?php $ind = 0; foreach($files as $image){ ?>
<td width=”160″ nowrap align=”center”>
<a href=”javascript:switchimg(<?php echo($ind); ?>)”>
<img height=”100″ src=”scale.php?image=<?php echo($image); ?>&y=100″ border=”0″ />
</a>
</td>
<?php $ind++; } ?>
</tr>
</table>
</div>
<div id=”pic”>
<img id=”selimg” height=”400″ src=”scale.php?image=<?php echo($files[0]); ?>&y=400″ />
</div>
</body>
</html>
ve scale.php
<?php
$image = $_GET["image"];
$maxy = $_GET["y"];
$im = @imagecreatefromjpeg(”pics/”.$image);
$curx = imagesx($im);
$cury = imagesy($im);
$ratio = $maxy / $cury;
$newx = $curx * $ratio;
$newy = $cury * $ratio;
$oim = imagecreatetruecolor($newx, $newy);
imageantialias($oim, true);
imagecopyresized($oim, $im, 0, 0, 0, 0, $newx, $newy, $curx, $cury);
header(”content-type: image/jpeg”);
imagejpeg($oim);
?>
Yorum yazın