Darmowy slider na Twoją stronę - DJ-ImageSlider

Jednym z elementów zwiększających atrakcyjność witryny jest efektowny slider wyświetlający pliki graficzne oraz ich opisy w formie slajdów.

Moim ulubionym darmowym sliderem jest DJ-ImageSlider, który można pobrać w serwisie Dj-Extensions.com. Opisywałem go już jakiś czas temu w artykule: DJ Image Slider.

Obecnie dostępna jest uaktualniona wersja 3 tego darmowego rozszerzenia, która zawiera sporo zmian, takich jak:

• wykonywanie efektów w języku CSS3 zamiast JavaScript;
• poprawa responsywności;
• ulepszone wsparcie dla urządzeń dotykowych;
• możliwość tworzenia własnych szablonów (tzw. theme);
• możliwość wyświetlania obrazów w LightBox'ie;
• rozszerzona lista efektów slajdów

Dzięki temu rozszerzeniu możesz wyróżnić najnowsze lub najważniejsze treści swojego serwisu, np. najistotniejsze aspekty Twojej działalności. DJ Image Slider umożliwia wyświetlenie grafik z tytułem oraz krótkim opisem, które mogą być podlinkowane pod dowolną pozycję menu, artykuł lub dowolny adres URL.

Pokażę Ci, jak krok po kroku to zrealizować w oparciu o domyślnie zainstalowany CMS Joomla! 3.4 z użyciem opcji: Testowanie Joomla - dane przykładowe w języku angielskim (GB) oraz z domyślnym szablonem protostar.

Domyślnie witryna bez slidera prezentuje się dosyć skromnie:

Instalacja DJ Image Slider

Aby pobrać plik instalacyjny, wejdź na stronę: dj-extensions.com, następnie w menu pokaż pozycję Extensions i w sekcji FREE EXTENSIONS kliknij pozycję DJ-IMageSlider.

Pobierz DJ-ImageSlider i zapisz w dowolnej lokalizacji na swoim komputerze. Następnie zaloguj się do zaplecza swojego serwisu i zainstaluj pobrany plik. Plik instalacyjny zawiera:

• komponent DJ Image Slider;
• moduł DJ Image Slider;

Po prawidłowej instalacji zobaczysz ekran podobny do pokazanego poniżej:

Teraz komponent widoczny jest w menu Komponenty, natomiast moduły widoczne są w menadżerze modułów (menu Rozszerzenia/Moduły).

Konfiguracja komponentu DJ Image Slider

Kliknij w menu Komponenty pozycję: DJ ImageSlider, aby wyświetlić pulpit tego komponentu.

Teraz kliknij przycisk Nowa kategoria, aby utworzyć nową kategorię, do której będą przypisane slajdy.

W polu Tytuł wpisz nazwę kategorii, natomiast w polu Opis możesz opcjonalnie wpisać bardziej szczegółowe informacje dotyczące tworzonej kategorii. Na koniec kliknij przycisk Zapisz i zamknij.

Teraz kliknij w menu po lewej stronie pozycję Slajdy (lub kliknij w menu Rozszerzenia, pokaż pozycję DJ-ImageSlider i kliknij pozycję Slajdy), następnie przycisk Utwórz. Możesz także kliknąć przycisk Nowy slajd znajdujący się na Pulpicie.

W polu Tytuł wpisz tytuł slajdu, w polu Kategoria wybierz kategorię, do której ma być przypisany slajd. Obok pola Obraz kliknij przycisk Wybierz, aby przypisać plik graficzny do tworzonego slajdu. 

Pamiętaj, aby wcześniej przygotować pliki graficzne w odpowiednich rozmiarach. W moim przykładzie chciałbym, aby slider miał wielkość 700 x 300 pikseli i widoczny był nad artykułami na stronie startowej.

W polu Opis slajdu umieść krótki opis dotyczący tworzonego slajdu. Zakładam, że slajd ten będzie zachęcał do przeczytania jakiegoś artykułu. Wobec tego w polu Opis slajdu umieszczę zdanie lub dwa zachęcające do przeczytania mojego artykułu. Trzymając się moich założeń, w polu Rodzaj odnośnika wybierz listy pozycję: Artykuł, natomiast w polu Artykuł kliknij przycisk Wybierz/Zamień, a następnie w okienku modalnym kliknij tytuł wybranego artykułu.

Po dokonaniu wszystkich ustawień kliknij przycisk Zapisz i zamknij.

W podobny sposób dodaj jeszcze przy najmniej dwa slajdy! Teraz w oknie Slajdy zobaczysz listę utworzonych przez Ciebie slajdów:

Aby slajdy zdefiniowane w komponencie DJ-ImageSlider były widoczne w Twoim serwisie, musisz je umieścić w module!

Do tego celu wykorzystaj moduł DJ-ImageSlider.

Konfiguracja modułu DJ-ImageSlider

Jeżeli chcesz mieć polskojęzyczny interface modułu DJ-ImageSlider, specjalnie dla Ciebie przygotowałem jego tłumaczenie ;-)

Wystarczy, że pobierzesz plik: pl-PL.mod_djimageslider.ini i skopiujesz go do lokalizacji: folder_z_plikami_twojego_serwisu\language\pl-PL. Teraz moduł DJ-ImageSlider będzie posiadał już polskojęzyczny interface ;-).

Kliknij w menu Rozszerzenia pozycję Moduły, a następnie kliknij nazwę modułu: DJ-ImageSlider.

W polu Tytuł (1) zmień lub pozostaw nazwę modułu, w polu Pokaż tytuł (2) zdecyduj, czy chcesz, aby nazwa modułu widoczna była na stronie. W polu Pozycja (3) wybierz pozycję, w której ma pojawić się Twój slider. W przypadku domyślnego szablonu protostar, wybieram pozycję o nazwie: banner. W polu Stan (4) wybierz z listy pozycję Opublikowano.

Pora na ustawienia w sekcji DJ-ImageSlider Module. W polu: Źródło slidera (5) wybierz z listy pozycję: Komponent, aby wyświetlić slajdy utworzone za pomocą komponentuDJ-ImageSlider, natomiast w polu Typ slidera (6) wybierz typ slidera: poziomy (Poziomo), pionowy (Pionowo) lub Zanikanie (wówczas możliwe jest wyświetlanie tylko jednej grafiki na raz). W polu Szablon (7) wybierz z listy szablon (wygląd) dla tworzonego slidera. Domyślnie jest tylko jeden o nazwie: default. Możesz utworzyć własny szablon poprzez skopiowanie istniejącego szablonu i zmianę nazwy folderu default znajdującego się w lokalizacji: /modules/mod_djimageslider/themes/ lub skopiowaniu pliku djimageslider.css z domyślnego szablonu do lokalizacji: /templates/twoj_szablon/css/ i ustawienie szablonu jako - nadpisz z szablonu -. W polu Link grafiki (8) możesz zdecydować, czy grafika ma być linkiem prowadzącym do lokalizacji zdefiniowanej podczas tworzenia slajdu w komponencie DJ ImageSlider (pozycja: Hiperłącze), czy też nie (pozycja Bez hiperłącza). Możesz także ustawić pozycję Otwórz grafikę w oknie magnific/slimbox popup, aby po kliknięciu na wybranej grafice, otworzyła się ona w okienku modalnym.

Jeżeli w polu Źródło slidera wybrana została pozycja Folder, to w sekcji FOLDER JAKO ŹRÓDŁO: USTAWIENIA w polu Folder z grafiką wpisz ścieżkę dostępu do folderu z grafikami, które mają być wyświetlone przez slider. Natomiast w polu Link wpisz adres URL, który ma być otwarty po kliknięciu grafiki.

Jeżeli w polu Źródło slidera wybrana została pozycja Komponent, to przejdź do ustawień w sekcji KOMPONENT JAKO ŹRÓDŁO: USTAWIENIA. W polu Kategoria slajdów (9) wybierasz kategorię slajdów utworzoną w komponencie DJ-ImageSlider, w polu Pokaż tytuł (10), w zależności od tego, czy chcesz, aby wyświetlał się tytuł slajdu, zaznaczasz odpowiednie pole. W polu Pokaż opis (11) decydujesz, czy slider ma wyświetlać opis slajdu, natomiast w polu Pokaż 'Czytaj więcej' (12), decydujesz, czy powinien wyświetlać się link z napisem Czytaj więcej. Jeżeli chcesz zmienić tekst tego przycisku, to w polu Tekst zamiast 'Czytaj więcej' możesz wpisać własny tekst! 

Za pomocą opcji Tytuł jako link (13) definiujesz, czy tytuł slajdu ma być jednocześnie linkiem prowadzącym do lokalizacji zdefiniowanej wcześniej w komponencie DJ-ImageSlider, natomiast za pomocą opcji Opis jako link (14) decydujesz, czy także tekst opisu slajdu ma być linkiem. W polu Limit tekstu opisu możesz wpisać maksymalną liczbę znaków, jaki może mieć opis slajdu. Jest to szczególnie istotne wówczas, gdy chcesz mieć na przykład taką samą wysokość wszystkich opisów.

Przejdź teraz do ustawień w sekcji PODSTAWOWE USTAWIENIA SLIDERA.

Jeżeli chcesz, aby slider wypełniał całą szerokość kontenera (pozycji szablonu) w którym się znajduje, niezależnie od zdefiniowanej jego szerokości, to w polu Pełna szerokość slidera (15) kliknij przycisk Tak. Wówczas jedynym ograniczeniem jest szerokość kontenera w którym slider został opublikowany.

W polu Szerokość slajdu (16) ustaw szerokość slidera, natomiast w polu Wysokość slajdu (17) wpisz wysokość slidera. Za pomocą listy w polu Dopasuj rozmiar grafiki (18), decydujesz w jaki sposób grafiki mają się dopasowywać do rozmiaru slidera. Jeżeli chcesz, aby grafika w sliderze była wycentrowana w pionie, to kliknij przycisk Tak w polu Centrowanie obrazu w pionie (19). W polu Liczba widocznych grafik (20) wpisz liczbę grafik wyświetlanych jednocześnie w sliderze. Pole Odstęp między grafikami (21) służy do definiowania odstępu (w pikselach) między wyświetlanymi grafikami, natomiast w polu Max grafik (22) wpisujesz maksymalną liczbę grafik, jaka ma być załadowana razem ze sliderem. Za pomocą pola Sortowanie (23) decydujesz, w jaki sposób Twoje slajdy mają być sortowane: według nazw/kolejności (Nazwa pliku/Kolejność) lub Losowo.

W polu Użyj CSS3 (24) możesz zdecydować, czy chcesz, aby efekty przejścia slajdów generowane były za pomocą języka CSS, czy JavaScript.

Kolejne cztery pola definiują elementy nawigacyjne slidera. Za pomocą pola Autoodtwarzanie (25) możesz zdecydować, czy po wyświetleniu strony slajdy mają się automatycznie przewijać (opcja Tak), czy też nie (opcja Nie). W polu Pokaż odtwarzaj/pauza (26) definiujesz, czy na sliderze ma wyświetlać się przycisk play/pause. Domyślnie ten przycisk jest widoczny po najechaniu kursorem myszy na slider. W polu Pokaż następny/poprzedni (27) definiujesz, czy na sliderze mają wyświetlać się przyciski następny, poprzedni. Domyślnie te przyciski są widoczne po najechaniu kursorem myszy na slider. W polu Wyświetl znaczniki (kropki, numery) (28) decydujesz, czy w sliderze powinny się wyświetlać znaczniki reprezentujące poszczególne slajdy.

 

Jeżeli zdefiniujesz ustawienia podobnie jak ja (zobacz wcześniejszy rysunek) i zapiszesz zmiany, to otrzymasz efekt podobny do tego pokazanego na rysunku poniżej:

 

Jeżeli, tworzony slider ma być widoczny tylko na wybranych stronach witryny, na przykład tylko na stronie startowej, to kliknij zakładkę Przypisz do pozycji menu i w polu Zasada przypisania wybierz pozycję: Tylko na zaznaczonych stronach, następnie zaznacz kartę reprezentującą Twoje menu - w moim przykładzie będzie to karta z menu głównym: Main Menu i kliknij pole wyboru przy pozycji, która reprezentuje stronę startową - w moim przykładzie, to: Home.

W module DJ-ImageSlider masz jeszcze do dyspozycji zakładkę Dostosuj Slider udostępniającą opcje, a pomocą których możesz ustawić dodatkowe elementy slidera znajdujące się w trzech sekcjach:

• DOSTOSUJ OPCJE SLAJDU
  • Szerokość opisu - szerokość pola z opisem slajdu;
  • Pozycja opisu w pionie - pozycja pola z opisem w pikselach (od dolnej krawędzi grafiki);
  • Pozycja opisu w poziomie - pozycja pola z opisem w pikselach (od lewej krawędzi grafiki);
• DOSTOSUJ PRZYCISKI
  • Przycisk Poprzedni - ścieżka do własnej grafiki reprezentującej przycisk Poprzedni;
  • Przycisk Następny - ścieżka do własnej grafiki reprezentującej przycisk Następny;
  • Przycisk Odtwarzaj - ścieżka do własnej grafiki reprezentującej przycisk Odtwarzaj;
  • Przycisk Pauza - ścieżka do własnej grafiki reprezentującej przycisk Pauza;
  • Pozycja paska nawigacyjnego w pionie - pozycja przycisków nawigacyjnych slidera (w pikselach) względem górnej krawędzi grafiki;
  • Pozycja paska nawigacyjnego w poziomie - pozycja przycisków nawigacyjnych slidera (w pikselach) względem bocznych krawędzi slidera. Możesz użyć ujemnych wartości, aby przyciski nawigacyjne znalazły się na zewnątrz slidera;
  • Style znaczników - możesz wybrać, czy znaczniki reprezentujące poszczególne slajdy mają być przedstawiane w postaci kropek, czy też numerów;
• OPCJE EFEKTÓW SLAJDU
  • Efekt slajdu służy do definiowania efektów przejścia między slajdami.
  • Typ efektu slajdu;
  • Czas wyświetlania slajdu - długość wyświetlania slajdu (w milisekundach);
  • Opóźnienie między slajdami - długość trwania przerwy między slajdami (w milisekundach);
  • Czas opóźnienia ładownia slajdu;

Zmiana kilku ustawień znajdujących się w tej zakładce może spowodować, że slider będzie wyglądał nieco inaczej. Zmieniłem tylko szerokość opisu, pliki graficzne przycisków nawigacyjnych i pozycję paska nawigacyjnego:

A teraz zobacz, jak prezentuje się slider po wprowadzonych zmianach:

A teraz zobacz, ten sam slider w różnych konfiguracjach:

Prawda, że jak na darmowe narzędzie, to DJ-IMageSlider ma spore możliwości?

Jeżeli to Ci nie wystarcza, to jeszcze większe możliwości znajdziesz w komercyjnym rozszerzeniu DJ-MediaTools, które umożliwia tworzenie sliderów i galerii pobierając dane z artykułów, folderów, Youtube, Vimeo i innych komponentów, takich jak np. K2, DJ-Classifirlds, DJ-Catalog czy Virtuemart.

 

Chcesz otrzymywać powiadomienia o moich kolejnych wpisach lub projektach?

Zapisz się do newslettera!