DJ Image Slider
Chcesz umieścić w swoim serwisie tzw. slider wyświetlający pliki graficzne oraz ich opisy w formie efektownych slajdów? Zobacz jak krok po kroku to zrealizować za pomocą rozszerzenia DJ Image Slider.
Dzięki takiemu rozwiązaniu możesz wyróżnić najnowsze treści lub treści z Twojego punktu widzenia najistotniejsze, np. najistotniejsze aspekty Twojej działalności.
Rozszerzenie 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.
Przykłady pokażę Ci w oparciu o domyślnie zainstalowany CMS Joomla! 2.5 z użyciem przycisku Załaduj przykładowe dane oraz z domyślnym szablonem Beez2.
Instalacja DJ Image Slider
Aby pobrać plik instalacyjny, musisz się zarejestrować w serwisie: dj-extensions.com. Po rejestracji pobierz DJ Image Slider (dj-extensions.com/downloads) 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;
- moduł DJ Image Scroller;
W dniu pisania tego tekstu dostępna była wersja 2.1.0: pkg_dj-imageslider-AIO-2.1.0.zip. Przy czym domyślnie instalator nie instaluje modułu DJ Image Scroller. 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 zakładkę 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 tronie 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 móc wyświetlać slajdy zdefiniowane przez Ciebie w komponencie DJ Image Slider, niezbędny jest moduł DJ-IMageSlider.
Ok, teraz skonfiguruj moduł DJ ImageSlider.
Konfiguracja modułu DJ Image Slider
Kliknij w menu Rozszerzenia pozycję Moduły, a następnie kliknij nazwę modułu: DJ-ImageSlider.
W sekcji Szczegóły, w polu Pozycja kliknij przycisk Wybierz pozycję, a następnie w okienku modalnym wybierz pozycję, w której ma pojawić się Twój slider. W przypadku domyślnego szablonu Beez2 wybieram pozycję o nazwie: position-12. W polu Status wybierz z listy pozycję Opublikowano.
Zakładam, że tworzony slider będzie wyświetlany tylko na stronie startowej. Wobec tego w sekcji Przypisz do pozycji menu, 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.Pora na ustawienia w sekcji Opcje podstawowe. W polu: Slider source wybierz z listy pozycję: Component, natomiast w polu Slider type wybierz typ slidera: poziomy (Horizontal), pionowy (Vertical) lub Fade (wówczas możliwe jest wyświetlanie tylko jednej grafiki na raz). W polu Link image możesz zdecydować, czy grafika ma być linkiem prowadzącym do lokalizacji zdefiniowanej podczas tworzenia slajdu w komponencie DJ ImageSlider (pozycja: Hyperlink), czy też nie (pozycja Don't link). Możesz także ustawić pozycję Open image in modal, aby po kliknięciu na wybranej grafice, otworzyła się ona w okienku modalnym.
W polu Slides category wybierasz kategorię slajdów utworzoną w komponencie DJ Image Slider, w polu Show Title, w zależności od tego, czy chcesz, aby wyświetlał się tytuł slajdu, zaznaczasz odpowiednie pole. W polu Show description decydujesz, czy slider ma wyświetlać opis slajdu, natomiast w polu Readmore text, decydujesz, czy powinien wyświetlać się link z napisem Czytaj więcej. Jeżeli chcesz zmienić tekst tego przycisku, to w polu Readmore text możesz wpisać własny tekst!
Za pomocą opcji Link title definiujesz, czy tytuł slajdu ma być jednocześnie linkiem prowadzącym do lokalizacji zdefiniowanej wcześniej w komponencie DJ ImageSlider, natomiast za pomocą opcji Link description decydujesz, czy także tekst opisu slajdu ma być linkiem. W polu Description limit 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ą taką samą wysokość wszystkich opisów.
W polu Slide Width ustaw szerokość slidera, natomiast w polu Slide Height wpisz wysokość slidera. Za pomocą listy w polu Fit a size of image to, decydujesz w jaki sposób grafiki mają się dopasowywać do rozmiaru slidera. W polu Visible Images wpisz liczbę grafik wyświetlanych jednocześnie w sliderze. Pole Space between images służy do definiowania odstępu między grafikami, natomiast w polu Max images wpisujesz maksymalną liczbę grafik, jaka ma być załadowana razem ze sliderem. Za pomocą pola Sort by decydujesz, w jaki sposób Twoje slajdy mają być sortowane: według nazw/kolejności (File name/Ordering) lub losowo (Randomise). Pole Slide effect służy do definiowania efektów przejścia między slajdami.
Kolejne cztery pola definiują elementy nawigacyjne slidera. Za pomocą pola Autoplay możesz zdecydować, czy po wyświetleniu strony slajdy mają się automatycznie przewijać (opcja Tak), czy też nie (opcja Nie). W polu Show play/pause 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 Show next/prev definiujesz, czy na sliderze mają wyświetlać się przyciski nex i prev (następny, poprzedni). Domyślnie te przyciski są widoczne po najechaniu kursorem myszy na slider. W polu Show custom navigation 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:
W module DJ-ImageSlider masz jeszcze do dyspozycji sekcję Opcje rozszerzone. Możesz za ich pomocą ustawić następujące elementy:
- Description width - szerokość pola z opisem slajdu;
- Description vertical position - pozycja pola z opisem w pikselach (od dolnej krawędzi grafiki);
- Description horizontal position - pozycja pola z opisem w pikselach (od lewej krawędzi grafiki);
- Prev Button - ścieżka do własnej grafiki reprezentującej przycisk Prev;
- Next Button - ścieżka do własnej grafiki reprezentującej przycisk Next;
- Play Button - ścieżka do własnej grafiki reprezentującej przycisk Play;
- Pause Button - ścieżka do własnej grafiki reprezentującej przycisk Pause;
- Navigation bar vertical position - pozycja przycisków nawigacyjnych slidera (w pikselach) względem górnej krawędzi grafiki;
- Navigation bar horizontal position - 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.;
- Slide effect type - typ efektu dla slajdu;
- Slide transition time - długość wyświetlania slajdu (w milisekundach);
- Next slide delay - długość trwania przerwy między slajdami (w milisekundach);
- Preload delay time - czas ładowania slajdu;
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 po kliknięciu w nazwę modułu: DJ-ImageSlider w menu Rozszerzenia/Moduły masz już polskojęzyczny interface ;-).
Chcesz otrzymywać powiadomienia o moich kolejnych wpisach lub projektach?
Wpisz swoje imię oraz adres e-mail a następnie kliknij "ZAPISZ MNIE"
Podobne wpisy
By accepting you will be accessing a service provided by a third-party external to https://www.slawop.net/