Ürün sayfasındaki Modx resim karuseli. büyük ve korkutucu

Merhaba topluluk!

Bu notta, Multiple Formtabs'ın ne olduğunu ve farklı bir veri seti ile nasıl konfigürasyon oluşturulacağını öğreneceksiniz. Ve elbette, sizinle birlikte farklı slayt türlerine sahip bir kaydırıcı oluşturacağız ve sonunda çok güzel bir slayt bulacaksınız. ilginç hikaye uzun zamandır kimseye söylemeye cesaret edemedim (tabii ki ilgilenmiyorsan, ama hikaye ilginç - inan bana). Ve böylece, slayt örnekleri:

• Arka plan görüntüsü
• video arka planı
• düz renk arka plan

Dikkat! Bu sefer çocukları ve hamile kadınları ekranlardan kaldırmayın çünkü bu bir nevi yaş ve cinsiyete dayalı ayrımcılık!

işte böyle olacak

Bir duyuru daha! Kendimi tekrar etmemek için sık sık ilk derse atıfta bulunacağım, bu yüzden kendinizi tanımanızı şiddetle tavsiye ederim.

Ne için?

Hayal edelim: Örneğin, ana sayfada çeşitli slayt türlerine sahip bir kaydırıcının olduğu, birinin video arka planının, diğerinin bir resmin ve üçüncünün düz bir rengin olduğu bir proje elde edersiniz. Tek bir alan seti (tek konfigürasyon) oluşturmayacaksınız ve tüm bu alanları (sözlük için üzgünüm) içine tıkacak ve yöneticiye onunla nasıl yaşayacağını ve olacağını söylemeyeceksiniz. Değil ciddi tavır!? (umarım biri anlar)

sebep için

Sizinle "neden"i anladık, şimdi "nasıl"ı bulalım. Zaten ilk dersi okuduysanız, MIGX bileşen sayfasına gitmemiz ve 3 konfigürasyon oluşturmamız gerekiyor. Jako tarafından ColorPicker'ı önceden yükleyin (ancak önemli değil):

Benim tarafımdan belirtilmeyen her şeyi atlayın!

katı konfigürasyon (düz renk)

• sekme Ayarlar
  • İsim- sağlam
  • Yeni Kategori Ekle- Kaydırıcı
• sekme Form sekmeleri
  • Alanlar Alanlar 3 alan oluştur
    1. Arka plan rengi:
       • alan adı-bgcolor
       • Altyazı- Arka plan rengini seçin
       • Giriş TV türü- ColorPicker (veya sizin
         kullanmak)
    2. Başlık:
       • alan adı başlık
       • Altyazı- Slayt başlığı
    3. Tanım:
       • alan adı- tanım
       • Altyazı- Slayt açıklaması
       • Giriş TV türü-metin alanı
  • Çoklu Form Sekmeleri Alanı-tip( Verilen değer anahtarın adı olacak
    çıktı dizisi. Varsayılan: MIGX_formname)
  • - Arka planda düz bir renkle (Metin
    seçim listesinde bu yapılandırma)
  • - katı (Aynı tür alanının değeri
    dizide)

video yapılandırması

• sekme Ayarlar
  • İsim- video
  • Kategori- Kaydırıcı
• sekme Form sekmeleri
  • Alanlar- 1 sekme ve alanda oluşturun Alanlar yine 3 alan oluşturuyoruz, bu alanlardan sadece biri farklı tipte.

    Burada açıklığa kavuşturmalıyım, farklı konfigürasyonlardaki alanların sayısı ve türleri, hayal gücünüz sınırlı olduğu kadar farklı olabilir... Ama biliyorum ki, fantezilerinize göre her şey yolunda mı?

    1. Video (yani dosya):
       • alan adı- video
       • Altyazı- Video yükle
       • Giriş TV türü- dosya
    2. Başlık:
       • alan adı başlık
       • Altyazı- Slayt başlığı
    3. Tanım:
       • alan adı- tanım
       • Altyazı- Slayt açıklaması
       • Giriş TV türü-metin alanı
  • Çoklu Form Sekmeleri Alanı- tip
  • Birden Çok Form Sekmesi Seçenek metni- Arka planda video ile
  • Birden Çok Form Sekmesi Seçenek değeri- video

kaydırıcı yapılandırması

Varsayılan olarak, bir görüntüyü kabul edecek ve bir tür ana konfigürasyon olacaktır.

• sekme Ayarlar
  • İsim- kaydırıcı
  • Kategori- Kaydırıcı
  • "Öğe Ekle"yi değiştirin- Slayt ekle
  • Form Altyazısı
  • pencere başlığı- Slayt ekle/düzenle
• sekme Form sekmeleri
  • Alanlar- 1 sekme oluşturun ve Alanlar alanında tekrar 3 alan oluşturun
    1. Resim:
       • alan adı- görüntü
       • Altyazı- Bir görüntü yükle
       • Giriş TV türü- görüntü
       • İhtiyacınız olan dosyaların kaynağını belirtin, bu görevi ilk derste anlattım
    2. Başlık:
       • alan adı başlık
       • Altyazı- Slayt başlığı
    3. Tanım:
       • alan adı- tanım
       • Altyazı- Slayt açıklaması
       • Giriş TV türü-metin alanı
  • Çoklu Form Sekmeleri- İşte sihir, şu anda oluşturmakta olduğumuz da dahil olmak üzere önceki adımlarda oluşturulan konfigürasyonları seçmemiz gerekiyor, yani. video, katı ve kaydırıcıyı seçin

    Yapılandırmalar kaydırıcı listede olmayacak, çünkü aslında henüz oluşturulmadı, bu yüzden kalan noktaları gözden geçirmeniz, konfigürasyonu kaydetmeniz, bu konfigürasyonu düzenlemek için tekrar açmanız gerekecek ve bu sefer listede mevcut olacak kaydırıcı

    
    

    Bir açıklama daha: konfigürasyonlar tam olarak seçtiğiniz sıraya göre sıralanacaktır, yani. varsayılan olarak, yeni bir slayt eklerken, listede ilk olacak olan seçilecektir.
    

  • Çoklu Form Sekmeleri Etiketi- Slayt türünü seçin (burada metin gösterilir
    kullanıcının slayt türü seçim listesinin yanında göreceği)
  • Çoklu Form Sekmeleri Alanı- tip
  • Birden Çok Form Sekmesi Seçenek metni- Arka planda bir resim ile
  • Birden Çok Form Sekmesi Seçenek değeri- görüntü
• sekme sütunlar
  • Alan Sütunlar.İki öğe ekleme
    1. başlık
       • sekme Kolon
         • başlık- Başlık
         • alan başlık
       • sekme Hücre Düzenleyici
         • Editör- this.textEditor
    2. Tanım
       • sekme Kolon
         • başlık- Tanım
         • alan- tanım
       • sekme Hücre Düzenleyici
         • Editör- this.textEditor

Zaten fark ettiğiniz gibi, ilk iki konfigürasyonda, kontrol panelinde çıktı için sözde sütunları oluşturmadık, yani. TV parametresinin kendisini düzenlerken. Bu sütunlar ikincisinde oluşturulmalıdır, yani. TV'de gösterilecek ve sahada hangi konfigürasyonda Çoklu Form Sekmeleri sekme Form sekmeleri aynı konfigürasyonun kendisi de dahil olmak üzere ihtiyacımız olan tüm konfigürasyonlar listelenecektir.

Hadi sahada migx giriş tipine sahip hızlı bir şekilde TV oluşturalım. Yapılandırmalar konfigürasyonumuzun adını yazın, yani kaydırıcıyı tıklayın, gerekli şablonları atayın ve düzenleme için kaynağı açın veya oluşturun. Her şeyi doğru yaptıysak, aşağıdaki resmi görmeliyiz:

Resim tıklanabilir ve notun başındaki bağlantıdan gif'i zaten izlediyseniz, o zaman bu birdir.

Verileri hızla dolduruyoruz ve slaytlarımızın çıktısına geçiyoruz.

Nasıl geri çekilir?

Veri girişi iyidir, peki ya çıktı? Merak etmeyin yoldaşlar, her şey yoluna girecek. Çıktı için yine 2 iyi seçeneğimiz var ve bu seçeneklerin her ikisini de içinde değerlendirdik, bu yerel bir MIGX parçacığıdır getImageList ve her şeye kadir fenomen. Bakalım verilerimiz nasıl görünüyor:

getImageList

Ham verileri görmek için tpl parametresini belirtmeden snippet'i çağıralım:

[] Dizi ( => 14 => image => files/avatar.png => Bu resimli bir slayt => Peki, kısa açıklama) [_alt] => 0 [_first] => 1 [_last] => => 1 = > kaydırıcı) Dizi ( => 15 => video => dosyalar/Evim utanç verici.MOV => Ve bu bir video => Evet, gerçekten! [_alt] => 1 [_first] => [ _last] => => 2 => kaydırıcı) Dizi ( => 16 => solid => ff0000 => Ve kırmızı burada çok güzel bir renk => Beğendim [_alt] => 0 [_first] => [_last ] => 1 => 3 = > kaydırıcı)

fenomen

($_modx->resource.slider| fromJSON | print) Array ( => Array ( => 14 => image => files/avatar.png => Bu bir resim slaydı => Peki, kısa açıklama)) => Array ( = > 15 => video => dosyalar/Evim utanç verici.MOV => Ve bu bir video => Evet, gerçekten!) => Dizi ( => 16 => katı => ff0000 => Ve işte kırmızı güzel bir renk => beğendim!))
Gördüğümüz gibi, dizilerimizde, diğer şeylerin yanı sıra, anahtar tip konfigürasyonları oluştururken belirttiğimiz değerlerle.

Kaydırıcımızı görüntülemek için getImageList, anahtar değerlerimizin adlarıyla 3 parça oluşturmamız gerekiyor tip, yani: görüntü , video ve katı . Dahası nedenini anlayacaksınız.

Parça örnekleri:

// Toplu görüntü

// Toplu video // Parça katı
Ve çağrı şöyle görünmelidir:

Burada her slaydın dizilerinden değerler alıyoruz ve bu nedenle adları alan değerleriyle eşleşen üç parça oluşturduk. Çoklu Form Sekmeleri Alanı

üzerinde fenomen her şey çok daha basit görünüyor:

(var $slider = $_modx->resource.slider| fromJSON) (eğer $slider ise)

(/eğer)

Sonuç ve vaat edilen hikaye

Gördüğümüz gibi, MIGX bu görevle "mükemmel" olmasa da en azından "iyi" olarak başa çıkıyor. MIGX'in sizi konfigürasyon sayısında, her konfigürasyondaki sekmelerde ve bunların içindeki alan sayısında sınırlamadığını bir kez daha tekrarlıyorum. Ve örnekler, zaten anladığınızı umduğunuz gibi, bu işlevsellik hakkında bilgi sahibi olabilmeniz için oldukça basittir. Ve önemli bir şey daha: parçaların çıktısını alırken, alanların doluluğunu kontrol etmenizi şiddetle tavsiye ederim ve her zaman verilerin doldurulabileceğini veya doldurulmayacağını veya herhangi bir nedenle gelmeyebileceğini ve bu nedenle MODX sözdizimi için phx filtreleri kullanın. veya fenomdaki koşullar.

Hepinize ilginiz için teşekkür ederim, herkese iyi şanslar dilerdim, ama etmeyeceğim, çünkü dedikleri gibi: “Kaybedenlere iyi şanslar”, bu yüzden size mutluluk ve sağlık ya da başka bir şey diliyorum, ama kimin umurunda, o zaman Öykü.

Akrabalarım bizi ziyarete geldiklerinde aralarında yeğenim (kız kardeşimin oğlu) vardı. komşu ülke ve iki yeğenim (Hepimiz aynı yaştayız). Kır evi, güneşli Orta Asya, küçük bir dağ ve yakınlarda bir nehir. Aynı gece, dördümüz bu nehir boyunca yürüyüşe çıkmaya karar verdik ve ilk başta her şey sakindi, heyecan için hiçbir neden yoktu. Çok eğlendiler, hikayeler anlattılar (bazen korkutucu ve ürkütücü), şaka yaptılar ve bunun gibi şeyler. Ama bir noktada yeğenlerimden birinin sarardığını fark ettim ve bu sadece sözlü bir dönüş ya da süsleme değil, çünkü bu olaydan önce ve sonra bir insanın yüzünde böyle bir korku ve şaşkınlık görmedim. Gözlerini ayırmadan sırtımın döndüğü yöne baktı, yani. arkamdaki bir şeye veya birine bakıyor gibiydi, ama tam arkamda ve yakınımda değil, bana uzaklarda bir yere bakıyormuş gibi geldi. Korkunçtu ve ona sordum: - Ne oldu? Ve o…

Bu paragraf, bu nottaki hikayenin bir devamı varmış gibi davranmak zorunda kalacak, ama aslında sizi biraz aldattım, teknik, sıkıcı ve büyük metinden sizi biraz neşelendirebileceğimi ve iyi bir durumda olacağınızı umuyordum. mod. Hikayenin kendisi gerçek ve çok ilginç. Şimdi, hepinize dikkatiniz için teşekkürler!

UPD:
Eğer ben neyim Baha!?

Aniden biri rubleye teşekkür etmek isterse, öyle olsun: Sberbank kartı +79609354545

Bu derste, MIGX'in temellerini ele alacağız ve blogunuzda kullanabileceğiniz yeni bir kaydırıcı üzerinde çalışacağız.

Gereksinimler:

• MODX Devrimi web sitesi.
• Yüklü MIGX özel şablon değişken türü (paket yönetimi aracılığıyla).
• Entegre etmek istediğimiz galeri kaydırıcısı veya komut dosyası. WooThemes'in FlexSlider'ını kullandım çünkü kendini kabın genişliğine uyacak şekilde ayarlıyor (duyarlı tasarım için çok önemli!). Ayrıca son derece yapılandırılabilir, akıllı telefonlarda kaydırmayı destekler ve kutudan çıkar çıkmaz gayet iyi görünür.
• Görüntüleri otomatik kırpmak için Paket Yöneticisi aracılığıyla phpthumbof parçacığı yüklendi.
• Herhangi bir görüntü!

Başlamak

Çalışma birkaç parça kullanıyor. Öncelikle MIGX TV'yi kurmamız gerekiyor ve bu verileri ön uçtan alıp kaydırıcımızı çalıştırmamız gerekiyor. Bu öğretici, FlexSlider'ın kullanıldığını varsayar, işaretlemenin ihtiyaç duyduğu şey olduğundan emin olacağız, ancak diğer kaydırıcılara uyum sağlamak da çok kolay olmalıdır.

1. Adım: Resim yönetimi için MIGX TV'yi kurun

TV'yi ayarlayarak başlayalım. MIGX'in gücü, ihtiyacınız olan alanları tanımlayabilmenizdir. Bunları bir tablo olarak göreceksiniz ve sadece başlıkları isimlendirmeniz yeterli. Bu durumda, üç farklı alana ihtiyacım olacak:

• Dosya sisteminde (veya medya kaynaklarınızdan 2.2'de) bir görüntü seçmek için giriş alanı.
• Başlık / etiket / açıklama girmek için metin giriş alanı. FlexSlider altyazılarla harika bir iş çıkarıyor, bu yüzden onları kullanacağız.
• Ayrıca "Ayarla" için metin girişi ekledim. Daha sonra göreceğimiz gibi, kaynağın herhangi bir yerinden eklenecek sonsuz sayıda bireysel kaydırıcı için kullanacağım ..

Dilerseniz diğer alanları da kullanabilirsiniz, ancak öğretici tam olarak yukarıda listelediğim alanları kullanacaktır.

TV oluşturmaya devam edelim. İşte görüntülerin açıklamalarını içeren bir kaydırıcı (küçük resimde hiçbir şey görünmüyorsa).

Öğeler sekmesinde yeni bir şablon değişkeni oluşturun ve buna uygun bir ad verin. Ben buna ws.images diyeceğim, eğer kendi isminizi verirseniz, [[*ws.images]] yerine isminizi koymayı unutmayın. Giriş Seçenekleri sekmesinde, açılır menüden "migx" türünü seçin. Bu türü görmüyorsanız, MIGX paketini Paket Yöneticisi aracılığıyla kurup kurmadığınızı kontrol edin. Form Sekmeleri ve Izgara Sütunları dahil olmak üzere ekranın altına birkaç seçeneğin eklendiğini fark edeceksiniz. Bu, MODX >2.0 için geçerlidir, önceki sürümler için yükseltme yapmanızı öneririm.

Form Sekmeleri ve Kılavuz Sütunları alanlarının geçerli JSON dizeleriyle doldurulması gerektiğini unutmayın. JSON temel olarak nesneleri, dizileri veya anahtar -> değer kombinasyonlarını hemen hemen her programlama dilinin desteklediği şekilde görüntülemenin bir yoludur. İşte resmi JSON sitesinden teknik özellikler ve bazı örnekler.

Form Sekmelerini Ayarlama

Form, farklı sekmeler kullanmanıza izin verir. Her sekmenin bir açıklaması ve birkaç alanı vardır. Çoğu zaman tek sekmeyi kullanacağınız için bununla birçok gelişmiş şey yapabilirsiniz, bu yüzden şimdilik unutmayın. İşte kullandığım Form Sekmeleri için JSON kodu:

[("başlık":"Görüntü", "alanlar": [ ("alan":"ayarla", "başlık":"Ayarla"), ("alan":"açıklama","başlık":"Açıklama") , ("field":"image","caption":"Image","inputTVtype":"image") ] )

Her satırı inceleyelim:

• İlki köşeli parantez ([) ile sekme dizisinin açılışını ve küme paranteziyle (()) sekmenin açılış nesnesini gösterir. Bundan sonra, Görüntü alanının başlığını tanımlarız. özellikler ve değerleri için çift tırnak (" ") kullanmak, tek tırnaklar beklenmedik sonuçlara yol açabilir. Herhangi bir özellikte, değerde bu parantezler varsa, bunları bir eğik çizgi (\) ile çıkarın. Açıklamayı (başlık) tanımladıktan sonra, hadi devam edelim ve köşeli parantezler ([) ile açarak "alanlar" dizisini tanımlamaya başlayalım.
• İlk alanımızı set olarak tanımlayacağız. "field": "set", bu alana düz metin girişi yapmak istediğimiz anlamına gelir. “Altyazı”:”Set” - "set" adının bir tanımını veriyoruz - bu, düz metin girme adı olacaktır. Ardından, formda alan etiketi olarak gösterilecek olan "Ayarla" başlığını verin.
• Ardından, açıklama alanını aynı şekilde tanımlayın
• 4. satır görüntüyü tanımlar. Burada özel olan, giriş türü olarak başka bir TV ("görüntü" adlı) kullanmamızdır. Bu, MIGX'in, şeklinizi oluşturmak için diğer TV'leri kullanmanıza izin veren çok güçlü bir özelliğidir. Bu durumda "görüntü" TV çok basittir: giriş türü görüntüdür ve 2.2'de onu doğru medya kaynağına atayabilirsiniz. Normal TV'de olduğu gibi şablonlarla ilişkilendirmeniz gerekmez. Bunu yapmanın başka bir yolu (diğer MIGX TV'lerde kullandığım) radyo kutuları veya seçim kutuları yapmaktır.
• Beşinci satır, alan dizisini kapatır. Ayrıca alanı (görüntü) tanımlayan son satırın virgülle bitmediğini unutmayın - bu önemlidir! Bir diziye virgül koyarsanız, JSON ayrıştırılmaz ve formunuz çalışmaz.
• Altıncı satır, sekme nesnesini ve tüm sekme dizisini kapatır.

Böylece, bu şekilde "görüntü" TV'yi yarattık! Verileri doldurmak için zaten bir formunuz olmalı, ancak bunu göstermek için işaretlemeniz gerekiyor...

Sütun İşaretlemesini Ayarlama

Sütun düzeni, kaynağın TV panelindeki bir tablodur. Bu tablonun başlıklarını Sütun İşaretleme giriş seçenekleri aracılığıyla tanımlamanız gerekir. Kullandığım şeyin (tekrar JSON) tanımı: [( "header": "Set", "sortable": "true", "dataIndex": "set" ),( "header": "Description" , "sıralanabilir" : "doğru", "dataIndex": "açıklama" ),( "başlık": "Görüntü", "sıralanabilir": "yanlış", "dataIndex": "image","render": "bu. renderImage" )]

Her satırı inceleyelim:

• Köşeli parantezler ([) ile başlık dizisini ve küme parantezleri (()) ile beşinci sütun başlığını açın.
• Başlığa "Set" adını veriyoruz, sıralanabileceğini (sıralanabilir) belirtiyoruz ve "field":"set" içeren Set Form Sekmelerinin tanımına karşılık gelen "set" parametresini belirtiyoruz.
• Setin Sonu / Açıklamanın Başlangıcı
• Başlığa "Açıklama" adını veriyoruz, sıralanabilir ve onu dataIndex alan açıklamasıyla eşleştiriyoruz.
• Bitiş Açıklaması / Başlangıç ​​Resmi
• "Image" başlığını sıralanamaz olarak adlandırın ve dataIndex - image alanıyla eşleştirin. Ayrıca ExtJS'de çıktı verilerinin görünümünü değiştirmenize izin verecek bir oluşturucu tanımlayacağız. Bu durumda "this.renderImage" oluşturucu, seçilen görüntünün URL'sini otomatik olarak alacak ve bunun yerine bir küçük resim oluşturacaktır.
• Bir Image nesnesinin sonu ve bir dizi başlık.

Bundan sonra bu MIGX TV'yi şablonunuza atayabilir ve sonucu kontrol edebilirsiniz. İşaretleme gösterilmiyor mu? Sekmelere geri dönün ve tüm değerlerin tek tırnak değil çift tırnak içine alındığından emin olun ve fazladan virgül olup olmadığını kontrol edin.

Bilgi

JSON'u doğrulamak için JSONLint kullanın.

• Ayrıntıları doldurun
• Verileri siteye getirin

ws.image şablon değişkenimizi rastgele verilerle doldurun

Bu verileri normal bir TV olarak görüntülemeye çalışırsanız, şöyle bir şey göreceksiniz:

[( "MIGX_id":"1","set":"set1","description":"Sosis çalıp uyanıkken yemek yiyen kediyi işaretle","image":"demo/uroki/15/1 .jpg" ),( "MIGX_id":"2","set":"set1","description":"drum","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":"bu kitapla bir adamı öldürebilirsin","image":"demo/uroki/15/4.jpg" )]

Bu, girilen alanlara ve değerlere sahip bir JSON dizisidir!

MIGX bir getImageList parçacığıyla birlikte geldiğinden, verileri onu kullanarak görüntülemeyi deneyebilirsiniz. Bu snippet için belgeler burada bulunabilir. Veya TV verilerine dayalı olarak &tpl yığınından işaretleme oluşturmak için kullandığım kendi snippet'inizi (parseMIGXToGallery) yapın:

fromJSON($girdi); $çıktı = dizi(); if (!$input || boş($tpl)) "hiçbir şey" döndürmez; foreach ($satır olarak girdi) ( if (isset($set) && !empty($set) && ($set != $satır["set"])) devam edin; $çıktı = $modx->getChunk($ tpl, $satır); ) return implode("\n", $output);

Her satırı inceleyelim:

• $input değişkenini alırız (bu, snippet çağrısındaki &input parametresinde bulunan verileri alır, daha sonra bahsedeceğiz) ve JSON'u bir php dizisine ayrıştırırız.
• Çıktımızı tutacak boş bir dizi ayarlayacağız.
• $input değişkeninin NULL veya False olmadığından emin olalım; bu, JSON'un geçmediği veya geçersiz olduğu anlamına gelir ve ayrıca $tpl değişkeninin (snippet çağrısında &tpl parametresi tarafından geçirilen) boş olup olmadığını kontrol edelim. Her iki koşul da True ise, içerik yöneticisine bir şeylerin yanlış olduğuna dair bir ipucu olarak hizmet edecek bir "boş" hata mesajı yazdıracağız.
• Ardından, $input dizisinin her bir öğesini $satır olarak yineleyin.
• $set değişkeninin ayarlanıp ayarlanmadığını kontrol ederiz (bu, &set parametresindeki snippet çağrısında ayarlanır) ve boş değilse değerini mevcut satırın "set" değerine göre kontrol ederiz. İstediğiniz bu değilse, dizideki bir sonraki öğeye geçin.
• $tpl adında bir yığın alıyoruz ve mevcut satırın değerlerini yer tutucu olarak içine ekliyoruz.
• Foreach döngüsünü kapatıyoruz.
• Son olarak, her bir elemanı bir satır sonu ile ayırarak $output dizisini birbirine yapıştırır ve sayfaya çıkarırız.
• Yukarıdakileri özetlemek için, girdiyi alıyoruz, her satırı gözden geçiriyoruz ve tanımladığımız kümeye ait olup olmadığını kontrol ediyoruz, sonra bir yığın alıyor ve çıktıya kadar her şeyi ekliyor.
• snippet'i çalıştır

Tek ihtiyacımız olan, görüntülerimize ihtiyacımız olan bir snippet çağrısı ve FlexSlider için her şeyi doğru şekilde çıkaracak bir yığın. Snippet'in adı şu şekildedir:

[]` &set=`set1` ]]

Ve images.gallery.tpl yığını:

[+açıklama]]

Ayrıca, FlexSlider belgelerine göre, tüm pasaj çıktısını bir div ve sırasız bir listeye sarmanız gerekir. Her şeyi kolaylaştırmak için hepsini tek bir parçaya koyalım. Yığınım kaydırıcı olarak adlandırılır ve aşağıdakileri içerir:

Bu öbeği kullanarak, içerikte hatırlaması veya kopya kağıdına koyması çok daha kolay olan bir şeye basitçe bağlantı verebilirim.

[[$slider?set=`kümenin adı`]]

Artık FlexSlider'ı döşemeye başlayabilirsiniz.

3. Adım: FlexSlider'ı Kullanma

FlexSlider'ın kullanımı nispeten kolaydır (dosyalarını indirin) ve web sitesinde tonlarca örnek vardır. Ayrıca sayfaya jQuery çağrısını ve onun CSS dosyasını (bir zip dosyasında paketlenmiştir) ve FlexSlider eklentisini (ayrıca zip arşivinde) eklemeniz gerekir. Bundan sonra, aşağıdaki kodu kullanarak doğru öğeyi tetiklemeniz gerekir:

Site, her şeyi dosyanın başına koymanızı tavsiye ediyor, ancak ben şahsen hepsini en alta koydum. Kaydırıcınız sayfanın en üstünde görüntüleniyorsa, onu içine yerleştirmek daha iyidir. sayfa görünmeden önce yüklenmesi için, istediğiniz yere yerleştirin.

Bu kadar! Umarım bu uzun makale, birinin MIGX ve FlexSlider gibi kaydırıcıları kullanmaya başlamasına yardımcı olur!

Bugün hakkında küçük bir makale modx'te bir kaydırıcı nasıl oluşturulur BanerY paketini kullanarak. Bu paket depodan indirilebilir ve kurulabilir.

BanerY ile kaydırıcı oluşturma

Ve böylece statik bir kaydırıcı var, bu işaretlemeyle normal bir önyükleme kaydırıcısı olmasına izin verin:

Amaç, bu işaretlemeden yönetilen bir kaydırıcı oluşturmaktır. Başlayalım.

BannerY'de slayt oluşturmaya başlayalım, bunun için Uygulamalar - BannerY - Konumlar'a gidiyoruz ve bir konum oluşturuyoruz (örneğin, ana sayfa kaydırıcısı).

Bundan sonra, Bannerlar sekmesine gidin ve Yeni banner düğmesine tıklayın. Yeni bir afiş oluşturmak için bir pencere açılacaktır.

Her şeyi dolduruyoruz:

• İsim, [+isim]] kullanılarak görüntülenebilir.
• Bir görüntü seçin - [[+görüntü]].
• Gidilecek URL'yi belirtin - [[+url]].
• Açıklamayı doldurun - [[+description]] - burada, bu arada, sadece metin değil, aynı zamanda normal html de şarj edebilirsiniz ve bu harika.
• Peki, pozisyonu seçin (daha önce oluşturdu).

Ve böylece gerekli sayıda slayt oluşturuyoruz.

Şimdi yukarıdaki işaretlemeyi parçalara ayırmanız ve parçalardaki kodu BanerY sözdizimine uydurmanız gerekiyor.

Bir sınıfa sahip ayrı bir kaydırıcı için bir yığın oluşturun aktif, varsın olsun kayma ve sözdizimini içine enjekte edin:

Şimdi bu parçayı kopyalayın ve ona bir isim verin. slayt2 ve sınıfı kaldır aktif

Eh, aslında, sadece slaytları görüntülemek için kalır.

[]

Sonuç olarak, aşağıdakileri elde ederiz:

İşte bu kadar) BanerY kullanarak modx üzerinde bir kaydırıcı oluşturmak çok kolay.

Evet, bu arada, belgeleri burada: docs.modx.pro/components/bannery/snippet

Slider Revolution, çok çeşitli özellikleri ve kullanım kolaylığı nedeniyle en popüler kaydırıcılardan biridir.
ThemePunch'tan. Bu kaydırıcı 273.441+ kez satın alındı ​​ve dünya çapında 2500000+ site tarafından kullanılıyor.

Aşağıda, bu kaydırıcıyı ücretsiz ve ücretsiz olanlardan ayıran başlıca avantajları listelenmiştir.
en premium analoglar:

• Güçlü görsel düzenleyici - uygun bir menü aracılığıyla kaydırıcı ekranını projenizin ihtiyaçlarına göre özelleştirin.
  her fonksiyon yerli yerinde. Sıkı derecelendirme, kafanızın karışmasına izin vermez. tek zorluk
  ilk kez hepsini deneme arzusu olacak.
• Her slaydın değişkenliğinin kontrolü - bir PC, tablet ve telefonun ekranında blokların planlanan görüntüsü
  görsel düzenleyicide gösterilir. Her cihaz için slaytların boyutunu ayrı ayrı değiştirebilirsiniz.
  Duyarlı şablon, resimlerin ve videoların bozulmasına veya gerekenden daha fazla yer kaplamasına izin vermez.
  uygun görüntüleme.
• Sosyal ağlar ve video barındırma ile çalışın - Slider Revolution beşinci nesil, kaydırıcıya dahil etmenizi sağlar
  Instagramm, Facebook, Flickr, Twitter, Vimeo ve Youtube'dan veriler. Videoyu kendi başınıza yayınlamayı planlıyorsanız
  sunucu, HTML5 dilini kullanabilirsiniz. Kodun bölümleri otomatik olarak yazılacaktır.
• Yüksek performans ve slayt optimizasyonu - eklenti, düzenleme modunda hızlı çalışır ve azaltır
  içeriğin kalitesini kaybetmeden kaydırıcının ağırlığı. Uzun sayfa yükleme süreleri hakkında endişelenmenize gerek yok. özellikle nedir
  WiFi bağlantılarının erişemeyeceği mobil cihazlarla ilgilidir.
• Slaytları değiştirirken çok sayıda özel efekt
• Metin, video ve resimleri görüntülerken birçok animasyon efekti
• Siteyi açarken videoyu otomatik olarak başlatmak veya manuel olarak seçim yapmak, videoyu izlerken kaydırıcıyı durdurmak,
  geri sarma vb.
• Geniş navigasyon ayarları seçimi
• Seo optimizasyonu için yapılandırılırken doğrudan kaydırıcıya bağlantılar içeren duyurular ekleyin
• Google Fonts desteği ve kurulumu
• Tek bir slaytta birçok katman (resimler, videolar, başlıklar ve bağlantılar) kullanarak, bunlardan sayısız vardır.
  birbirinin üzerine bindirerek gerçekçi bir video veya herhangi bir sunum oluşturun.

Dikkat!Çevrimiçi premium kaydırıcı şablonlarını ve kitaplık nesnelerini indirebilmek için, ThemePunch'tan bu metni yazarken maliyeti 19 ABD doları olan ayrı bir lisans satın almanız ve ardından satın alma kodunu aşağıdaki alana girerek etkinleştirmeniz gerekir. aşağıdaki şekil.

Video incelemesi modSliderRevolution

Bugün, MIGX kullanarak bir Bootstrap kaydırıcısının nasıl oluşturulacağına bakacağız. Çalışmaya başlamadan önce, önce bunu ziyaret etmenizi öneririm.

MIGX Yapılandırması Oluşturma

ben yönetime gidiyorum MIGX ve adlı yeni bir öğe ekleyin kaydırıcı, değiştirme alanına şunu yazın " Slayt Ekle"ve sekmeye git" Form sekmeleri».

• Alan adı - başlık, Başlık - Başlık.
• Alan adı - slayt, Altyazı - Slayt, Giriş TV Türü - görüntü.
• Alan adı - açıklama, Başlık - Açıklama.
• Alan adı - idstranici, Başlık - Bağlantı kurulacak belgenin kimliğini belirtin.

• Başlık - Başlık, Alan - başlık.
• Başlık - Slayt, Alan - slayt, Oluşturucu - this.renderImage.
• Başlık - Açıklama, Alan - açıklama.
• Başlık - belge kimliği, Alan - kimlik sayfası.

Not:Özünde, Formtabs'tan öğeler aktarıyoruz. Evet, Sütun genişliği - sütunların genişliği alanlarını da doldurabilirsiniz.

Kaydet (yürüt).

Hiç banyo yapmak istemeyenler için boş bir konfigürasyon oluşturuyoruz ve aşağıdaki kodu buna aktarıyoruz:

( "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", "fields":[ ("MIGX_id":1, "field":"title", "caption":"\u0417\u0430\u0433\u043e\u043b\u043e\u0432 \u043e\u043a" , "açıklama":"\u0417\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a \u0441\u043b\u0430\u0439\u0434\u0430", "açıklama0is_kodu": , "inputTV": "", "inputTVtype":"", "validation":"", "configs":"", "restrictive_condition":"", "display":"", "sourceFrom":"config" , "sources": "", "inputOptionValues":"", "default":"", "useDefaultIfEmpty":"0", "pos":1 ), ( "MIGX_id":2, "field":"slide ", "caption" :"\u0421\u043b\u0430\u0439\u0434", "description":"", "description_is_code":"0", "inputTV":"", "inputTVtype":"image", " validation":"" , "configs":"", "restrictive_condition":"", "display":"", "sourceFrom":"config", "sources":"", "inputOptionValues":"", " default":"" , "useDefaultIfEmpty":"0", "pos" :2 ), ( "MIGX_id":3, "alan":"açıklama", "başlık":"\u041e\u043f\u0438\u0441\u0430\u043d\u0438\u0435", "açıklama":"", " description_is_code":"0", "inputTV":"", "inputTVtype":"", "validation":"", "configs":"", "restrictive_condition":"", "ekran":"", " 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\u04 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u0441\u044b\u043b\u0430\u0442\u044c\u0441\u044f", "açıklama":"", "açıklama_is_kodu":"0", " inputTV":"", "inputTVtype":"", "doğrulama":"", "configs":"", "restrictive_condition":"", "display":"", "sourceFrom":"config", " kaynaklar":"", "inputOptionValues":"", "default":"", "useDefaultIfEmpty":"0", "pos":4 ) ], "pos":1 ) ], "contextmenus":"" , "eylem düğmeleri":"", "sütun düğmesi s":"", "filtreler":"", "genişletilmiş":( "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":" alt", "media_source_id":"", "multiple_formtabs":"", "multiple_formtabs_label":"", "multiple_formtabs_field":"", "multiple_formtabs_optionstext":"", "multiple_formtabs_optionsvalue":"row":4actionbutton , "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":"yes", "getlistwhere":"", "joins":"", "hooksnippets":"", "cmpmaincaption" :"", "cmptabcaption":"", "cmptabdescription":"", "cmptabcontroller":"", "winbuttons" ":"", "onsubmitsuccess":"", "submitparams":"" ), "columns":[ ( "MIGX_id":1, "header":"\u0417\u0430\u0433\u043e\u043b\u043e\ u0432\u043e\u043a", "dataIndex":"header", "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":"slide", "width":100, "sortable":"false", "show_in_grid":1, "customrenderer":"", "renderer":"bu .renderImage", "clickaction":"", "selectorconfig":"", "renderchunktpl":"", "renderoptions":"", "editor":"" ), ( "MIGX_id":3, "header" :"\u041e\u043f\u0438\u0441\u0430\u043d\u0438\u0435", "dataIndex":"açıklama", "genişlik":200, "sıralanabilir":"yanlış", "show_in_grid":1, "özel oluşturucu ":"", "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":" ", "render":"", "clickaction":"", "selectorconfig":"", "renderchunktpl":"", "renderoptions":"", "editor":"" ) ], "category": "")

MIGX yapılandırmasıyla TV oluşturma

MODX ağacında, " Elementler", basmak + noktanın karşısında İlave Alanlar" ve şunu girin:

• "Ad" - kaydırıcı; "İmza" - Kaydırıcı.
• "Giriş Tipi"ndeki "Giriş Seçenekleri" sekmesinde migx'i seçin ve "Yapılandırmalar" alanına şunu girin kaydırıcı.
• "Şablonlar için kullanılabilir" sekmesinde, bu alana giriş yapılabilecek şablonları seçin.

Veri girişi

MIGX ile kaydırıcı alanı atanmış bir belgeyi yapılandırma ile açalım ve içine bazı veriler girelim.

Sayfaya Bootstrap 3 karusel çıktısı

Standart bir Html işaretlememiz var getbootstrap.com/docs/3.3/javascript/#carousel-examples, MIGX için yeniden yapın ve şablonda gerekli yere aşağıdaki kodu yazın:

Ve parçalar oluşturun:

tplsliderGöstergesi:

ve parça tplsliderItem aşağıdaki içerikle:

Önyükleme sayfa başına 4 karusel çıktısı

Önceki durumda olduğu gibi, standart işaretlemeyi alıyoruz getbootstrap.com/docs/4.1/components/carousel/ ve yeniden yapın, sonuç olarak

parça nerede tplsliderGöstergesi aşağıdaki koda sahiptir:

ve parça tplsliderItem aşağıdaki kodla: