DJ Image Slider

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.

Serwis Joomla! 2.5 z domyślnym szablonem oraz przykładowymi danymi

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:

Komunikat informujący o prawidłowym zainstalowaniu DJ Image Slider

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.

Pulpit komponentu DJ ImageSlider

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

Tworzenie nowej kategorii w komponencie DJ ImageSlider

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.

Tworzenie nowego slajdu w komponencie DJ ImageSlider

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.

Tworzenie nowego slajdu w komponencie DJ ImageSlider

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:

Lista utworzonych slajdów w oknie Slajdy

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.

 Konfiguracja 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:

Wygląd slidera na stronie startowej 

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 ;-).

Polskojęzyczny interface modułu DJ ImageSlider

 

Chcesz otrzymywać powiadomienia o moich kolejnych wpisach lub projektach?
Wpisz swoje imię oraz adres e-mail a następnie kliknij "ZAPISZ MNIE"

Twoje imię:


Adres email:


Joomla!Day Poland - najważniejsze wydarzenie tego ...
Nowe wydanie Joomla! 2.5.11

Podobne wpisy

 

    By accepting you will be accessing a service provided by a third-party external to https://www.slawop.net/

    Najnowsze komentarze

    Gość - Studio Jak wybrać hosting dla Joomla!?
    13 wrzesień 2019
    Warto jeszcze dopisać punkt, żeby przy wyborze wybrać panel między DirectAdmin/cPanel. Niektóre hostingi mają swoje własne rozwiązania - czasami bardzo specyficzne, co niekoniecznie jest dobrą rzeczą
    Gość - Marek Szyfrowanie symetryczne a niesymetryczne
    09 czerwiec 2019
    "Klucz przekazany do publicznej wiadomości, nazywany jest kluczem publicznym lub jawnym. Może on być stosowany do szyfrowania lub deszyfrowania informacji otrzymanych od osoby, która go wygenerowała. ...
    Gość - Marek Tworzenie szablonów dla Joomla! Helix Ultimate
    10 maj 2019
    Witam, napotkałem problem pojawiający się przy zmianie kolorów tła czy czcionek oraz importowaniem ustawień. W pierwszym przypadku, po zmianie kolorów i ich zapisaniem, panel podglądu strony przeładow...
    Gość - Andy SSL i Joomla! w Smarthost
    03 styczeń 2019
    Dzięki, jak zwykle dobra robota! Warto dodać, że instalacja certyfikatu SSL nie zapewnia bezpieczeństwa transmisji danych. To jest możliwe po wdrożeniu polityki bezpieczeństwa w firmie. Co do SSL - to...
    Gość - Henryk Jak utworzyć menu poziome w szablonie protostar?
    02 styczeń 2019
    Robię punkt po punkcie i nie wyświetla się poziome menu Nie wiem gdzie tkwi błąd i co robię źle?Jeśli to możliwe to proszę o pomocps. posiadam książkę "Joomla! 3x" i tu również niema pomocy Pozdrawiam...