Skip to main content

DJ-Image-Slider - jak zarządzać? Ustawienia i konfiguracja

DJ-Image-Slider to dodatek do Joomla składający się z komponentu, modułu oraz opcjonalnie z modułu DJ-Image-Tabber. Jak już sama nazwa wskazuje DJ-Image-Slider to rozszerzenie umożliwiające wyświetlanie obrazków oraz ich opisów w formie efektownych slajdów. Z kolei moduł DJ-Image-Tabber pozwala dodatkowo stworzyć zakładki wraz z tytułami, które służą do nawigacji pomiędzy poszczególnymi slajdami.

Istnieją trzy sposoby prezentacji slajdów:

  1. Za pomocą komponentu i modułu DJ-Image-Slider
  2. Za pomocą samego modułu DJ-Image-Slider
  3. Za pomocą komponentu i modułu DJ-Image-Tabber

Instalacja

Instalacji dodatku dokonujemy poprzez instalator dostępny w zapleczu administracyjnym witryny.

Nie wiesz jak zainstalować rozszerzenie Joomla?
Przeczytaj ten artykuł: Jak zainstalować komponent, moduł lub plugin do Joomla?

Zawsze najświeższe wersje naszych dodatków Joomla znajdziesz na DJ-Extensions.

1) Wyświetlanie slajdów za pomocą komponentu i modułu DJ-Image-Slider

To połączenie pozwoli na wyświetlenie obrazków wraz z opisami i tytułami. Każdy slajd możesz dowolnie podlinkować do artykułu, pozycji menu, adresu URL, a nawet do produktu VirtueMart lub DJ-Catalog2.

Zobacz przykład w szablonie JM-City.

Konfiguracja komponentu DJ-Image-Slider

Pierwszy krok to ustawienie ścieżki dostępu do folderu na serwerze, gdzie będą znajdować się obrazki. W tym celu przejdź do Komponenty->DJ-Image-Slider->Slides->Parameters – domyślny folder to „images/stories/”, który znajduje się w głównym katalogu instalacji Joomla.

Następny krok to stworzenie kategorii, do której będą przypisywane slajdy.
Aby stworzyć kategorię przejdź do „Categories” i kliknij „New”.

dj-image-slider-category

  • Title - wpisz tytuł kategorii
  • Alias - wpisz alternatywny tytuł kategorii
  • Published - wybierz tak/nie jeżeli chcesz opublikować kategorię lub nie
  • Category Order - wybierz kolejność wyświetlania kategorii (najpierw trzeba zapisać kategorię, aby ta opcja była dostępna)
  • Description - wpisz opis dla kategorii (opcjonalnie)

Kolejny krok to stworzenie slajdu. Przejdź do „Slides” i kliknij „New”

dj-image-slider-slide

  • Title - wpisz tytuł slajdu
  • Alias - wpisz alternatywny tytuł slajdu
  • Published - wybierz tak/nie jeżeli chcesz opublikować slajd lub nie
  • Category - wybierz kategorię slajdu
  • Order - wybierz kolejność wyświetlania slajdu (najpierw trzeba zapisać kategorię, aby ta opcja była dostępna)
  • Image - wybierz obrazek dla slajdu (wcześniej wyślij obrazki do folderu wybranego w „Parameters”)
  • Target type - wybierz dokąd ma linkować slajd (pozycja menu, adres URL, artykuł, produkt VirtueMart, produkt DJ-Catalog2)
  • Description - wpisz opis slajdu

Konfiguracja modułu DJ-Image-Slider

Do wyświetlenia slajdów niezbędny jest moduł DJ-Image-Slider. Przejdź do Rozszerzenia->Moduły i wybierz moduł DJ-Image-Slider.

dj-image-slider-param

  • Slider source - wybierz czy obrazki mają być zaciągnięte z określonego folderu czy z komponentu DJ-Image-Slider

    Ważne:
    Moduł umożliwia również wyświetlanie obrazków bez konieczności linkowania slajdów. Jeżeli chcemy skorzystać z tej opcji to wybieramy powyżej folder, a w ustawieniu „Image folder” podajemy ścieżkę do folderu. W tym wypadku nie musimy tworzyć slajdów w komponencie, gdyż do ich wyświetlenia wystarczy sam moduł.

  • Slider type - wyświetl obrazki wertykalnie, horyzontalnie lub z efektem „fade” (efekt „fade” umożliwia wyświetlania naraz tylko jednego obrazka)
  • MooTools version - wybierz wersję obsługiwanej biblioteki MooTools, zalecane ustawienie „auto”, gdyż system sam wybierze odpowiednie ustawienie
  • Link image - wybierz czy po kliknięciu w slajd, zdjęcie ma się otworzyć w okienku „modal”, czy ma bezpośrednio przenieść do podlinkowanej strony lub wyłącz linkowanie w ogóle

FOLDER AS A SOURCE: SETTINGS - źródło folder

  • Image folder - podaj ścieżkę do folderu z obrazkami np. images/stories/slides (ścieżkę podajemy, jeżeli w opcji „Slide source” zaznaczyliśmy folder)
  • Link - podaj adres URL do którego mają być podlinkowane zdjęcia

COMPONENT AS A SOURCE: SETTINGS - źródło komponent

  • Slides category - wybierz, którą kategorię wyświetlić
  • Show title - pokaż lub ukryj tytuł slajdu
  • Show description - pokaż lub ukryj opis slajdu
  • Show readmore - pokaż lub ukryj link „Readmore”
  • Link title - podlinkuj tytuł slajdu
  • Link description - podlinkuj opis slajdu
  • Description limit - określ limit opisu wpisując maksymalną liczbę liter, które mają się wyświetlić

BASIC SLIDER SETTINGS - podstawowe ustawienia slajdów

  • Slide width - szerokość slajdu w pikselach
  • Slide height - wysokość slajdu w pikselach
  • Fit a size of image to - dopasuj slajd względem wysokości lub szerokości, ustawienie „auto” spowoduje wybór dłuższego boku
  • Visible images - liczba wyświetlanych obrazków jednocześnie
  • Space between images - odstęp między obrazkami w pikselach
  • Max images - podaj maksymalną liczbę slajdów, które mają zostać załadowane
  • Sort by - sortuj slajdy wg nazw (folder), kolejności (komponent) lub losowo
  • Slide effect - wybierz efekt przejścia. Więcej informacji tutaj: http://docs111.mootools.net/Effects/Fx-Transitions.js
  • Autoplay - wybierz „Yes” jeżeli slajdy mają przewijać się automatycznie po załadowaniu
  • Show play/pause - pokaż, ukryj lub pokaż po najechaniu kursorem przycisk start/stop
  • Show next/prev - pokaż, ukryj lub pokaż po najechaniu kursorem przycisk następny/poprzedni, aby przejść do następnego/poprzedniego slajdu
  • Show custom navigation - pokaż nawigację tak/nie

W module znajduje się kolejna zakładka z opcjami zaawansowanymi - „Advanced Parameters”.

dj-image-slider-advan

  • Description width - wpisz szerokość ramki z opisem slajdu
  • Description vertical position - określ pozycję ramki z opisem, w pikselach od dolnej krawędzi obrazka
  • Description horizontal position - określ pozycję ramki z opisem, w pikselach od lewej krawędzi obrazka
  • Prev button - podaj ścieżkę do obrazka, który pełni funkcję przełączenia do poprzedniego slajdu (np. images/stories/prev.png) lub pozostaw puste, aby był to domyślny obrazek
  • Next button - podaj ścieżkę do obrazka, który pełni funkcję przełączenia do następnego slajdu (np. images/stories/next.png) lub pozostaw puste, aby był to domyślny obrazek
  • Play button - podaj ścieżkę do obrazka „Play” (np. images/stories/play.png) lub pozostaw puste, aby był to domyślny obrazek
  • Pause button - podaj ścieżkę do obrazka „Pause” (np. images/stories/pause.png) lub pozostaw puste, aby był to domyślny obrazek
  • Navigation bar vertical position - określ pozycję nawigacji w pikselach względem górnej krawędzi obrazka
  • Navigation bar horizontal position - określ pozycję nawigacji w pikselach względem bocznych krawędzi obrazka
  • Slide effect type - wybierz typ efektu dla slajdu lub pozostaw „auto”, aby system wybrał odpowiednie ustawienie
  • Slide duration - długość wyświetlania slajdu w milisekundach
  • Next slide delay - długość przerwy pomiędzy slajdami w milisekundach
  • Preload delay time - czas ładowania slajdu

Pamiętaj, aby opublikować moduł na wybranej pozycji.

2) Wyświetlanie slajdów tylko za pomocą modułu DJ-Image-Slider

Nie potrzebujesz tytułów i opisów, a chcesz wyświetlić tylko obrazki? Wystarczy do tego moduł DJ-Image-Slider. Ustaw "Folder" dla opcji "Slider source" i podaj ścieżkę do katalogu z obrazkami na serwerze. Opis pozostałych parametrów modułu znajdziesz powyżej.

Zobacz przykład wykorzystania modułu w szablonie DJ-Old-Hotel (moduł z trzema zdjęciami w lewej kolumnie).

3) Wyświetlanie slajdów za pomocą komponentu DJ-Image-Slider oraz modułu DJ-Image-Tabber

DJ-Image-Tabber to kolejny moduł, który działa wraz z komponentem DJ-Image-Slider. Jego zaletą jest możliwość wyświetlenia tytułów w zakładkach, które pełnią funkcję nawigacji pomiędzy poszczególnymi slajdami.

Zobacz przykład wykorzystania modułu w szablonie JM-Royal-Beauty-Salon.

Konfiguracja komponentu DJ-Image-Slider

Opis konfiguracji znajduje się w pierwszym punkcie poradnika.

Konfiguracja modułu DJ-Image-Tabber

Przejdź do Rozszerzenia->Moduły i wybierz moduł DJ-Image-Tabber.

dj-image-tabber-param

  • Slides category - wybierz, którą kategorię wyświetlić
  • Show title - pokaż lub ukryj tytuł slajdu
  • Show description - pokaż lub ukryj opis slajdu
  • Link title - podlinkuj tytuł slajdu
  • Show readmore - pokaż lub ukryj link „Readmore”
  • Description limit - określ limit opisu wpisując maksymalną liczbę liter, które mają się wyświetlić
  • Image width - szerokość obrazka w pikselach
  • Image height - wysokość obrazka w pikselach
  • Tab width - szerokość zakładki w pikselach
  • Tab height - wysokość zakładki w pikselach
  • Sort by - sortuj slajdy wg nazw, kolejności lub losowo
  • Autoplay - wybierz „Yes” jeżeli slajdy mają przewijać się automatycznie po załadowaniu

W module znajduje się kolejna zakładka z opcjami zaawansowanymi - „Advanced Parameters”.

dj-image-tabber-advan

  • Slide effect - wybierz typ efektu dla slajdu lub pozostaw „auto”, aby system wybrał odpowiednie ustawienie
  • Slide duration - długość wyświetlania slajdu w milisekundach
  • Next slide delay - długość przerwy pomiędzy slajdami w milisekundach

Pamiętaj, aby opublikować moduł na wybranej pozycji.

 

Zobacz szablony w naszej ofercie, które korzystają z dodatku DJ-Image-Slider.