Php5 ve Javascript kullanarak DHTML Slideshow

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>

<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>

</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);
?>

Yazıyı Paylaş:

Bu yaziyi paylasin.

« Madonna’dan dijital dünyaya yeşil ışık! | Ted - Ideas worth spreading »

Yorumlar

Bu Yazı Hakkında

üzerinde şu anda okumakta olduğunuz 'Php5 ve Javascript kullanarak DHTML Slideshow' isimli yazı 27 Mar 2008 tarihinde, saat: 12:37 'de admin tarafından gönderilmiş.

Benzer yazıları JavaScript, Php kategorilerinden okuyabilirsiniz. Yazar ile irtibat kurmak için email gönderebilirsiniz. Yazıya yorum yapabilir ya da yapılan yorumları RSS 2.0 ile takibe alabilirsiniz.

Eklenen Son Yazılar

Rastgele Yazılar

Son Yorumlar

Burak: yazdığın yazıyla ilgisiz olacak ama
mocobain: çok teşekkürler.
sandokan: eyvallah kardeşim ya çok makbüle
Bahadir Eryigit: güzel makale, teşekkürler

Bağlantılar