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

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


Reklama

Szkolenia z Zend Framework 2.0


1 2 3