Admin Admin
Posts : 389 Points : 779 Reputation : 65 Join date : 15.09.2009
Character sheet game:
| Заглавие: DHTML и PHP слайдшоу Чет Фев 04, 2010 4:05 am | |
| Това показва как да използвате комбинацията от PHP5 ,библиотеката за изображения на PHP и малко DHTML с помоща на Javascript,за да създадете слайдшоу от любимите си снимки във вашия браузър. Запишете файла като index.php това е скрипт които управлява визуализирането на изображението. - Код:
-
<?php $dh=new DirectoryIterator("pics"); $files=array(); foreach ($dh as $files) { if (preg_match("/[.]jpg$/",$file )) $files[]="file"; } ?> <html> <head> <title>SlidShow</title> <style> body {background:black;} #thumbnail {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"; curimg=ind; } function nextimage () { curimage++; if ( curimg>=image_list.heigth) curimg=0; switching (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:switching ( <?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>
Сега създайте scale.php които служи за управление на размера на изображенията. - Код:
-
<?php $image=$_GET["image"]; $maxy=$_GET["y"];
$im=@imagecreatefromjpeg ( "pics/".$image ); $curx=imagesx($im); $cury=imagesy($im); $ratio=$maxy /$cur; $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 ("contet-type:image/jpeg"); imagejpg( $oim ); ?> Тук същинската работа се върши от Javascript .Функцията switching () променя изображението ,като настройва src с ID наselimg .Винаги,когато изминат двете секунди,зададени като лимит на таймера ,се извиква функцията nextimage() (този таймер е установен с метода window.setInterval() ). Сраницата scele.php е малка ,удобна за управление страница за мащабиране на изображението ,която можете да използвате и в други приложения. На всеки две секунди картинката ще се променя сама ,преместваики се към следващата,освен това можете да щракнете върху едно от изображенията в горната част на страницата,за да визуализирате точно него. Това за DHTML слайдшоуто надявам се да съм бил полезен. |
|