Jak wstawić menu karuzelowe na stronę www?

2013-08-07 | Mirosław Zelent

Dziś pokażę jak łatwo można wzbogacić stronę www o efektowne menu karuzelowe. Galeria pochodzi ze strony flshow.net i jest darmowa w użyciu; godzimy się jedynie na niewielką ikonkę w lewym dolnym rogu karuzeli. Naprawdę dużą zaletą skryptu jest jego kompatybilność z przeglądarkami, w tym również z kochanym IE. Jeżeli nawet ktoś wyłączył obsługę Flash lub js w swojej przeglądarce, to otrzyma na stronie odpowiedni tekst zastępczy z linkiem.W moim przypadku wewnątrz karuzeli umieszczę miniaturki z linkami do wykładów w PDF, ale oczywiście można tam umieścić cokolwiek - np. ikonki nawigacyjne, okładki gier czy książek, zdjęcia, artykuły sklepowe i cokolwiek będzie akurat potrzebne.

Zobacz demo w nowej karcie przeglądarki:

Instalacja menu karuzelowego

Pokażę teraz jak dodać taką karuzelę do swojej strony www oraz wyjaśnię wybrane, najważniejsze opcje konfiguracyjne skryptu.

Krok 1 → Pobierz niezbędne pliki skryptu poniżej

Krok 2 → Przekopiuj pobrane pliki do folderu ze stroną

Rzecz jasna, w pobranym powyżej archiwum odpowiednie pliki już znajdują się we właściwym miejscu. Generalnie do katalogu ze stroną www (w tym przykładzie: demo.html) należy dorzucić trzy pliki:

  1. carousel.swf → plik Flasha zawierający galerię
  2. swfobject.js → upakowany skrypt z kodem js
  3. default.xml → plik konfiguracyjny w formacie XML

Oczywiście potrzebujemy także obrazów do wyświetlenia wewnątrz galerii - w przypadku dema jest to podfolder: img/karuzela, a w nim znajdują się pliki: 1.jpg do 12.jpg.

Krok 3 → Dodanie niezbędnego kodu do strony www

Najpierw, w sekcji head podpinamy skrypt do naszej strony:
  1. <head>
  2. <script type="text/javascript" src="swfobject.js">
  3. </head>
Potem w sekcji body umieszczamy właściwą karuzelę w divie o nazwie id=karuzela:
  1. <body>
  2. <!-- xxxxxxxx carousel gallery start xxxxxxxx -->
  3. <div id="karuzela">
  4. Ta galeria wymaga <a title="Pobierz Flash Playera"
  5. href="http://www.adobe.com/go/getflashplayer"
  6. target="_blank"><strong>Adobe Flash Player w wersji 9.0
  7. </strong></a> lub wyższej. Obsługa JavaScript również
  8. musi być włączona w przeglądarce.
  9. </div>
  10. <script type="text/javascript">
  11. swfobject.embedSWF("carousel.swf", "karuzela", "580",
  12. "200","9.0.0", false, {xmlfile:"default.xml", loaderColor:
  13. "0x666666", messages: "Wczytywanie::Wczytywanie danych
  14. XML::Wczytywanie obrazów::Możesz użyć klawiszy strzałek
  15. do nawigacji"},{bgcolor: "#ffffff"}); </script>
  16. <!-- xxxxxxxx carousel gallery end xxxxxxxx-->
  17. </body>

Zwróć uwagę, że wartości "580" i "200" to odpowiednio: width i height całej karuzeli. Możesz też dostosować domyślne komentarze oraz kolor tła (bgcolor).

Podstawowa konfiguracja - jak dodać obrazki?

Najważniejszy plik konfiguracyjny to default.xml. Określamy w nim przede wszystkim ścieżki do użytych plików graficznych, opcjonalnie teksty po najechaniu na obrazek i linki, do których obrazki mają prowadzić. Standard XML jest nieco podobny do HTML; wartości znajdują się pomiędzy tagami albo są ustawiane jako atrybuty. Załączenie obrazka do galerii:

  1. <photo title="Wprowadzenie do Linuxa"
  2. href="http://tutaj.wstawisz.adres.przekierowania"
  3. target="_blank">
  4. img/karuzela/1.jpg
  5. </photo>

Ścieżka do pliku umieszczona jest zawsze pomiędzy tagami <photo> i </photo>. W atrybutach można ustawić tekst wyświetlany po najechaniu kursorem na obrazek (title w linii 1), hiperłącze (href w linii 2), oraz wymusić otwarcie linku w nowym oknie (target w linii 3).

Dodatkowa konfiguracja - dostosowanie wyglądu karuzeli

Opcje customizacji wyglądu galerii znajdują się również w pliku default.xml:
  • <background> kolor tła, ale pamiętaj, że kolor ustawiamy także w momencie wrzucania galerii do diva (w pliku html);
  • <default_speed> prędkość domyślna obracania się elementów w karuzeli;
  • <speed> prędkość obracania się elementów w karuzeli po najechaniu kursorem;
  • <reset_delay> po ilu sekundach bez aktywności kursora prędkość speed ma wrócić do default_speed;
  • <default_view_point> kąt widzenia, im mniejszy tym bardziej płaski widok;
  • <size> procentowy rozmiar obrazów na drugim planie w stosunku do tych na pierwszym planie;
  • <blur>, <blur_quality> w sekcji <far_photos> rozmazanie i jego jakość dla obrazów znajdujących się na drugim planie;
  • sekcja <reflection> odbicie lustrzane obrazków - ile pikseli, jaka jakość, jaka przezroczystość.

Jeszcze mała uwaga - przeglądarka internetowa może buforować niektóre ustawienia galerii, więc po dokonaniu zmian najlepiej użyć kombinacji klawiszy Ctrl+F5 zamiast tylko klawisza F5 (chodzi o wymuszenie ponownego reloadu plików). Można też użyć kilku różnych przeglądarek. Bo zmiany mogły zostać dokonane, mimo iż nie zobaczyliśmy ich rezultatów na ekranie podczas testowania.