Karuzela obrazów Modx na stronie produktu. duży i przerażający

Witaj społeczności!

W tej notatce dowiesz się, czym są karty Multiple Formtabs i jak utworzyć konfigurację z innym zestawem danych. I oczywiście stworzymy z Tobą slider, który będzie miał różne rodzaje slajdów, a na końcu znajdziesz bardzo ciekawa historia którego nie odważyłem się nikomu powiedzieć przez długi czas (chyba że jesteś zainteresowany, ale historia jest ciekawa - uwierz mi). I tak przykłady slajdów:

• Zdjęcie w tle
• Tło wideo
• jednolity kolor tła

Uwaga! Tym razem nie usuwajcie z ekranów dzieci i kobiet w ciąży, bo to jest jakaś dyskryminacja ze względu na wiek i płeć!

Tak będzie

Kolejna zapowiedź! Często będę się odwoływał do pierwszej lekcji, aby się nie powtarzać, dlatego gorąco polecam zapoznać się z

Po co?

Wyobraźmy sobie: dostajesz projekt, w którym na przykład na stronie głównej znajduje się suwak z kilkoma rodzajami slajdów, jeden ma tło wideo, inny ma zdjęcie, a trzeci ma na przykład jednolity kolor. Nie stworzysz jednego zestawu pól (jednej konfiguracji) i nie wepchniesz (przepraszam za leksykon) wszystkich tych pól i powiesz menedżerowi, jak z tym żyć i być. Nie jest poważne podejście!? (mam nadzieję, że ktoś zrozumie)

Dla sprawy

Zrozumieliśmy z tobą „dlaczego”, teraz dowiedzmy się „jak”. Jeśli przeczytałeś już pierwszą lekcję, musimy przejść do strony komponentów MIGX i stworzyć 3 konfiguracje. Wstępnie zainstaluj ColorPicker firmy Jako (ale to nie ma znaczenia):

Wszystko, co nie jest przeze mnie wskazane, pomiń!

solidna konfiguracja (jednolity kolor)

• patka Ustawienia
  • Nazwa- solidny
  • Dodaj nową kategorię- Suwak
• patka Tabele formatów
  • Pola Pola utwórz 3 pola
    1. Kolor tła:
       • Nazwa pola-bgkolor
       • Podpis- Wybierz kolor tła
       • Wejście typu telewizora- ColorPicker (lub ten, który ty
         posługiwać się)
    2. Tytuł:
       • Nazwa pola nagłówek
       • Podpis- Tytuł slajdu
    3. Opis:
       • Nazwa pola- opis
       • Podpis- Opis slajdu
       • Wejście typu telewizora-obszar tekstowy
  • Pole wielu formatek-rodzaj( Podana wartość będzie nazwą klucza w
    tablica wyjściowa. Domyślnie: MIGX_nazwa formularza)
  • - Z jednolitym kolorem w tle (Tekst
    ta konfiguracja na liście wyboru)
  • - stałe (Wartość pola tego samego typu
    w tablicy)

konfiguracja wideo

• patka Ustawienia
  • Nazwa- wideo
  • Kategoria- Suwak
• patka Tabele formatów
  • Pola- Utwórz 1 zakładkę i w polu Pola ponownie tworzymy 3 pola, tylko jedno z nich jest innego typu.

    Powinienem tutaj wyjaśnić, że ilość pól i ich rodzaje w różnych konfiguracjach mogą być tak różne, jak ograniczona jest Twoja wyobraźnia... Ale wiem, że wszystko jest w porządku z Twoimi fantazjami?

    1. Wideo (tj. plik):
       • Nazwa pola- wideo
       • Podpis- Prześlij wideo
       • Wejście typu telewizora- plik
    2. Tytuł:
       • Nazwa pola nagłówek
       • Podpis- Tytuł slajdu
    3. Opis:
       • Nazwa pola- opis
       • Podpis- Opis slajdu
       • Wejście typu telewizora-obszar tekstowy
  • Pole wielu formatek- rodzaj
  • Tekst opcji wielu formatek- Z wideo w tle
  • Wiele formatów Opcje wartość- wideo

konfiguracja suwaka

Domyślnie zaakceptuje obraz i będzie rodzajem głównej konfiguracji.

• patka Ustawienia
  • Nazwa- suwak
  • Kategoria- Suwak
  • Zastąp „Dodaj element”- Dodaj slajd
  • Podpis formularza
  • tytuł okna- Dodaj/edytuj slajd
• patka Tabele formatów
  • Pola- Utwórz 1 zakładkę i w polu Pola ponownie utwórz 3 pola
    1. Obraz:
       • Nazwa pola- obraz
       • Podpis- Prześlij obraz
       • Wejście typu telewizora- obraz
       • Określ źródło plików, których potrzebujesz, opisałem to zadanie w pierwszej lekcji
    2. Tytuł:
       • Nazwa pola nagłówek
       • Podpis- Tytuł slajdu
    3. Opis:
       • Nazwa pola- opis
       • Podpis- Opis slajdu
       • Wejście typu telewizora-obszar tekstowy
  • Wiele kart formularzy- Tu jest sama magia, musimy wybrać konfiguracje utworzone w poprzednich krokach, w tym tę, którą obecnie tworzymy, tj. wybierz wideo, stałe i suwak

    Konfiguracje suwak nie będzie na liście, bo w rzeczywistości nie została jeszcze utworzona, więc będziesz musiał przejrzeć pozostałe punkty, zapisać konfigurację, ponownie otworzyć tę konfigurację do edycji i tym razem będzie ona dostępna na liście suwak

    
    

    Jeszcze jedno wyjaśnienie: konfiguracje zostaną posortowane dokładnie w wybranej przez Ciebie kolejności, tj. domyślnie podczas dodawania nowego slajdu zostanie wybrany ten, który będzie pierwszy na liście
    

  • Etykieta wielu formatów- Wybierz typ slajdu (Tekst jest wskazany tutaj
    które użytkownik zobaczy obok listy wyboru typu slajdu)
  • Pole wielu formatek- rodzaj
  • Tekst opcji wielu formatek- Z obrazem w tle
  • Wiele formatów Opcje wartość- obraz
• patka kolumny
  • Pole Kolumny. Dodanie dwóch elementów
    1. nagłówek
       • patka Kolumna
         • nagłówek- Tytuł
         • pole nagłówek
       • patka Edytor komórek
         • Redaktor- this.textEditor
    2. Opis
       • patka Kolumna
         • nagłówek- Opis
         • pole- opis
       • patka Edytor komórek
         • Redaktor- this.textEditor

Jak już zauważyłeś, w pierwszych dwóch konfiguracjach nie stworzyliśmy tzw. kolumn dla wyjścia w centrali, czyli podczas edycji samego parametru telewizora. Te kolumny muszą być utworzone w tym ostatnim, tj. w konfiguracji, która będzie wskazana w telewizorze i w jakiej w terenie Wiele kart formularzy patka Tabele formatów wszystkie konfiguracje, których potrzebujemy, zostaną wyświetlone, w tym ta sama konfiguracja

Chodźmy i szybko stwórzmy telewizor z wejściem typu migx , w terenie Konfiguracje wpisz nazwę naszej konfiguracji, tj. suwak , przypisz potrzebne szablony i otwórz zasób do edycji lub utwórz go. Jeśli zrobiliśmy wszystko dobrze, powinniśmy zobaczyć następujący obrazek:

Obraz jest klikalny, a jeśli oglądałeś już gif z linku na początku notatki, to ten jest tym jedynym

Szybko wypełniamy dane i przechodzimy do wyjścia naszych slajdów.

Jak wypłacić?

Dane wejściowe są dobre, ale co z danymi wyjściowymi? Nie martwcie się towarzysze, wszystko będzie dobrze. W przypadku danych wyjściowych ponownie mamy 2 dobre opcje i rozważyliśmy obie te opcje w , jest to natywny fragment kodu MIGX getImageList i wszechmogący zjawisko. Zobaczmy, jak wyglądają nasze dane:

getImageList

Wywołajmy fragment kodu bez określania parametru tpl, aby zobaczyć surowe dane:

[] Array ( => 14 => image => files/avatar.png => To jest slajd z obrazkiem => Cóż, krótki opis) [_alt] => 0 [_first] => 1 [_last] => => 1 = > slider) Array ( => 15 => wideo => pliki/Mój dom jest wstydliwy.MOV => A to wideo => Tak, rzeczywiście! [_alt] => 1 [_first] => [ _last] => => 2 => slider) Array ( => 16 => solid => ff0000 => A czerwony to piękny kolor tutaj => Podoba mi się! [_alt] => 0 [_first] => [_last ] => 1 => 3 = > suwak)

zjawisko

($_modx->resource.slider| fromJSON | print) Array ( => Array ( => 14 => obraz => files/avatar.png => To jest slajd obrazu => Cóż, krótki opis)) => Array ( = > 15 => wideo => pliki/Mój dom jest wstydliwy.MOV => A to jest wideo => Tak, rzeczywiście!) => Array ( => 16 => solid => ff0000 => A tutaj czerwony jest piękny kolor => lubię!))
Jak widać, w naszych tablicach m.in. klucz rodzaj z wartościami, które określiliśmy podczas tworzenia konfiguracji.

Aby wyświetlić nasz suwak z getImageList, musimy utworzyć 3 porcje z nazwami naszych kluczowych wartości rodzaj, czyli: obraz , wideo i bryła . Dalej zrozumiesz dlaczego.

Przykłady porcji:

// Obraz fragmentu

// Fragment wideo // Kawałek solidny
A połączenie powinno wyglądać tak:

Tutaj pobieramy wartości z tablic każdego slajdu, w związku z czym utworzyliśmy trzy porcje, których nazwy odpowiadają wartościom pól Pole wielu formatek

Późno zjawisko wszystko wygląda o wiele prościej:

(var $slider = $_modx->resource.slider| fromJSON) (jeśli $slider)

(/jeśli)

Wynik i obiecana historia

Jak widać, MIGX radzi sobie z tym zadaniem, jeśli nie powiedzieć „doskonały”, ale przynajmniej „dobry”. Powtarzam raz jeszcze, że MIGX nie ogranicza Cię w ilości konfiguracji, zakładek w każdej konfiguracji i ilości pól w nich. A przykłady, jak już masz nadzieję, że rozumiesz, są dość proste, dzięki czemu możesz również po prostu zapoznać się z tą funkcjonalnością. I jeszcze coś ważnego: podczas wyprowadzania porcji zdecydowanie zalecam sprawdzanie wypełnienia pól i zawsze bierz pod uwagę, że dane mogą lub nie mogą być wypełnione lub z jakiegoś powodu mogą nie nadejść, dlatego używaj filtrów phx dla składni MODX lub warunki w fenom.

Dziękuję wszystkim za uwagę, życzę wszystkim powodzenia, ale nie zrobię tego, bo jak mówią: „przegranym życzę powodzenia”, więc życzę szczęścia i zdrowia czy coś, ale kogo to obchodzi, to fabuła.

Kiedyś odwiedzili nas moi krewni, w tym mój siostrzeniec (syn mojej siostry) z sąsiadujące Państwo i moich dwóch siostrzeńców (jesteśmy prawie wszyscy w tym samym wieku). Dom na wsi, słoneczna Azja Środkowa, w pobliżu mała góra i rzeka. Tej samej nocy postanowiliśmy we czwórkę przespacerować się tą samą rzeką i początkowo wszystko było spokojne, nie było powodów do ekscytacji. Dobrze się bawili, opowiadali historie (czasem przerażające i przerażające), żartowali i tym podobne. Ale w pewnym momencie zauważyłem, że jeden z moich siostrzeńców zbladł i nie jest to tylko zwrot werbalny ani upiększenie, ponieważ nigdy nie widziałem takiego strachu i oszołomienia na twarzy osoby przed i po tym incydencie. Nie odrywając wzroku, spojrzał w kierunku, w którym odwróciłem się plecami, tj. wydawał się patrzeć na coś lub kogoś za mną, ale nie bezpośrednio za i blisko, wydawało mi się, że patrzy gdzieś w oddali. To było przerażające i zapytałem go: - Co się stało? I on…

W tym akapicie będę musiał udawać, że historia w tej notatce ma kontynuację, ale tak naprawdę trochę Cię oszukałem, mając nadzieję, że uda mi się trochę pocieszyć Cię od technicznego, nudnego i dużego tekstu i będziesz w dobrym nastrój. Sama historia jest prawdziwa i bardzo ciekawa. Teraz dziękuję wszystkim za uwagę!

UPD:
Jeśli kim jestem Baha!?

Jeśli nagle ktoś chce podziękować rublowi, niech tak będzie: karta Sberbank +79609354545

W tej lekcji omówimy podstawy MIGX i popracujemy nad nowym suwakiem, którego możesz używać na swoim blogu.

Wymagania:

• Strona internetowa MODX Revolution.
• Zainstalowano niestandardowy typ zmiennej szablonu MIGX (poprzez zarządzanie pakietami).
• Suwak galerii lub skrypt, który chcielibyśmy zintegrować. Użyłem FlexSlider WooThemes, ponieważ dostosowuje się on do szerokości kontenera (bardzo ważne dla responsywnego projektowania!). Jest również wysoce konfigurowalny, obsługuje przewijanie na smartfonach i wygląda dobrze po wyjęciu z pudełka.
• Zainstalowano fragment kodu phpthumbof za pośrednictwem Menedżera pakietów do automatycznego przycinania obrazów.
• Wszelkie obrazy!

Zaczynać

Praca składa się z kilku części. Najpierw musimy zainstalować MIGX TV i musimy pobrać te dane z frontendu i sprawić, by nasz slider działał. Ten samouczek zakłada użycie FlexSlider, upewnimy się, że znaczniki są tym, czego potrzebuje, ale powinno być również bardzo łatwe do dostosowania do innych sliderów.

Krok 1: Zainstaluj MIGX TV do zarządzania obrazem

Zacznijmy od konfiguracji telewizora. Siła MIGX polega na tym, że możesz zdefiniować potrzebne pola. Zobaczysz je jako tabelę i musisz tylko wymienić tytuły. W tym przypadku będę potrzebować trzech różnych pól:

• Pole wejściowe do wyboru obrazu w systemie plików (lub w 2.2 ze źródeł multimedialnych).
• Pole tekstowe do wpisania podpisu/tagu/opisu. FlexSlider świetnie sobie radzi z podpisami, więc będziemy ich używać.
• Dodałem również wprowadzanie tekstu dla "Set". Jak zobaczymy później, użyję go do nieskończonej liczby pojedynczych sliderów, które będą dodawane z dowolnego miejsca w zasobie..

Możesz użyć innych pól, jeśli chcesz, ale samouczek użyje dokładnie tych pól, które wymieniłem powyżej.

Przejdźmy do tworzenia telewizji. Oto suwak z opisami zdjęć (w przypadku, gdy nic nie jest widoczne w miniaturze).

Utwórz nową zmienną szablonu w zakładce Elementy i nadaj jej odpowiednią nazwę. Nazwę go ws.images, jeśli nadasz mu własne imię, nie zapomnij zastąpić [[*ws.images]] swoim imieniem. W zakładce Input Options wybierz typ „migx” z menu rozwijanego. Jeśli nie widzisz tego typu, sprawdź, czy zainstalowałeś pakiet MIGX za pomocą Menedżera pakietów. Zauważysz, że na dole ekranu dodano kilka opcji, w tym karty formularzy i kolumny siatki. Dotyczy to MODX >2.0, dla wcześniejszych wersji polecam aktualizację.

Pamiętaj, że pola Karty formularzy i Kolumny siatki muszą być wypełnione prawidłowymi ciągami JSON. JSON to w zasadzie sposób wyświetlania obiektów, tablic lub kombinacji klucza -> wartości w sposób obsługiwany przez prawie każdy język programowania. Oto specyfikacja techniczna i kilka przykładów z oficjalnej strony JSON.

Ustawianie zakładek formularza

Formularz umożliwia korzystanie z różnych zakładek. Każda zakładka posiada opis i kilka pól. Możesz z tym zrobić wiele zaawansowanych rzeczy, ponieważ przez większość czasu będziesz używać pojedynczej karty, więc pamiętaj na razie. Oto kod JSON dla kart formularzy, których używam:

[("caption":"Obraz", "fields": [ ("field":"set","caption":"Set"), ("field":"opis","caption":"Opis") , ("field":"image","caption":"Obraz","inputTVtype":"obraz") ] )]

Przejdźmy przez każdą linię:

• Pierwsza pokazuje otwieranie tablicy tabulatorów za pomocą nawiasu kwadratowego ([), a obiekt otwierający tabulatora za pomocą nawiasu klamrowego ((). Następnie definiujemy podpis pola Obraz. Pamiętaj, że potrzebujesz aby użyć podwójnych cudzysłowów (" ") dla właściwości i ich wartości , pojedyncze mogą prowadzić do nieoczekiwanych wyników. Jeśli masz te nawiasy we właściwościach, wartościach, poprzedź je ukośnikiem (\). Po zdefiniowaniu opisu (podpisu), kontynuujmy i zacznijmy definiować tablicę "pól", otwierając ją nawiasami kwadratowymi ([) .
• Zdefiniujemy nasze pierwsze pole jako zestaw. "field": "set" oznacza, że ​​chcemy wprowadzić w tym polu zwykły tekst. „Podpis”: „Zestaw” - podajemy opis nazwy „zestaw” - będzie to nazwa do wprowadzania zwykłego tekstu. Następnie nadaj mu podpis „Ustaw”, który zostanie wyświetlony w formularzu jako etykieta pola.
• Następnie w ten sam sposób zdefiniuj pole opisu
• Linia 4 definiuje obraz. Wyjątkowe jest to, że jako typ wejścia używamy innego telewizora (o nazwie „obraz”). Jest to bardzo mocna cecha MIGX, która pozwala na wykorzystanie innych telewizorów do budowania formy. W tym przypadku telewizor „obrazowy” jest bardzo prosty: typem wejścia jest obraz, aw wersji 2.2 można przypisać go do właściwego źródła mediów. Nie musisz kojarzyć go z szablonami, tak jak w przypadku zwykłego telewizora. Innym sposobem na zrobienie tego (którego używam w innych telewizorach MIGX) jest tworzenie skrzynek radiowych lub wybieranie skrzynek.
• Piąta linia zamyka tablicę pól. Zwróć też uwagę, że ostatnia linia określająca pole (obrazek) nie kończy się przecinkiem - to ważne! Jeśli umieścisz przecinek w tablicy, JSON nie zostanie przeanalizowany i Twój formularz nie będzie działał.
• Szósty wiersz zamyka obiekt tab i całą tablicę tabulatorów.

W ten sposób stworzyliśmy telewizję „obrazową”! Powinieneś już mieć formularz do wypełnienia danych, ale potrzebujesz znaczników, aby go pokazać...

Ustawianie znaczników kolumn

Układ kolumn to tabela na panelu TV zasobu. Musisz zdefiniować nagłówki dla tej tabeli za pomocą opcji wejściowych znaczników kolumn. Oto (ponownie JSON) definicja tego, czego używam: [( "header": "Set", "sortable": "true", "dataIndex": "set" ),( "header": "Description" , "sortable" : "true", "dataIndex": "description" ),( "header": "Image", "sortable": "false", "dataIndex": "image","renderer": "this. renderImage" )]

Przejdźmy przez każdą linię:

• Otwórz tablicę nagłówków z nawiasami kwadratowymi ([) i nagłówek piątej kolumny z nawiasami klamrowymi (().
• Nagłówek nazywamy „Zestaw”, wskazujemy, że można go sortować (sortowalny) i określamy parametr „zestaw”, który odpowiada definicji Zakładek formularza, które mają „field":"set”.
• Koniec zestawu / początek opisu
• Nagłówek nazywamy „Opis”, można go sortować i dopasowujemy go do opisu pola dataIndex.
• Opis końcowy / Obraz początkowy
• Nazwij nagłówek "Obraz", nie można go sortować i zmapuj go na pole dataIndex - obraz. Zdefiniujemy również renderer, który w ExtJS pozwoli na zmianę wyglądu danych wyjściowych. W tym przypadku "this.renderImage" renderer automatycznie pobierze adres URL wybranego obrazu i zamiast tego wyrenderuje miniaturę.
• Koniec obiektu Image i tablica nagłówków.

Następnie możesz przypisać ten telewizor MIGX do swojego szablonu i sprawdzić wynik. Znaczniki się nie wyświetlają? Wróć do zakładek i upewnij się, że wszystkie wartości są ujęte w podwójne cudzysłowy, a nie pojedyncze i sprawdź, czy nie ma dodatkowych przecinków.

Informacja

Aby sprawdzić poprawność JSON, użyj JSONLint .

• Wypełnij dane
• Przenieś dane do witryny

Wypełnij naszą zmienną szablonu ws.image dowolnymi danymi

Jeśli spróbujesz wyświetlić te dane jako zwykły telewizor, zobaczysz coś takiego:

[( "MIGX_id":"1","set":"zestaw1","description":"Zaznacz kota, który na jawie kradnie kiełbasę i je,","image":"demo/uroki/15/1 .jpg" ),( "MIGX_id":"2","set":"zestaw1","description":"bęben","image":"demo/uroki/15/2.jpg" ),( "MIGX_id ":"3","set":"set1","description":"como esta nuevo","image":"demo/uroki/15/3.jpg" ),( "MIGX_id":"4", "set":"set1","description":" książką tą możesz zabić człowieka","image":"demo/uroki/15/4.jpg" )]

To jest tablica JSON z wprowadzonymi polami i wartościami!

Ponieważ MIGX zawiera fragment kodu getImageList, możesz spróbować wyświetlić dane za jego pomocą. Dokumentację tego fragmentu można znaleźć tutaj. Lub stwórz własny snippet (parseMIGXToGallery), którego używam do generowania znaczników z fragmentu &tpl na podstawie danych telewizyjnych:

fromJSON($input); $wyjście = tablica(); if (!$input || empty($tpl)) zwraca "brak rzeczy"; foreach ($input as $row) ( if (isset($set) && !empty($set) && ($set != $row["set"])) continue; $output = $modx->getChunk($ tpl, $row); ) return implode("\n", $output);

Przejdźmy przez każdą linię:

• Bierzemy zmienną $input (która pobiera dane zawarte w parametrze &input w wywołaniu snippet, więcej o tym później) i analizujemy JSON do tablicy php.
• Ustawimy pustą tablicę do przechowywania naszego wyjścia.
• Upewnijmy się, że zmienna $input nie ma wartości NULL lub False, co oznaczałoby, że JSON nie został przekazany lub jest niepoprawny, a także sprawdźmy, czy zmienna $tpl (przekazana przez parametr &tpl w wywołaniu snippet) nie jest pusta. Jeśli którykolwiek z warunków ma wartość True, wyświetlimy "pusty" komunikat o błędzie, który posłuży jako wskazówka dla menedżera treści, że coś jest nie tak.
• Następnie przeprowadź iterację przez każdy element tablicy $input jako $wiersz.
• Sprawdzamy, czy zmienna $set jest ustawiona (która jest ustawiona w wywołaniu snippet w parametrze &set) i jeśli nie jest pusta, porównujemy jej wartość z wartością „set” bieżącego wiersza. Jeśli tego nie chcesz, przejdź do następnego elementu w tablicy.
• Otrzymujemy porcję o nazwie $tpl i wstawiamy do niej wartości bieżącego wiersza jako symbole zastępcze.
• Zamykamy pętlę foreach.
• Na koniec sklejamy tablicę $output, oddzielając każdy element łamaniem wiersza i wypisujemy go na stronę.
• Podsumowując powyższe, bierzemy dane wejściowe, przechodzimy przez każdy wiersz i sprawdzamy, czy należy do zestawu, który zdefiniowaliśmy, a następnie pobiera porcję i dodaje wszystko do wyniku.
• Uruchom fragment

Wszystko, czego potrzebujemy, to snippet call, w którym potrzebujemy naszych obrazów i fragmentu, który wyświetli wszystko we właściwy sposób dla FlexSlider. Oto jak nazywa się fragment:

[]` &set=`set1` ]]

A fragment images.gallery.tpl:

[[+opis]]

Musisz również umieścić cały fragment kodu w div i nieuporządkowanej liście, zgodnie z dokumentacją FlexSlider. Aby to wszystko ułatwić, złóżmy to wszystko w jednym kawałku. Mój fragment nazywa się slider i zawiera:

Korzystając z tego fragmentu, mogę po prostu linkować do czegoś w treści, co jest znacznie łatwiejsze do zapamiętania lub umieszczenia w ściągawce.

[[$slider?set=`nazwa zestawu`]]

Teraz możesz zacząć układać FlexSlider.

Krok 3: Korzystanie z FlexSlider

FlexSlider jest stosunkowo łatwy w użyciu (pobierz swoje pliki), a na jego stronie internetowej znajduje się mnóstwo przykładów. Należy również dołączyć wywołanie do jQuery na stronie i jej pliku CSS (spakowany w pliku zip) oraz wtyczkę FlexSlider (również w archiwum zip). Następnie musisz wyzwolić poprawny element za pomocą następującego kodu:

Strona radzi umieścić wszystko w nagłówku pliku, ale ja osobiście wszystko umieściłem na dole. Jeśli twój suwak jest wyświetlany na górze strony, lepiej umieścić go w tak, aby ładował się przed pojawieniem się strony, więc umieść go w dowolnym miejscu.

To wszystko! Mam nadzieję, że ten długi artykuł pomoże komuś zacząć używać MIGX i sliderów takich jak FlexSlider!

Dzisiaj mały artykuł na temat jak stworzyć suwak w modx korzystając z pakietu BanerY. Ten pakiet można pobrać i zainstalować z repozytorium.

Tworzenie slidera z BanerY

I tak jest suwak statyczny, niech to będzie zwykły suwak bootstrap, z następującymi znacznikami:

Celem jest utworzenie zarządzanego suwaka z tego znacznika. Zacznijmy.

Zacznijmy od stworzenia slajdów w BannerY, w tym celu przechodzimy do Applications - BannerY - Positions i tworzymy pozycję (np. home-slider).

Następnie przejdź do zakładki Banery i kliknij przycisk Nowy baner. Otworzy się okno do tworzenia nowego banera.

Wypełniamy wszystko:

• Nazwa, można ją wyświetlić za pomocą [[+nazwa]].
• Wybierz obraz - [[+obraz]].
• Określ adres URL, do którego należy się udać - [[+url]].
• Uzupełnij opis - [[+opis]] - tutaj przy okazji możesz doładować nie tylko tekst, ale i zwykły html i to jest fajne.
• Cóż, wybierz pozycję (utworzyłeś ją wcześniej).

I tak tworzymy wymaganą liczbę slajdów.

Teraz musisz podzielić powyższe znaczniki na porcje i dopasować kod w porcjach do składni BanerY

Utwórz chunk na osobny suwak z klasą aktywny, niech będzie slajd i wstrzyknij do niego składnię:

Teraz skopiuj ten kawałek i nadaj mu nazwę slajd2 i usuń klasę aktywny

Cóż, pozostaje w rzeczywistości tylko wyświetlanie slajdów.

[]

W rezultacie otrzymujemy:

To wszystko) Tak łatwo jest stworzyć slider na modx za pomocą BanerY.

Tak przy okazji, jego dokumentacja jest tutaj: docs.modx.pro/components/bannery/snippet

Slider Revolution to jeden z najpopularniejszych sliderów ze względu na ogromny zakres funkcji i łatwość obsługi.
z ThemePunch. Ten suwak został kupiony ponad 273 441 razy i jest używany przez ponad 2500000 witryn na całym świecie.

Poniżej wymieniono niektóre z głównych zalet tego suwaka, które odróżniają go od bezpłatnego i
większość analogów premium:

• Potężny edytor wizualny - dostosuj wyświetlacz suwaka do potrzeb swojego projektu za pomocą wygodnego menu, w którym
  każda funkcja jest na swoim miejscu. Ścisła gradacja nie pozwoli Ci się pomylić. Jedyna trudność w
  po raz pierwszy będzie chęć wypróbowania ich wszystkich.
• Kontrola zmienności każdego slajdu - planowane wyświetlanie bloków na ekranie komputera, tabletu i telefonu
  pokazane w edytorze wizualnym. Możesz zmienić rozmiar slajdów indywidualnie dla każdego urządzenia.
  Szablon responsywny nie pozwoli na zniekształcenie zdjęć i filmów ani nie zajmie więcej miejsca niż jest to wymagane
  wygodne oglądanie.
• Pracuj z sieciami społecznościowymi i hostingiem wideo - Slider Revolution piątej generacji pozwala na włączenie do slidera
  dane z Instagramm, Facebook, Flickr, Twitter, Vimeo i Youtube. Jeśli planujesz samodzielnie opublikować film
  serwer, możesz używać języka HTML5. Części kodu zostaną zapisane automatycznie.
• Wysoka wydajność i optymalizacja slajdów - wtyczka działa szybko w trybie edycji i zmniejsza
  waga suwaka bez utraty jakości treści. Nie musisz martwić się długim czasem ładowania strony. Co jest szczególnie
  istotne w odniesieniu do urządzeń mobilnych, które są poza zasięgiem połączeń Wi-Fi.
• Ogromna liczba efektów specjalnych podczas przechodzenia slajdów
• Wiele efektów animacji podczas wyświetlania tekstu, wideo i zdjęć
• Uruchamianie wideo automatycznie podczas otwierania strony lub ręcznie, do wyboru, zatrzymanie suwaka podczas oglądania wideo,
  przewijanie itp.
• Duży wybór ustawień nawigacji
• Wstaw ogłoszenia postów z linkami bezpośrednio do suwaka, gdy jest on skonfigurowany do optymalizacji SEO
• Wsparcie i instalacja czcionek Google
• Używając wielu warstw (zdjęć, filmów, podpisów i linków) na jednym slajdzie, jest ich niezliczona ilość
  nakładają się na siebie, tworząc w ten sposób realistyczne wideo lub dowolną prezentację.

Uwaga! Aby móc pobrać szablony suwaków premium i obiekty biblioteczne online, należy zakupić osobną licencję od ThemePunch, która w momencie pisania tego tekstu kosztuje 19 USD, a następnie aktywować ją wpisując kod zakupu w polu wskazanym w rysunek poniżej.

Recenzja wideo modSliderRevolution

Dzisiaj przyjrzymy się, jak stworzyć suwak Bootstrap za pomocą MIGX. Przed rozpoczęciem badania polecam najpierw odwiedzić ten.

Tworzenie konfiguracji MIGX

idę do zarządzania MIGX i dodaj nowy element o nazwie suwak, w polu zastępczym napisz " Dodaj slajdy"i przejdź do zakładki" Tabele formatów».

• Nazwa pola — tytuł, podpis — tytuł.
• Nazwa pola — slajd, Podpis — slajd, Typ wejścia TV — obraz.
• Nazwa pola - opis, podpis - opis.
• Nazwa pola — idstranici, Podpis — Określ identyfikator dokumentu, do którego ma zostać utworzony link.

• Nagłówek - Tytuł, Pole - tytuł.
• Nagłówek - slajd, Pole - slajd, Renderer - this.renderImage.
• Nagłówek - Opis, Pole - opis.
• Nagłówek - identyfikator dokumentu, Pole - idpage.

Notatka: Zasadniczo przenosimy elementy z Formtabs. Tak, możesz również wypełnić pola Szerokość kolumn - szerokość kolumn.

Zapisz (wykonaj).

Dla tych, którzy w ogóle nie chcą się kąpać, tworzymy pustą konfigurację i eksportujemy do niej następujący kod:

( "formtabs":[ ( "MIGX_id":1, "caption":"\u0414\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0441\u043b\u0430\u0439\u0434\u044b", "print_before_tabs ”, "print_before_tabs" ":"0", "pola":[ ( "MIGX_id":1, "field":"tytuł", "caption":"\u0417\u0430\u0433\u043e\u043b\u043e\u0432 \u043e\u043a" , "description":"\u0417\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a \u0441\u043b\u0430\u0439\u0434\u0430", "description_is_code":"0" , "inputTV": "", "inputTVtype":"", "validation":"", "configs":"", "restrictive_condition":"", "display":"", "sourceFrom":"config" , "sources": "", "inputOptionValues":"", "default":"", "useDefaultIfEmpty":"0", "pos"::1 ), ( "MIGX_id":2, "field":"slajd ", "caption" :"\u0421\u043b\u0430\u0439\u0434", "description":"", "description_is_code":"0", "inputTV":"", "inputTVtype":"obraz", " validation":"" , "configs":"", "restrictive_condition":"", "display":"", "sourceFrom":"config", "sources":"", "inputOptionValues":"", " default":"" , "useDefaultIfEmpty":"0", "pos" :2 ), ( "MIGX_id":3, "field":"description", "caption":"\u041e\u043f\u0438\u0441\u0430\u043d\u0438\u0435", "description":"", " description_is_code":"0", "inputTV":"", "inputTVtype":"", "validation":"", "configs":"", "restrictive_condition":"", "display":"", " sourceFrom":"config", "sources":"", "inputOptionValues":"", "default":"", "useDefaultIfEmpty":"0", "pos":3 ), ( "MIGX_id":4, "field":"idstranici", "caption":"\u0423\u043a\u0430\u0436\u0438\u0442\u0435 id \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430 \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u0441\u044b\u043b\u0430\u0442\u044c\u0441\u044f", "description":"", "description_is_code":"0", " inputTV":"", "inputTVtype":"", "validation":"", "configs":"", "restrictive_condition":"", "display":"", "sourceFrom":"config", " source":"", "inputOptionValues":"", "default":"", "useDefaultIfEmpty":"0", "pos":4 ) ], "pos":1 ) ], "contextmenus":"" , "actionbuttons":"", "columnbutton s":"", "filters":"", "extended":( "migx_add":"\u0414\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0441\u043b\u0430\u0439\u0434\ u044b", "disable_add_item":"", "add_items_directly":"", "formcaption":"", "update_win_title":"", "win_id":"", "maxRecords":"", "addNewItemAt":" dół", "media_source_id":"", "multiple_formtabs_":"", "multiple_formtabs_label":"", "multiple_formtabs_field":"", "multiple_formtabs_optionstext":"", "multiple_formtabs_optionsvalue":"", "actionbuttonsperrow":4 , "winbuttonslist":"", "extrahandlers":"", "filtersperrow":4, "packageName":"", "classname":"", "task":"", "getlistsort":"", " getlistsortdir":"", "sortconfig":"", "gridpagesize":"", "use_custom_prefix":"0", "prefix":"", "grid":"", "gridload_mode":1, "check_resid ":1, "check_resid_TV":"", "join_alias":"", "has_jointable":"tak", "getlistwhere":"", "joins":"", "hooksnippets":"", "cmpmaincaption" :"", "cmptabcaption":"", "cmptabdescription":"", "cmptabcontroller":"", "winbuttons ":"", "onsubmitsuccess":"", "submitparams":"" ), "kolumny":[ ( "MIGX_id":1, "header":"\u0417\u0430\u0433\u043e\u043b\u043e\ u0432\u043e\u043a", "dataIndex":"nagłówek", "width":100, "sortable":"false", "show_in_grid":1, "customrenderer":"", "renderer":"", " clickaction":"", "selectorconfig":"", "renderchunktpl":"", "renderoptions":"", "editor":"" ), ( "MIGX_id":2, "header":"\u0421\ u043b\u0430\u0439\u0434", "dataIndex":"slajd", "width":100, "sortable":"false", "show_in_grid":1, "customrenderer":"", "renderer":"to .renderImage", "clickaction":"", "selectorconfig":"", "renderchunktpl":"", "renderoptions":"", "editor":"" ), ( "MIGX_id":3, "header" :"\u041e\u043f\u0438\u0441\u0430\u043d\u0438\u0435", "dataIndex":"opis", "width":200, "sortable":"false", "show_in_grid":1, "customrenderer ":"", "renderer":"", "clickaction":"", "selectorconfig":"", "renderchunktpl":"", "renderoptions":"", "editor":"" ), ( " MIGX_id":4, "header":"id \u0434\u043 e\u043a\u0443\u043c\u0435\u043d\u0442\u0430", "dataIndex":"idstranici", "width":50, "sortable":"false", "show_in_grid":1, "customrenderer":" ”, "renderer":"", "clickaction":"", "selectorconfig":"", "renderchunktpl":"", "renderoptions":"", "editor":"" ) ], "category": "")

Tworzenie telewizora z konfiguracją MIGX

W drzewie MODX na „ Elementy", naciśnij + naprzeciwko punktu Dodatkowe pola” i wprowadź następujące dane:

• „Nazwa” - suwak; „Podpis” – suwak.
• W zakładce "Opcje wejścia" w "Typ wejścia" wybierz migx, a w polu "Konfiguracje" wpisz suwak.
• W zakładce "Dostępne dla szablonów" wybierz te szablony, dla których dane wejściowe w tym polu będą dostępne.

Wprowadzanie danych

Otwórzmy dokument, do którego pole suwaka jest przypisane z MIGX z konfiguracją i wprowadźmy do niego jakieś dane.

Bootstrap 3 wyprowadza karuzelę na stronę

Mamy standardowy znacznik HTML getbootstrap.com/docs/3.3/javascript/#carousel-examples, przeróbmy go pod MIGX i w wymaganym miejscu szablonu wpisujemy następujący kod:

I twórz porcje:

tplsliderIndicator:

i kawałek tplsliderItem o następującej treści:

Bootstrap 4 wyjścia karuzeli na stronę

Podobnie jak w poprzednim przypadku, bierzemy standardowe znaczniki getbootstrap.com/docs/4.1/components/karuzela/ i przerobić, w wyniku czego otrzymujemy

Gdzie jest kawałek tplsliderIndicator ma następujący kod:

i kawałek tplsliderItem z następującym kodem: