Eszköztár
133 Kezdőlap - Webszerkesztés - PHP - Képgaléria
ujdomainek.hu

Képgaléria

dinamikusan

Mintapélda

Képgalériában jelenítsük meg egy adott mappa JPG, PNG és GIF típusú képeit! A készítendő programunk olvassa ki a mappa tartalmát, és az ott talált képeket jelenítse meg kicsinyítve, rákattintással nagyítható módon.



A feladat megoldása során a PHP mappakezelő függvényeit kell felhasználnunk, melyek funkciójukat tekintve (megnyitás, olvasás, bezárás) nagyon hasonlítanak a fájlkezelésre, csak éppen más az elnevezésük: Ezek alkalmazásával a következő program készíthető: 
<!DOCTYPE html>

<style>
	div.kiskep
	{
		width            : 120px    ;
		height           : 120px    ;
		margin           :  16px    ;
		background-color : #DFD     ;
		text-align       : center   ;
		float            : left     ;

		line-height      : 120px    ;
	}

	div.kiskep img
	{
		max-width        : 100px    ;
		max-height       : 100px    ;

		vertical-align   : middle   ;
	}
</style>

<?
    $mappanev = "norvegia" ;

    $mappa = opendir($mappanev) ;
    while( $fajl = readdir($mappa) )
    {
	$t = strtolower(substr( $fajl , -4 )) ;

	if( $t==".jpg" || $t=="jpeg" || $t==".png" || $t==".gif" )
	{
	   print "
	      <div class='kiskep'>
	         <a href='$mappanev/$fajl'><img src='$mappanev/$fajl'></a>
	      </div>
	   " ;
	}
    }
    closedir($mappa) ;
?>
A kódban szereplő $t változó a fájlnév típusát (kiterjesztését) tartalmazza - vagyis a fájlnév utolsó 4 karakterét, kisbetűssé alakítva. Ez alapján szűrhető, hogy a mappának mely állományait szeretnénk ténylegesen kiválogatni és megjeleníteni.

Fenti megvalósításban jelentős szerep jut a CSS-nek is, hiszen a képek kicsinyítését, és a kereten belüli középre igazítást is el kell végeztetni vele. Utóbbi szempontból komolyabb kihívást a függőleges igazítás elkövetése jelenthet, melynek három összetevője van:

Fontos megjegyezni, hogy a képek kliens oldalon történő kicsinyítése a legkevésbé sem szerencsés, hiszen attól, hogy kliens oldalon kicsinyítünk, még a teljes méretű képet fogjuk letölteni a szerverről, ami nem csak a lassúság veszélyét hordozza magában, hanem számottevő adatforgalmat is generálhat.
Megoldást az jelenthet, ha a képeknek a kicsinyített változatát is eltároljuk a szerveren, és az album kisképeihez csak azokat használjuk fel megjelenítéskor. A kicsinyített képek automatikus létrehozásához a Képmásolás című oldalon található mintapélda.

Amennyiben a nagy képek bemutatásakor szeretnénk egy, a böngésző alapértelmezett képmegjelenítő funkciójától picit egyedibb látványt kínálni, akkor ezt is megtehetjük egy saját rövid programmal. Ennek lehet kiinduló állapota az alábbi kepmegjelenito.php: 
<!DOCTYPE html>

<style>
	body
	{
		background-color : #444 ;
	}

	div#nagykep
	{
		width            : 1180px         ;
		height           :  640px         ;
		margin           : auto           ;
		text-align       : center         ;

		line-height      :  640px         ;

	}

	div#nagykep img
	{
		max-width        : 1180px         ;
		max-height       :  640px         ;
		border           : solid 2px #CCC ;
		padding          : 2px            ;

		vertical-align   : middle         ;
	}
</style>

<?
	$kepnev = $_GET['kepnev'] ;
	print "
		<div id='nagykep'>
			<img src='$kepnev'>
		</div>
	" ;
?>
E megvalósítás választása esetén természetesen a képgaléria forráskódjában az egyszerű
<a href='$mappanev/$fajl'>
típusú hivatkozást le kell cserélni az
<a href='kepmegjelenito.php?kepnev=$mappanev/$fajl'>
formációra.
előző oldal random oldal következő oldal
2024-12-02 15:50:31 Admin Köszönöm, ha Ön lesz az első, aki megírja ide véleményét, észrevételét, kérdését ezzel a lappal kapcsolatban.



Új hozzászólás:
E-mail cím:


Erre a címre küldjük ki a hozzászólás jóvá- hagyásához szükséges linket. Az e-mail címet sehol nem tesszük közzé.
Név:


Ez a név fog megjelenni az Ön hozzászólásai mellett.
Mennyi tizenkettő + kettő?
Számjegyekkel írja be!



Ez a robotok beírása elleni védelem miatt szükséges ellenőrzés.

© infojegyzet.hu, 2006. április