AJAX Kurs od podstaw - interakcja AJAX - PHP

Okienka pop-up z podglądem fotografii

Galeria fotografii widoczna na rys. 1 prezentuje zestawienie miniaturowych fotografii. Wskazanie dowolnej fotografii wskaźnikiem myszy powoduje pojawienie się małego okienka (tzw. pop-up) zawierającego powiększoną fotografię. Okienko oprócz powiększonego zdjęcia zawiera dodatkowe informacje: nazwę aparatu, jakim wykonano zdjęcie, wartości przysłony, czasu oraz ogniskowej.

Okno pop-up zawiera zawsze dane bieżące o wskazanej fotograf ii, co widać na rys. 3. Oczywiście liczba wierszy i kolumn tabeli miniatur, jak również wymiary zdjęcia wyświetlanego w oknie pop-up mogą być dowolne (rys. 4). Dodatkowo, ok na pop-up wędrują za wskaźnikiem myszki, jego przesunięcie powoduje przesunięcie ok na pop-up.

Rys. 1. Galeria: tabela miniatur

Rys. 2. Okno pop-up wyskakujące po wskazaniu jednej z miniatur

Rozwiązanie takie znajdziemy m.in. w serwisach Template Monster, iStockphoto oraz WebHandel.

Rozwiązanie - opis krok po kroku

W omawianej galerii:

• men u strony (tj. tabelkę miniatur) generujemy w PHP na podstawie zawartości folderu mini/ (funkcja glob()),
• każda miniaturka obsługuje zdarzenia: onmouseover, onmousemove oraz onmouseout,
• po wystąpieniu zdarzenia onmouseover pojawia się wyskakujące okienko pop-up,
• po wystąpieniu zdarzenia onmousemove okienko pop-up jest przesuwane do nowego położenia,
• zdarzenie onmouseout ukrywa okienko pop-up,
• w okienku pop-up zostaje umieszczone powiększone zdjęcie. Pobranie powiększonej fotografii jest wykonywane asynchronicznie w tle przez przeglądarkę - nie jest do tego wykorzystany obiekt XMLHttpRequest,
• poniżej powiększonej fotografii w oknie pop-up zostają umieszczone dane EXIF wybranego zdjęcia - dane EXIF są pobierane przez obiekt XMLHttpRequest.

Rys. 3. Okno pop-up wyświetlane na innej z miniatur

Rys. 4. Fotografie zawarte w oknie pop-up mogą mieć dowolny rozmiar

Krok 1: dane

Fotografie zawarte w galerii należy przygotować w dwóch formatach: większym i mniejszym. Miniaturki umieszczamy w folderze mini/, zaś fotografie duże w folderze duze/. Duże i małe zdjęcia muszą być zapisane w plikach o identycznych nazwach, np.:

[+]

[-]

 

 

 

1. mini/foto-03.jpg
2. duze/foto-03.jpg

Listing zwinięty - 2 linii

Krok 2: tabela miniatur

Za wydrukowanie tabeli miniatur odpowiadają dwa proste skrypty PHP. Na początku skryptu index.php w tablicy $plks ustalamy nazwy wszystkich plików graficznych o rozszerzeniu .jpg z folderu mini/. Tablicę $plks przekształcamy na tablicę dwuwymiarową o zadanej liczbie kolumn. Odpowiada za to funkcja array_1dim_to_2dim() z pliku array.inc.php:

[+]

[-]

 

 

PHP

1. <?php
2. require_once 'array.inc.php';
3. $plks = glob('mini/*.jpg');
4. $ile_obrazow = count($plks);
5. $ile_kolumn = 8;
6. $ile_wierszy = ($ile_obrazow / $ile_kolumn);
7. $plks = array_1dim_to_2dim($plks, $ile_kolumn);
8. ?>

Listing zwinięty - 8 linii

Tabela XHTML jest drukowana w podwójnej pętli for sterowanej liczbą wierszy i kolumn tabeli:

[+]

[-]

 

 

PHP

 1. for ($i = 0; $i < $ile_wierszy; $i++) {
 2.   echo '<tr>';
 3.   for ($j = 0; $j < $ile_kolumn; $j++) {
 4.     if (isset($plks[$i][$j]) && ($plks[$i][$j] != '')) {
 5.       echo '<td><img src="' . $plks[$i][$j] ' onmouseover="show_popup(this,
    event);"'. ' onmousemove="move_popup(event) ;"'. ' onmouseout="hide_popup();"'.
    ' alt="" /></td>';
 6.     } else {
 7.       echo '<td></td>' . "n";
 8.     }
 9.   }
10.   echo '</tr>';
11. }

Listing zwinięty - 11 linii

Drukowane komórki td zawierają obrazy ze zdefiniowaną obsługą zdarzeń:

[+]

[-]

 

 

HTML

1. <td>
2. <img src="mini/foto-002.jpg" onmouseover="show_popup(this, event);"
   onmousemove="move_popup(event);" onmouseout="hide_popup();" alt="" />
3. </td>

Listing zwinięty - 3 linii

Parametr this zawiera wskaźnik do klikniętego obrazu, zaś event umożliwia odczyt współrzędnych wskaźnika myszy.