A A A

Darmowy slider na Twoją stronę - DJ-ImageSlider

przez w Webdesign
  • Przeczytano: 9765
  • 12 komentarze
  • Drukuj
9765
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.

Instalacja Joomla! 3.4 z danymi testowymi

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

Wygląd serwisu Joomla! 3.4 z domyślnym szablonem oraz przykładowymi danymi

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.

Menu Extensions w serwisie DJ-Extensions

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:

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.

Wygląd pulpitu 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 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.

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

Tworzenie pierwszego 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 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 ;-)

{loadposition djimageslider}

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.

 Ustawienia slidera w module DJ-ImageSlider

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 witryny ze sliderem DJ-ImageSlider

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.

Przypisywanie do wybranej pozycji menu modułu DJ-ImageSlider

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:

Zmiana ustawień w zakładce Dostosuj Slider modułu DJ-ImageSlider

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

Wygląd slidera po wprowadzonych zmianach w zakładce Dostosuj Slider

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

Wygląd witryny ze slajderami 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?

Oceń ten wpis:

Nauczyciel przedmiotów informatycznych w szkole ponadgimnazjalnej.


Pierwszy Certyfikowany Administrator Joomla! w Polsce.


Autor książek i e-booków na temat Joomla!. Autor bloga: www.slawop.net, w którym porusza zagadnienia związane z CMS Joomla! i wykorzystaniu go, jako fantastycznego narzędzia, które ułatwia innym tworzenie ich własnego miejsca w sieci.


Prowadzi własną firmę świadczącą usługi związane z tworzeniem oraz administrowaniem serwisów opartych o CMS Joomla!


Współorganizator Joomla! User Group Jawor


Uwielbia ekstremalnie szybką jazdę na rolkach! Fan rozwoju osobistego i ciągłych zmian :-)


I love Joomla! Why?


Because Joomla! is Doing Great Things with Great People :-)


And My favourite sentence:



Don't Let Anybody Steal Your Dreams!


Komentarze

  • Gość
    Anna wtorek, 19 grudzień 2017

    Jak moge ustawic marginesy w opisie slajdu bo nie chce zeby tekst zaczynal sie zaraz z brzegu i konczyl na koncu slajdu.

  • Gość
    Krzysztof poniedziałek, 12 wrzesień 2016

    Z licencji tego modułu wynika, że mozna go uzywać do stron komercyjnych. Czy dobrze zrozumiałem zapis licencyjny?

  • Sławomir Pieszczek
    Sławomir Pieszczek poniedziałek, 12 wrzesień 2016

    Krzysztof, nie jestem prawnikiem i nie traktuj mojej odpowiedzi, jako pewnik!
    Rozszerzenie rozprowadzane jest na licencji GNU GPL v.2, więc ja uważam, że możesz używać go, gdzie tylko chcesz ;-)

    Pozdrawiam :-)

  • Gość
    Rydzu czwartek, 26 maj 2016

    niestety komponent nie instaluje się w przypadku bazy MSSQL. :(

  • Sławomir Pieszczek
    Sławomir Pieszczek piątek, 03 czerwiec 2016

    Rydzu, chodzi Ci o Microsoft SQL Server?
    Na tym nie chodzi w ogóle Joomla! CHYBA ;-)
    Pozdrawiam :-)

  • Gość
    Krzysiek piątek, 15 styczeń 2016

    ok znalazłem :)

  • Gość
    Krzysiek piątek, 15 styczeń 2016

    Mam pytanko, jak pozbyć się tytułu przy wyświetlaniu slidera

  • Gość
    Franciszek sobota, 10 październik 2015

    Zainstalowałem zgodnie z powyższą instrukcją DJ-ImageSlider wersja 3.0.4 (przedtem miałem wersję 2.2.3. Zdeinstalowałem ją i zainstalowałem nowszą).
    Problem - nie działa Slider. Zamiast przewijania się w poziomie 4 zdjęć, zdjęcia są ułożone jedno pod drugim. Zmiana efektów przewijania nie pomaga.
    Wszystko mi działało na Joomla 3.4.3 i DJ-ImageSlider 2.2.3.
    Po aktualizacji na Jommla 3.4.4 i DJ-ImageSlider wersja 3.0.4 slider nie działa.

  • Gość
    Sergiusz środa, 29 lipiec 2015

    Pięknie. Po co pisać o możliwości pobrania spolszczenia gdy takiego spolszczenia nie ma

  • Sławomir Pieszczek
    Sławomir Pieszczek środa, 29 lipiec 2015

    Sergiusz,
    Aby pobrać spolszczenie wystarczy udostępnić info o tym artykule w jednym z wybranych kanałach social media: Facebook, Twitter lub Google+. Dopiero wówczas odsłonie się przycisk i link umożliwiający pobranie pliku :-)
    Poza tym niebawem producent DJ-ImageSlider dołączy go także w swoim serwisie.

  • Gość
    Paweł środa, 29 lipiec 2015

    Artykuł bardzo ciekawy, opis szczegółowy. Właśnie takiego dodatku brakowało mi na stronę. Niestety jeśli w artykule mam dołączone rozszerzenie sigplus to wyrzuca mi błąd: Błąd krytyczny rozszerzenia [sigplus]: Dla folderu galerii obrazów galeria/2015/cos_tam/18_cos_tam oczekiwana jest względna ścieżka do folderu startowego określonego w konfiguracji rozszerzenia w zapleczu systemu Joomla!.

    Odpowiedz Anuluj
  • Sławomir Pieszczek
    Sławomir Pieszczek środa, 29 lipiec 2015

    Paweł,

    Cieszę się, że artykuł uważasz za przydatny :-)
    Jeżeli chodzi o problem z galerią, to komunikat wskazuje na problem że ścieżka dostępu do grafik. Sprawdź może te ustawienia.
    Jeżeli nadal będą problemy, to pisz do DJ-Extensions.com korzystając z formularza kontaktowego. Pisz w języku polskim, bo to polska firma ;-)

Zostaw komentarz

Gość
Gość poniedziałek, 17 grudzień 2018

Najnowsze komentarze

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ć???

Joanna

Dziękuje za ten wpis joomla zawsze była dla mnie problematyczna :)

Informatyk

co robić? Zdjęcia wyświetlają się pionowo, jedno pod drugim. Żadna zmiana w opcjach, nic nie daje??? Pomożecie?

Sławomir
05.11.2018 w DJ Image Slider

Właśnie, powinien się pojawić … . Oczywiście skorzystam z rady i zapytam u źródeł. Jeśli dowiem się czegoś mądrego, podzielę się wiedzą, może komuś się przyda. Dziękuję, pozdrawiam, Andrzej

Andrzej
Andrzeju, jeżeli w Ustawieniach podstawowych w zakładce Narzędzia na stronie w polu Powrót do góry masz aktywny przycisk Włączone, to taki przycisk powinien pojawić się u Ciebie na stronie już po prze...