Galéria obrázkov

V tejto kapitole si ukážeme veľmi často používaný prvok na stránke – galériu obrázkov. Poznáte to ako zoznam (list) miniatúr – zmenšených obrázkov, ktoré sú usporiadané v riadkoch a stĺpcoch. Po zobrazení sa myšou ponad miniatúru sa nám niekedy ten obrázok zmení alebo sa niečo na ňom zobrazí, aby nám bolo naznačené, že po kliknutí na obrázok sa zobrazí jeho väčší rozmer vo väčšine v novom okne. Na naprogramovanie takejto galérie nie je potrebné pre vás nič nové z jazykov HTML, CSS alebo PHP. Aby to ale nejako vyzeralo, budeme musieť použiť opäť troška programátorskej logiky a šikovnosti.

 

Premenujme si celú stránku page2.php na názov Fotogaléria. Takže musíme premenovať súbor page2.php na fotogaleria.php (pravým a rename), v súbore menu.php zmeníme cestu odkazu (href) a jeho text a v súbore fotogaleria.php zmeníme premennú actual_page na fotogaleria a nadpis na Fotogaléria. Takto budeme mať v menu, názov súboru (viditeľný v URL adrese) a aj v nadpise správne pomenovanú stránku. Takéto galérie obrázkov sa nachádzajú skoro na každej webstránke, či to je stránka reštaurácie, hotela, firmy, osobné stránky a podobne. Poďme teda na to.

 

Na galériu obrázkov budeme samozrejme potrebovať nejaké obrázky. Aby sme si to zbytočne nekomplikovali, použijeme jeden obrázok viackrát. Doteraz sme používali, či už v tagu img alebo v CSS vo vlastnosti background-image, vždy externý obrázok. To znamená taký, ktorý bol uložený niekde na internete na serveri a odkazovali sme sa k nemu pomocou jeho URL adresy. V praxi sa však používanie externých obrázkov alebo inej grafiky nepoužíva, je vo zvyku mať všetko uložené lokálne, čiže na samotnom serveri, kde je aj uložená stránka. No a možno tušíte, že sa k tomuto obrázku budeme odkazovať podobne ako v prípade lokálnych webstránok, cez relatívnu URL.

 

Vytvorme si v našom projekte adresár s názvom images, ktorý bude obsahovať všetky obrázky použité na našej stránke. Stiahneme si nejaký obrázok, ktorý použijeme ako zdroj do našej galérie, môžete si ho stiahnuť tu:

 

https://smart-union.org/wp-content/blogs.dir/239/files/2015/12/placeholder-800x500.jpg

 

Uložte/premiestnite si tento obrázok do tohto adresára a uistite sa, že jeho názov placeholder.jpg. Tento obrázok má v plnej veľkosti rozlíšenie (veľkosť) 800x500, pre miniatúru budeme používať jeho zmenšeninu pomocou HTML a po kliknutí na miniatúru sa zobrazí jeho detail.

 

Poďme teda na to, obrázok máme, stránku (fotogaleria.php) máme, už len stačí naprogramovať galériu. Našou úlohou je spraviť fotogalériu, kde v jednom riadku budú tri fotografie, medzi nimi budú medzery a zvyšné sa budú zobrazovať v novom riadku až kým sa nezobrazia všetky fotky. My máme iba jednu fotku, ale zobrazíme si ju sedem krát, ako keby sme mali sedem rôznych fotiek. Štandardne si spravíme najprv logiku (HTML, PHP) a potom to budeme dizajnovať.

 

Takže musíme v tomto prípade sedemkrát niečo vypísať (tag img). Akonáhle sa stretnete v programovaní s niečím ako niekoľkokrát, viackrát, neviem koľkokrát, viac ako raz, musí vás okamžite napadnúť použitie cyklu. Ako sme si povedali, fotogaléria je list (zoznam) obrázkov, takže použijeme na to tag ul, ktorého položky (li) budú obsahovať obrázok (img). Ideme použiť cyklus...otázka znie, ako zakomponujeme výpis rôzneho obrázka (src) v každom kroku cyklu. Zrejme vás to napadlo, zoznam obrázkov by sme mali mať uložený v premennej typu array. Toto pole si budeme prechádzať, kde každá jeho položka bude predstavovať URL adresu obrázka. V praxi skoro nikdy nevieme, koľko obrázkov má daná galéria, takže zoznam obrázkov sa nám bude načítavať z ľubovoľného zdroja (súbor, databáza...) do premennej tohto typu. My ideme použiť všade ten istý obrázok, takže najprv si šikovne, tiež pomocou cyklu, naplníme pole, ktoré by v praxi predstavovalo zoznam rôznych obrázkov. A následne ho cyklom vypíšeme príslušný početkrát, cez prvok zoznamu (li), odkazu do novej karty (a) a img. Mohlo by to vyzerať asi takto:

 

<?php
$pictures = array();

for($i = 0; $i < 7; $i++){
    $pictures[] = 'images/placeholder.jpg';
}

echo '<ul>';
for($i = 0; $i < 7; $i++){
    echo '<li>';
        echo '<a target="_blank" href="'.$pictures[$i].'">';
            echo '<img src="'.$pictures[$i].'">';
        echo '</a>';
    echo '</li>';
}
echo '</ul>';
?>

 

 

Výsledok vyzerá dosť strašne, ale prakticky je to to, čo sme potrebovali. Na začiatku sme si pomocou jedného cyklu len naplnili pole, aby malo 7 prvkov, ktoré obsahujú URL adresu nášho obrázka. To sme si len nasimulovali pole s obrázkami, akoby sme ho dostali z nejakého zdroja alebo keby sme ho mali natvrdo naplnené adresami reálne rôznych obrázkov v našom projekte. Potom sme si cez cyklus prvky vypísali do zoznamu. Každý obrázok je aj odkaz, pomocou ktorého si môžeme na novej karte (_blank) prehliadača pozrieť plnú veľkosť obrázka. Všimnite si tretí výraz v cykle, príkaz premenná $i++ znamená, že tú premennú zvýši o jedna. Je to rýchlejšie, ako zadávať $i=$i+1, ale robí to to isté:)

 

Poďme to teda naštýlovať. Ako prvé musíme zmenšiť veľkosť miniatúry, dáme si chvíľku matiky. Šírka nášho bloku main-content je 679 pixelov (900 main – 200 sidebar – 20 padding – 1 border). Nechceme, aby pravý (tretí) obrázok v riadku bol nalepený na pravom kraji, takže bloku main-content pridáme aj padding-right 20 pixelov, ktorý musíme prirátať aj v calc funkcii k odpočítanej hodnote. Medzi miniatúrami chceme mať medzeru, aby neboli na seba nelepené, takže medzi prvým a druhým a druhým a tretím obrázkom budeme chcieť nejaký priestor, povedzme že 10 pixelov. Takže 679-20-10-10 je 639, deleno tromi je 213. Náš obrázok bude teda široký 213 pixelov. Ďalej zrušíme zoznamu odrážkovanie, odkaz nastavíme ako blokový element a nastavíme mu aj výšku 133 pixelov, čo je výška obrázka po zmenšení na šírku 213 pixelov. Okrem toho mu 10 pixelov nastavíme aj ako spodný okraj (margin-bottom), aby neboli obrázky vertikálne na seba nalepené.

 

Teraz nám ostáva vyriešiť najväčší problém a to je to, aby išli obrázky zaradom a aby sa po prvom a po druhom spravila medzera (margin-right). Musíme pritom ale zabezpečiť, aby sa pri treťom obrázku tento margin nezadal. Pretože chceme mať sprava rovnaký okraj (padding-right 20px) ako je aj z ľavej strany pri prvom obrázku (padding-left 20px). To, aby išli zaradom, čiže zľava doprava a ak nemajú miesto, tak aby išli do nového riadku, to je preda definácia vlastnosti float s hodnotou left, to už viete. Zamyslime sa nad problémom okraja...Každý obrázok si vykreslujeme pomocou cyklu, v jednom kroku cyklu vykreslíme jeden obrázok. Ak si budeme náš problém krokovať (simulovať krok za krokom činnosť programu), znie to asi takto. V prvom kroku cyklu vykresli obrázok a daj mu okraj (triedu s nastaveným margin-right). V druhom kroku daj okraj, v treťom kroku ale okraj nedaj, iba vykresli obrázok. V novom riadku zase v štvrtom a piatom kroku daj okraj, v šiestom ale nedaj. A takto by to išlo dookola.

 

Keď sa nad tým zamyslíte, uvidíte, že okraj nedávame v 3., 6., 9., 12. atď kroku. Čo vám tie čísla pripomínajú? Uhádli ste, sú to násobky čísla 3, čiže čísla deliteľné tromi bez zvyšku. Takže náš veľký problém je vyriešený, musíme povedať počítaču, že ak je poradové číslo kroku nedeletiľné tromi (1,2,4,5,7,8...), aby pridalo do odkazu triedu pre pravý okraj a ak je deliteľné, tak aby nepridalo. Pýtanie ak-tak nie je nič iné, ako podmienka. Ako ale zistíme deliteľnosť?

 

Ak je nejaké číslo deliteľné iným číslom, po delení týmto číslom neostane zvyšok po delení. Zaspomínajme si na základnú školu, 6 / 3 = 2 ale 7 / 3 = 2 a zvyšok 1, 8 / 3 = 2 a zvyšok 2. My tento zvyšok vieme zistiť pomocou špeciálneho operátora - percento (%). Ak dáme tento znak medzi dve čísla (premenné), vráti nám hodnotu zvyšku po delení, čiže 6%3 nám vráti 0, ale 7%3 nám vráti 1. Presne toto použijeme do našej podmienky, ak náš index – poradové číslo cyklu (zväčšené o jedna, lebo začína od nuly) dáva po delení 3 zvyšok, daj okraj, ak nie, tak nedaj nič. Dúfam, že to neznie zložito, kód by mal vyzerať asi takto:

 

fotogaleria.php:

<?php

$pictures = array();

for($i = 0; $i < 7; $i++){
    $pictures[] = 'images/placeholder.jpg';
}

echo '<ul id="gallery">';
for($i = 0; $i < 7; $i++){
    echo '<li>';

        echo '<a class="left';
        if(($i+1)%3){
            echo ' photo-margin';
        }
        echo '" target="_blank" href="'.$pictures[$i].'">';

            echo '<img src="'.$pictures[$i].'">';
        echo '</a>';
    echo '</li>';
}
echo '</ul>';

?>

 

global.css (len zmeny, nie celý súbor):

.main-content{
    width: calc(100% - 241px);
    min-height: 700px;
    border-left: 1px solid #7d8079;
    padding-left: 20px;
    padding-right: 20px;
}

/**********GALERIA***********/
#gallery{
    list-style-type: none;
    margin: 0;
    padding: 0;
}

#gallery A{
    display: block;
    height: 133px;
    margin-bottom: 10px;
}

#gallery IMG, #gallery A{
    width: 213px;
}

.photo-margin{
    margin-right: 10px;
}

 

Pozrite sa na výsledok, skúste si aj kliknúť na nejaký obrázok. Vyzerá to dobre, nie? Čo sa týka kódu v súbore fotogaleria.php, tam nastala zmena v tom, že sme si hodnotu atribútu class odkazu s obrázkom oddelili a vsunuli do nej kód PHP. Všimnite si, že pred rozdelením sme hodnotu začali, už sa v nej nachádza trieda left a po konci podmienky sme ju aj uzavreli dvojitými úvodzovkami. Takže v podmienke sa len pýtam, či ešte medzi to niečo vložíme alebo to bude obsahovať iba túto jednu triedu. V podmienke sa pýtame, či poradového číslo kroku v cykle (index zväčšený o jedna) dáva zvyšok po delení tromi. Ak áno, to znamená, že to číslo nie je deliteľné tromi a teda zvyšok je 1 alebo 2 (napr. 4,5,7...) a tým pádom je podmienka splnená. Ak zvyšok nie je (3,6), tak je hodnota výrazu 0 a teda podmienka splnená nie je, 0 je nepravda, takže sa príkaz echo na triedu nevykoná. Takto šikovne sa pomocou PHP dá ovplyvniť aj dizajn, podobná praktika sa využívame veľmi často, kedy chceme niečo v dizajne obmedziť na konkrétne prípady.

Máte nejakú otázku alebo Vám niečo nie je jasné? Napíšte nám na info@zacni-programovat.sk a poradíme!

Obsah súborov projektu po tejto prednáške

1 - footer.php

<div class="footer">
</div>

2 - fotogaleria.php

<!DOCTYPE html>

<html lang="sk">
<head>
<title>Vitajte na našej prvej skutočnej webstránke!</title>

<meta charset=“UTF-8“>
<meta name="description" content="Ponúkame vám lekcie jazykov HTML, CSS, PHP a mnoho ďalších užitočných rád pri programovaní">
<meta name="keywords" content="programovanie, html, css, php, webstranka, web, tvorba webu, web developer, ucenie programovania, ako programovat">

<link rel="stylesheet" type="text/css" href="global.css">
</head>

<body>
<?php $actual_page = "fotogaleria";?>
<div class="main">

<?php include "header.php";?>

<div class="content">

<?php include "menu.php";?>

<div class="main-content right">
<h1>Fotogaléria</h1>

<?php

$pictures = array();

for($i = 0; $i < 7; $i++){
$pictures[] = 'images/placeholder.jpg';
}

echo '<ul id="gallery">';
for($i = 0; $i < 7; $i++){
echo '<li>';

echo '<a class="left';
if(($i+1)%3){
echo ' photo-margin';
}
echo '" target="_blank" href="'.$pictures[$i].'">';

echo '<img src="'.$pictures[$i].'">';
echo '</a>';
echo '</li>';
}
echo '</ul>';

?>
</div>

<div class="clear"></div>
</div>

<?php include "footer.php";?>
</div>
</body>
</html>

3 - global.css

BODY{
margin: 0;
background-color: #dee8e7;
}

.main{
background-color: #f6f7f1;
width: 900px;
margin: auto;
margin-top: 20px;
margin-bottom: 20px;
}

.header{
border-bottom: 1px solid #7d8079;
height: 150px;
}

.header-inner1{
}

.header-inner2{
}

.content{
}

.footer{
border-top: 1px solid #7d8079;
height: 200px;
}

.half-width{
width: 50%;
}

.full-height{
height: 100%;
}

.left{
float: left;
}

.right{
float: right;
}

.clear{
clear: both;
}

/**********MENU***********/
.sidebar{
width: 200px;
height: 400px;
}

.sidebar UL{
list-style-type: none;
padding: 0;
margin: 0;
}

.sidebar UL LI{
}

.sidebar UL LI A{
display: block;
padding: 15px 0px 15px 35px;
border-bottom: 1px solid #7d8079;
color: #7d8079;
font-family: Arial;
text-decoration: none;
text-transform: uppercase;
}

.sidebar UL LI A.active{
color: #f5f7f4;
background-color: #f96b81;
}

.sidebar UL LI:HOVER A{
background-color: #5b6b78;
color: #d6e3e9;
}

.main-content{
width: calc(100% - 241px);
min-height: 700px;
border-left: 1px solid #7d8079;
padding-left: 20px;
padding-right: 20px;
}

/**********GALERIA***********/
#gallery{
list-style-type: none;
margin: 0;
padding: 0;
}

#gallery A{
display: block;
height: 133px;
margin-bottom: 10px;
}

#gallery IMG, #gallery A{
width: 213px;
}

.photo-margin{
margin-right: 10px;
}

4 - header.php

<div class="header">
<div class="header-inner1 full-height half-width left"></div>
<div class="header-inner2 full-height half-width left"></div>
</div>

5 - index.php

<!DOCTYPE html>

<html lang="sk">
<head>
<title>Vitajte na našej prvej skutočnej webstránke!</title>

<meta charset=“UTF-8“>
<meta name="description" content="Ponúkame vám lekcie jazykov HTML, CSS, PHP a mnoho ďalších užitočných rád pri programovaní">
<meta name="keywords" content="programovanie, html, css, php, webstranka, web, tvorba webu, web developer, ucenie programovania, ako programovat">

<link rel="stylesheet" type="text/css" href="global.css">
</head>

<body>
<?php $actual_page = "index";?>
<div class="main">

<?php include "header.php";?>

<div class="content">

<?php include "menu.php";?>

<div class="main-content right">
<h1>Domov</h1>
</div>

<div class="clear"></div>
</div>

<?php include "footer.php";?>
</div>
</body>
</html>

6 - menu.php

<div class="sidebar left">
<ul>
<li><a class="<?php if($actual_page == "index"){echo 'active';}?>" href="index.php">Domov</a></li>
<li><a class="<?php if($actual_page == "page1"){echo 'active';}?>" href="page1.php">page1</a></li>
<li><a class="<?php if($actual_page == "fotogaleria"){echo 'active';}?>" href="fotogaleria.php">Fotogaléria</a></li>
<li><a class="<?php if($actual_page == "page3"){echo 'active';}?>" href="page3.php">page3</a></li>
</ul>
</div>

7 - page1.php

<!DOCTYPE html>

<html lang="sk">
<head>
<title>Vitajte na našej prvej skutočnej webstránke!</title>

<meta charset=“UTF-8“>
<meta name="description" content="Ponúkame vám lekcie jazykov HTML, CSS, PHP a mnoho ďalších užitočných rád pri programovaní">
<meta name="keywords" content="programovanie, html, css, php, webstranka, web, tvorba webu, web developer, ucenie programovania, ako programovat">

<link rel="stylesheet" type="text/css" href="global.css">
</head>

<body>
<?php $actual_page = "page1";?>
<div class="main">

<?php include "header.php";?>

<div class="content">

<?php include "menu.php";?>

<div class="main-content right">
<h1>Page1</h1>
</div>

<div class="clear"></div>
</div>

<?php include "footer.php";?>
</div>
</body>
</html>

8 - page3.php

<!DOCTYPE html>

<html lang="sk">
<head>
<title>Vitajte na našej prvej skutočnej webstránke!</title>

<meta charset=“UTF-8“>
<meta name="description" content="Ponúkame vám lekcie jazykov HTML, CSS, PHP a mnoho ďalších užitočných rád pri programovaní">
<meta name="keywords" content="programovanie, html, css, php, webstranka, web, tvorba webu, web developer, ucenie programovania, ako programovat">

<link rel="stylesheet" type="text/css" href="global.css">
</head>

<body>
<?php $actual_page = "page3";?>
<div class="main">

<?php include "header.php";?>

<div class="content">

<?php include "menu.php";?>

<div class="main-content right">
<h1>Page3</h1>
</div>

<div class="clear"></div>
</div>

<?php include "footer.php";?>
</div>
</body>
</html>

Ťažko sa vám učí samému?

Máte problémy s niektorými časťami alebo sa neviete učiť sám? Využite našu možnosť individuálnej asistencie:

  • samostatný prístup
  • vysvetlenie nejasností prebraného učiva
  • úlohy a cvičenia navyše
  • všetko z pohodlia domova cez mail a skype

Pre viac info kliknite tu

Kľúčové slová prednášky

galeriagaleria obrazkovobrazkova galeriagaleria fotiekzoznam fotiekzoznam miniaturfotoalbum

IT ftip

Hovorí programátor kamarátovi: Doktor mi predpísal beta karotén, no ja si radšej počkám na finálnu verziu.