Fotogalerie v PHP - 1. díl
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu
Reklama

Fotogalerie v PHP - 1. dílFotogalerie v PHP - 1. díl

 

Fotogalerie v PHP - 1. díl

Google       Google       1. 10. 2008       51 023×

Jistě jste se dostali již do situace, kdy potřebujete na svých stránkách umožnit návštěvníkovi prohlédnout si vaše fotky, ale dávat je do jednotlivých stránek ručně je buď nepraktické, nebo příliš náročné. Hodit by se mohla automaticky generovaná fotogalerie.

Reklama
Reklama

V prvním díle vytvoříme stránku, která dokáže zobrazit obsah složky. Protože se chceme ve svém kódu vyznat, budeme používat téměř na vše funkce. První bude pro zobrazení obsahu složky.

Tato funkce vám vypíše vše, co se ve složce nachází. Nejdříve si tedy předveďme ten nejjednodušší kód a pak si ho upravíme, aby dělal přesně to, co potřebujeme.

<?php
function ObsahSlozky($slozka) {
	$obsah = scandir($slozka);
	foreach($obsah as $soubor) {
		print $soubor.'<br>';
	}
	return True;
}
?>

Opravdu jednoduchá funkce, která vám pouze vypíše obsah složky. Funkci můžeme jednoduše zavolat příkazem:

ObsahSlozky('cesta/ke/slozce/s/fotografiemi/');

Druhý řádek s funkcí scandir nám do proměnné vloží pole se všemi soubory a složkami, toto pole pak příkazem foreach procházíme a vypisujeme všechny soubory.

Dalším krokem je rozlišit složky od souborů a soubory s obrázky od jiných souborů. Také je zbytečné vypisovat tečku, dvojitá se bude hodit pro přechod do vyšší složky. Po ošetření bude funkce vypadat takto:

<?php
function ObsahSlozky($slozka) {
	$obsah = scandir($slozka);
	foreach($obsah as $soubor) {
		if($soubor != "."){
			if(is_dir($slozka."/".$soubor)) {
				ZobrazNahled($soubor, $slozka, "slozka");
			} else {
				if(@getimagesize($cesta."/".$soubor)) {
					ZobrazNahled($soubor, $slozka, "obrazek");
				} else {
					ZobrazNahled($soubor, $slozka, "soubor");
				}
			}
		}
	}
	return True;
}
?>

Nejdříve jsme do funkce přidali rozpoznání složky od souboru pomocí funkce is_dir. Samozřejmě by šlo systém obrátit – zjistit, zda je položka v poli soubor pomocí funkce is_file. Další úpravou bylo vložení podmínky se zavoláním funkce getimagesize. Pokud je soubor obrázkem, vrátí nenulovou hodnotu s polem o jeho rozměrech, v opačném případě vrátí nulovou hodnotu.

Dalším naším úkolem je dodat naší funkci formu. Abychom však udrželi v kódu přehlednost, nebudeme vše sumírovat do jedné funkce a vytvoříme další funkci na přehledné vykreslení všech souborů. Zde trochu sáhneme i do CSS. Připravíme si dva obrázky o velikosti 100×75 px (poměr 4:3, stejný jako u většiny fotografií), první pro zobrazení složky, druhý pro soubor, který není obrázkem.

function ZobrazNahled($soubor, $cesta, $typ) {
	echo "<div style='border: 1px solid black; margin: 10px; float: left; text-align: center;'>";
	echo "<div style='width: 100px; height: 75px; padding: 5px;'>";
	
	if($typ == "slozka") {
		echo "<img src='slozka.png' alt='' title=''>";
	} else if($typ == "soubor") {
		echo "<img src='soubor.png' alt='' title=''>";
	} else {
		echo "<img src='".$_SESSION["slozka"]."/".$soubor."' alt='' title='' width=100>";
	}
	
	echo "</div>";
	echo "<div style='width:110px; background: #000; color: #FFF; text-align: center;' title='".$soubor."'>".substr($soubor, 0, 10)."</div>";
	echo "</div>";
}

Funkce, která v podstatě jenom zařídí, aby se vykreslil náhled obrázku, obrázek složky nebo souboru. Tato funkce však nebude fungovat stoprocentně. Pokud bude obrázek širší nežli vyšší, bude vše fungovat správně, v opačném případě ale rozhodí rozvržení stránky. Vytvoříme tedy funkci, která zajistí, aby byla vždy výška menší než 75 px a šířka menší než 100 px, přičemž poměr musí zůstat zachován. Protože se nám ale tato funkce bude ještě hodit, nestanovíme maximální výšku a šířku napevno, ale vždy si je vyžádáme.

function Zmensi($vyska, $sirka, $x, $y) {
	if($vyska > $x) {
		$zmenseno = $x / $vyska;
		$vyska = $x;
		$sirka = $sirka*$zmenseno;
	}

	if($sirka > $y) {
		$zmenseno = $y / $sirka;
		$sirka = $y;
		$vyska = $vyska*$zmenseno;
	}

	$ret = array($vyska, $sirka);
	return $ret;
}

Touto matematickou funkcí úspěšně zjistíme nové rozměry obrázku, které nyní stačí aplikovat do předchozí funkce (kód o kus níže). Není to úplně přesně vytváření náhledu, spíše zmenšeniny původního obrázku. O tom, jak vytvořit plnohodnotné náhledy (se zmenšením velikosti), si povíme v dalším díle. Zobrazení popisku je zkráceno funkcí substr, druhé číslo udává počet zobrazených znaků. Pokud by nebyla nastavena maximální délka, mohl by se design při dlouhém názvu rozhodit. To je první část vašeho domácího úkolu – vytvořit funkci, která by kontrolovala délku názvů a příliš dlouhé názvy by zkracovala co nejchytřeji. Za zkrácený název může přidat třeba tři tečky.

Teď už stačí začlenit použití této funkce do funkce ObsahSlozky().

function ObsahSlozky($slozka) {
	$obsah = scandir($slozka);
	foreach($obsah as $soubor) {
		if($soubor != "."){
			if(is_dir($slozka."/".$soubor)) {
				ZobrazNahled($soubor, $slozka, "slozka");
			} else {
				if(@getimagesize($cesta."/".$soubor)) {
					ZobrazNahled($soubor, $slozka, "obrazek");
				} else {
					ZobrazNahled($soubor, $slozka, "soubor");
				}
			}
		}
	}
	echo "<hr style='display:none; clear: both;'>";
	return True;
}

Tím je náš první skript na zobrazení obsahu složky hotov. V příštím díle přidáme možnost procházení podsložkami.

Ukázka celého okomentovaného kódu pro kontrolu:

<?php
function ObsahSlozky($slozka) {
	#
	# funkce pro vypsani obsahu slozky
	# a nasledne zavolani prilehlych funkci
	#

	// nacteni obsahu slozky do pole
	$obsah = scandir($slozka);
	// prochazeni polem obsah
	foreach($obsah as $soubor) {
		// pokud soubor neni .
		if($soubor != "."){
			// pokud je soubor slozkou
			if(is_dir($slozka."/".$soubor)) {
				// zavolani funkce pro ikonku slozky
				ZobrazNahled($soubor, $slozka, "slozka");
			} else {
				// pokud je soubor obrazkem
				if(@getimagesize($slozka."/".$soubor)) {
					// zavolani funkce pro zobrazeni zmenseniny obrazku
					ZobrazNahled($soubor, $slozka, "obrazek");
				// pokud soubor neni obrazkem
				} else {
					// zavolani funkce pro zobrazeni ikonky neznameho souboru
					ZobrazNahled($soubor, $slozka, "soubor");
				}
			}
		}
	}
	// vypsani cistice
	echo "<hr style='visibility: hidden; clear: both;'>";
	// vraceni informace o uspesnem provedeni funkce
	return True;
}

function Zmensi($vyska, $sirka, $x, $y) {
	#
	# funkce, ktera zmensuje rozmery tak aby byl mezi sirkou a vyskou
	# zachovan pomer.
	#

	if($vyska > $x) {
		$zmenseno = $x / $vyska;
		$vyska = $x;
		$sirka = $sirka*$zmenseno;
	}

	if($sirka > $y) {
		$zmenseno = $y / $sirka;
		$sirka = $y;
		$vyska = $vyska*$zmenseno;
	}

	$ret = array($vyska, $sirka);
	return $ret;
}

function ZobrazNahled($soubor, $cesta, $typ) {
	#
	# funkce, ktera zobrazi zmenseninu obrazku, slozky nebo souboru
	#

	echo "<div style='border: 1px solid black; margin: 10px; float: left; text-align: center;'>";
	echo "<div style='width: 100px; height: 75px; padding: 5px;'>";

	// pokud chceme zobrazit ikonku slozky
	if($typ == "slozka") {
		// zobrazeni obrazku
		echo "<img src='slozka.png' alt='' title=''>";
	// pokud chceme zobrazit ikonku souboru, ktery neni obrazkem
	} else if($typ == "soubor") {
		// zobrazeni ikonky a odkazu
		echo "<img src='soubor.png' alt='' title=''>";

	// pokud chceme zobrazit nahled obrazku
	} else {
		// zjisteni rozmeru obrazku
		$rozmery = getimagesize($cesta."/".$soubor);

		$vyska = $rozmery[1];
		$sirka = $rozmery[0];

		// zavolani funkce pro zmenseni rozmeru
		$rozmery = Zmensi($vyska, $sirka, 75, 100);

		// nastaveni novych rozmeru
		$vyska = $rozmery[0];
		$sirka = $rozmery[1];

		// vykresleni nahledu
		echo "<img src='".$_SESSION["slozka"]."/".$soubor."' alt='' title='' style='border:0;' width=".$sirka." height=".$vyska.">";
	}

	echo "</div>";

	// zobrazeni popisku
	echo "<div style='width:110px; background: #000; color: #FFF; text-align: center;' title='".$soubor."'>".substr($soubor, 0, 10)."</div>";

	echo "</div>";
}

session_start();
ObsahSlozky(".");
?>

×Odeslání článku na tvůj Kindle

Zadej svůj Kindle e-mail a my ti pošleme článek na tvůj Kindle.
Musíš mít povolený příjem obsahu do svého Kindle z naší e-mailové adresy kindle@programujte.com.

E-mailová adresa (např. novak@kindle.com):

TIP: Pokud chceš dostávat naše články každé ráno do svého Kindle, koukni do sekce Články do Kindle.

Hlasování bylo ukončeno    
0 hlasů
Google
(fotka) Juda KaletaAutor programuje v PHP a Pythonu, má velmi rád Linux a svobodný software. Také občas vyrazí do terénu s fotoaparátem. Většinu takto získaného materiálu publikuje na svém blogu.
Web     Facebook     LinkedIn    

Nové články

Obrázek ke článku Dovozci baterií mění logistiku, letadlo nahrazuje námořní doprava

Dovozci baterií mění logistiku, letadlo nahrazuje námořní doprava

Dovozci baterií do mobilů či notebooků upouštějí od letecké přepravy zboží. V letošním roce plánují dovézt až 80 % produktů lodí. Přitom před 5 lety byla většina baterií do mobilních přístrojů dovezených do České republiky přepravována letadlem. Za proměnou způsobu transportu akumulátorů stojí zpřísnění pravidel pro leteckou přepravu, která přinášejí vyšší náklady i náročnou agendu.

Reklama
Reklama
Obrázek ke článku JIC otevírá největší digitální dílnu pro veřejnost v České republice

JIC otevírá největší digitální dílnu pro veřejnost v České republice

JIC otevírá první nonstop veřejně dostupnou digitální dílnu světového formátu s vybavením za 3 miliony korun. Dílnu může využívat po registraci kdokoliv. V  prostorách vzniknou prototypy produktů místních startupů, projekty kutilů a studentů i umělecká díla. Cílem dílny je zpřístupnit veřejnosti drahé přístroje a přitáhnout více podnikavých lidí k technickým oborům.

Obrázek ke článku Nový IT hráč na českém trhu

Nový IT hráč na českém trhu

V roce 2015 otevřela v Praze na Pankráci v budově City Tower své kanceláře společnost EPAM Systems (NYSE:EPAM), jejíž centrála se nachází v USA. Společnost byla založená v roce 1993 a od té doby prošla velkým vývojem a stále roste.

loadingtransparent (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })();
Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032017 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý