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

 

Komentarze 27

Gość - Robert. (website) w poniedziałek, 01 lipiec 2013 16:51

Witaj
nie zadziałał tak jak napisałeś dopiero wrzucenie go do katalogu gdzie był moduł i zmianie en-GB wtedy pojawiło się polskie tłumaczenie.
Plik wrzucałem w główny katalog language na stronie i nie zadziałało

Witaj nie zadziałał tak jak napisałeś dopiero wrzucenie go do katalogu gdzie był moduł i zmianie en-GB wtedy pojawiło się polskie tłumaczenie. Plik wrzucałem w główny katalog language na stronie i nie zadziałało
Gość - Robert (website) w wtorek, 09 lipiec 2013 21:58

tak jak się gapowe łapie i nie widzi, że program przesyłający zmienił na pl-pl a nie jak powinno być pl-PL to tak się ma :-). Sorry tłumaczenie działa.

tak jak się gapowe łapie i nie widzi, że program przesyłający zmienił na pl-pl a nie jak powinno być pl-PL to tak się ma :-). Sorry tłumaczenie działa.
Gość - Robert w wtorek, 13 sierpień 2013 11:41

A czy możliwe jest wstawienie innych obrazków dla różnych wersji językowych ?

A czy możliwe jest wstawienie innych obrazków dla różnych wersji językowych ?
Sławomir Pieszczek (website) w wtorek, 13 sierpień 2013 19:28

Oczywiście :-)
Wystarczy, że utworzysz nową kategorię i przypiszesz jej język, następnie utworzysz nowy moduł i przypiszesz mu język oraz utworzoną wcześniej kategorię ;-)

Oczywiście :-) Wystarczy, że utworzysz nową kategorię i przypiszesz jej język, następnie utworzysz nowy moduł i przypiszesz mu język oraz utworzoną wcześniej kategorię ;-)
Gość - A w poniedziałek, 16 wrzesień 2013 15:08

Moim zdaniem ten moduł w ogóle nie nadaje się do wyświetlania na urządzenia mobilne. Oczywiście można tak zmienić kod klas css, aby miało to wygląd na smartfonie.

Moim zdaniem ten moduł w ogóle nie nadaje się do wyświetlania na urządzenia mobilne. Oczywiście można tak zmienić kod klas css, aby miało to wygląd na smartfonie.
Gość
poniedziałek, 15 lipiec 2019

Zdjęcie captcha

Najnowsze komentarze

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...
Gość - Joanna Jak utworzyć własny szablon dla Joomla! nie dotykając kodu? EF4 cz.2
09 grudzień 2018
Czy jest jakaś możliwość, żeby zmienić układ top-bar i tej linii, w której jest logo? Tam niby są flexibloki ale nie można zmienić ich szerokości, a tego potrzebuję bardzo. Jak tego dokonać???
Gość - Informatyk Tworzenie bazy danych w CPanelu na Smarthost - instalacja Joomla!
19 listopad 2018
Dziękuje za ten wpis joomla zawsze była dla mnie problematyczna
Gość - Sławomir DJ Image Slider
04 listopad 2018
co robić? Zdjęcia wyświetlają się pionowo, jedno pod drugim. Żadna zmiana w opcjach, nic nie daje??? Pomożecie?