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

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

Włodzimierz Gajda

Wtyczka lightbox biblioteki jQuery to bardzo modna ostatnio kontrolka służąca do umieszczania na stronie WWW galerii fotografii. Po kliknięciu miniaturki w bieżącym oknie przeglądarki pojawia się charakterystyczne okno z powiększonym obrazem. Okno to zawiera informacje o liczbie fotografii, przyciski przewijania oraz przycisk do zamykania.

1. Działanie kontrolki lightbox

Na stronie WWW umieszczamy miniaturowe zdjęcia (rysunek 1).

Rysunek 1. Tabela miniatur

Po kliknięciu dowolnej z miniatur strona zostanie przysłonięta czarną, lekko przezroczystą warstwą. Na środku pojawi się wyeksponowane zdjęcie (rysunek 2) wraz z informacją o liczbie zdjęć w galerii. Informacja ta jest przedstawiona w postaci tekstu:

Image 25 of 31

Wyeksponowane zdjęcie możemy zamknąć przyciskiem Close.

Rysunek 2. Po kliknięciu miniatury zdjęcie zostaje wyeksponowane

Po wskazaniu górnych narożników zdjęcia kursorem myszy ujrzymy przyciski NEXT oraz PREV (rysunki 3, 4). Służą one do przewijania fotografii.

Rysunek 3. Po wskazaniu lewego górnego narożnika zdjęcia ujrzymy przycisk PREV

Rysunek 4. Po wskazaniu prawego górnego narożnika zdjęcia ujrzymy przycisk NEXT

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.

3. Wtyczka jQuery lightbox

Pod adresem http://leandrovieira.com/projects/jquery/lightbox/ znajdziemy wtyczkę lightbox. Pobieramy plik jquery-lightbox-0.5.zip. Po wypakowaniu znajdziemy w nim m.in. foldery:

css/
images/
js/

Foldery te należy przenieść do folderu, w którym wykonujemy ćwiczenie.

3.1 Przykład 3: tabela miniatur w HTML/CSS i lightbox

Folder, w którym wykonujemy ćwiczenie musi zawierać pliki i foldery przedstawione na rysunku 5.

Rysunek 5. Pliki i foldery ćwiczenia stosującego lightbox

W nagłówku strony dołączamy bibliotekę jQuery, oraz wtyczkę lightbox:

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" />    

Po czym zamieniamy hiperłącza tak, by korzystały z lightbox'a:

<script type="text/javascript">
$(function() {
    $('#galeria a').lightBox();
});        
</script>

Pełne rozwiązanie jest przedstawione na listingu 1.

<!DOCTYPE...>
<html>
  <head>
    ...
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>
    <link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" />    
    
    <script type="text/javascript">
    $(function() {
	$('#galeria a').lightBox();
    });        
    </script>
    
  </head>
<body>

<ul id="galeria">
    <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-03.jpg" alt="" /></a></li>
    <li><a href="foto/view/foto-04.jpg"><img src="foto/mini/foto-04.jpg" alt="" /></a></li>
    ...
</ul>

</body>
</html>

Listing 1. Statyczna strona WWW stosująca lightbox

3.2 Przykład 4: tabela miniatur w PHP i lightbox

Wykorzystując PHP tabelę miniatur generujemy przy użyciu funkcji glob() oraz instrukcji foreach. Jedyna zmiana, w stosunku do przykładu drugiego, jest taka, że nagłówek strony zawiera znaczniki dołączające lightbox oraz kod JavaScript.

Pełne rozwiązanie jest przedstawione na listingu 2.

<!DOCTYPE...>
<html>
  <head>
    ...
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>
    <link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" />    
    
    <script type="text/javascript">
    $(function() {
	$('#galeria a').lightBox();
    });        
    </script>
        
  </head>
<body>

<ul id="galeria">
<?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>

</body>
</html>

Listing 2. Strona w PHP stosująca lightbox

3.3 Przykład 5: jedna fotka

Jeśli chcemy wykonać lightbox dla pojedynczej fotki, to pierwszemu elementowi listy dodajemy identyfikator #tak:

<ul id="galeria">
    <li id="tak"><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-03.jpg" alt="" /></a></li>
    <li><a href="foto/view/foto-04.jpg"><img src="foto/mini/foto-04.jpg" alt="" /></a></li>
    <li><a href="foto/view/foto-05.jpg"><img src="foto/mini/foto-05.jpg" alt="" /></a></li>
    ...
</ul>

zaś w stylach CSS wyłączamy widoczność elementów li:

li {
    display: none;
}

po czym włączamy widoczność elementu o identyfikatorze #tak:

#tak {
    display: block;
}

W ten sposób lightbox może być wyświetlany dla pojedynczej fotki umieszczonej na stronie WWW.

3.4 Przykład 6: polska wersja językowa lightbox-a

W celu spolszczenia lightbox-a, należy w metodzie lightBox() podać parametry ustalające tekst 'Zdjęcie X z Y':

<script type="text/javascript">
$(function() {
    $('#galeria a').lightBox(

        {
           txtImage: 'Zdjęcie',
           txtOf: 'z',
        }

    );
});        
</script>

oraz przygotować polskie wersje obrazów:

images/lightbox-btn-close.png
images/lightbox-btn-next.gif
images/lightbox-btn-prev.gif

Plik zawierający tekst 'Zdjęcie' należy zakodować zgodnie z kodowaniem stosowanym na stronie.

Rysunek 6 przedstawia lightbox-a w polskiej wersji językowej.

Rysunek 6. Polska wersja językowa lightbox-a

lp. Pobierz
1. Wtyczka jQuery lightbox

Tabela 2. Pliki do pobrania

lp. Adres
1. Wtyczka: jQuery lightbox

Tabela 3. Adresy


Reklama

Szkolenia z Zend Framework 2.0