W prezentacji zdjęć na stronach naszych klientów korzystaliśmy z wielu rozwiązań, lecz w znakomitej większości serca naszych klientów zdobył skrypt Lightbox. Jest to skrypt oparty na Java Script, który pomaga w ciekawy i atrakcyjny sposób przedstawić powiększenie miniatury do większego rozmiaru tego samego zdjęcia. Oprócz dosyć nowatorskiej animacji, skrypt umożliwia przekazywanie zarówno treści tekstowej (np. podpis zdjęcia, lub content nawiązujący do treści) oraz samej grafiki (np. zdjęcie).
Kliknięcie na miniaturę nie ładuje nowej strony, lecz wyzwala animację nowej warstwy na stronie, na której możemy obejrzeć powiększone zdjęcie wraz z opisem, lub nawet przewijać okno pomiędzy kolejnymi zdjęciami (należy wtedy je pogrupować – patrz instrukcja poniżej).
Przedstawiamy kroki instalacji skryptu Lightbox :
1. Skrypt pobieramy z tej strony. Następnie rozpakowujemy go do katalogu ze stroną www.
2. Do sekcji <head> … </head> swojej strony dodajemy wpis :
<script type="text/javascript" src="js/prototype.js"></script> <script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script> <script type="text/javascript" src="js/lightbox.js"></script>
oraz :
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
3. W miejscu gdzie chcemy mieć animowane powiększenie miniaturki tworzymy link :
<a href="images/duze-zdjecie.jpg" rel="lightbox" title="Podpis pod zdjęciem"> <img src="images/miniaturka-zdjecia.jpg" alt="Podpis miniaturki" /> </a>
Do znacznika <a> dodaliśmy rel=”lightbox” oraz title=”"
4. Jeśli chcemy mieć kilka zdjęć w grupie i poruszać się między nimi w oknie Lighbox musimy do każdego z linków dodać dyrektywę rel=”ligthbox[nazwa_grupy_zdjec]
Np. :
<a href="images/duze-zdjecie1.jpg" rel="lightbox[moje_wakacje]" title="Podpis pod zdjęciem 1"> <img src="images/miniaturka-zdjecia1.jpg" alt="Podpis miniaturki 1" /> </a> <a href="images/duze-zdjecie2.jpg" rel="lightbox[moje_wakacje]" title="Podpis pod zdjęciem 2"> <img src="images/miniaturka-zdjecia2.jpg" alt="Podpis miniaturki 2" /> </a> <a href="images/duze-zdjecie3.jpg" rel="lightbox[moje_wakacje]" title="Podpis pod zdjęciem 3"> <img src="images/miniaturka-zdjecia3.jpg" alt="Podpis miniaturki 3" /> </a>
Przykłady działania skryptu Lightbox można obejrzeć na stronie domowej projektu.
Brak podobnych wpisów.
- Poprzedni wpis : Pozycjonowanie z zupełnie innej strony
- Następny wpis : Jak zabezpieczyć przed spamem formularze na stronie www?
"W związku z rozwojem naszego sklepu i chęcią wejścia na rynek internetowy, poszukiwaliśmy firmy, która zajmie się przygotowaniem serwisu, integracją z dotychczasową aplikacją sprzedażową, a także promocją, reklamą i szeroko pojętym e-marketingiem. Zdecydowaliśmy się na wrocławską firmę Contip i jak pokazuje dotychczasowa współpraca - była to bardzo dobra decyzja. "
© 2008-2010. Wszelkie prawa zastrzeżone.