GAJDAW


MOJE KSIĄŻKI

Książka pt. Git. Recipes
Książka pt. Git. Rozproszony system kontroli wersji
Książka pt. PhpStorm Starter
Książka pt. Symfony w przykładach
Książka pt. GIMP. Praktyczne projekty. Wydanie II
Książka pt. PHP, MySQL i MVC. Tworzenie witryn WWW opartych na bazie danych
Książka pt. PHP. Praktyczne projekty

PROGRAMY

1 2 3


Prezentacja zdjęć na stronie WWW przy użyciu jQuery lightbox

Włodzimierz Gajda

2. Tabela miniatur

2.1 Dane

Zdjęcia wykorzystane w przykładzie są zapisane w folderze foto/. Każde zdjęcie jest zapisane w dwóch rozmiarach 133×99 oraz 600×450. Miniaturki są zawarte w folderze foto/mini/, a obrazy o szerokości 600 pikseli — w folderze foto/view/. Obraz duży i mały mają identyczną nazwę.

Na przykład pliki:

foto/mini/foto-01.jpg  (wymiary 133×99)
foto/view/foto-01.jpg  (wymiary 600×450)

przedstawiają to samo zdjęcie kwiatków. Pliki różnią się tylko wymiarami.

2.2 Przykład 1: tabela miniatur w HTML/CSS

Tabelę miniatur przygotowujemy w postaci listy ul/li:

<ul>
  <li><a href="foto/view/foto-01.jpg"><img src="foto/mini/foto-01.jpg" alt="" /></a></li>
  <li><a href="foto/view/foto-03.jpg"><img src="foto/mini/foto-02.jpg" alt="" /></a></li>
  <li><a href="foto/view/foto-04.jpg"><img src="foto/mini/foto-03.jpg" alt="" /></a></li>
  ...
</ul>

Jeśli listę chcemy sformatować w postaci tabeli miniatur, to dodajemy style:

ul {
    list-style-type: none;
    width: 532px;  
    margin: 0 auto;
    padding: 0px;
}

li {
    float: left;
    margin: 0;
    padding: 0;
    line-height: 0;
}

img {
    border: none;
}

Szerokość listy ul, równa 532 piksele, wynika z szerokości miniatur:

4 * 133 = 532

Tak przygotowana lista będzie prezentowana na stronie WWW w postaci tabeli czterokolumnowej.

2.3 Przykład 2: generowanie kodu HTML w PHP na podstawie zawartości folderu

Listę ol/li możemy wygenerować w PHP wykorzystując funkcję glob(): Wewnątrz poniższej pętli trzeba jedynie wydrukować odpowiednie znaczniki oraz funkcją str_replace() wymienić ścieżkę 'foto/mini/' na 'foto/view/' w hiperłączach:

<ul>
<?php

$plks = glob('foto/mini/*.jpg');

foreach ($plks as $plk) {
    echo '    <li><a href="';
    echo str_replace('foto/mini/', 'foto/view/', $plk);
    echo '"><img src="' . $plk . '" alt="" /></a></li>' . "\n";
}

?>
</ul>

Powyższe rozwiązanie będzie działało pod warunkiem, że fotografie i miniaturki mają identyczne nazwy.


Reklama

Szkolenia z Zend Framework 2.0


1 2 3