V tomto článku vám řeknu, jak vytvořit trendy čip pro stránky v naší turbulentní době - slideshow, tzn. pomocí vizuálního posuvníku změnit obsah v bloku, jehož ukázku můžete vidět na hlavní stránce tohoto webu. Umožňuje nejen diverzifikovat design webu. ale také ušetříte místo na stránce zobrazením různého obsahu v jednom bloku.

Podle mého názoru je v současnosti nejlepším modulem pro tvorbu takovéto prezentace na Drupal 7 modul Views Sledeshow.Tento modul umožňuje procházet jakýmkoli formulářem vytvořeným pomocí CCK, ať už se jedná pouze o obrázky, textová pole nebo text s obrázky a hypertextovými odkazy a obrázky na pozadí. Vytvoření takového slideru navíc nevyžaduje žádné znalosti PHP a JS ani spoustu času na nastavení. Vše se dělá velmi jednoduše.

Vytvoření posuvníku v zobrazeních 3

Nejprve musíme na web nainstalovat plugin jQuery Cycle. Z tohoto odkazu vyberte plnou verzi pluginu (Cycle Plugin) a zkopírujte kód. V počítači vytvoříme textový soubor, přejmenujeme ho na jquery.cycle.all.js a vložíme do něj zkopírovaný kód Cycle Plugin. Poté na webu v adresáři sites / all vytvořte složku libraries, pokud nebyla vytvořena dříve, a vytvořte v ní složku jquery.cycle. Do této složky je umístěn soubor jquery.cycle.all.js, tzn. úplná cesta k souboru bude sites/all/libraries/jquery.cycle/jquery.cycle.all.js.

Poté si stáhněte modul Views Slideshow, nainstalujte a spusťte obvyklým způsobem.Slideshow vyžaduje předinstalované moduly Views, Chaos tools a Libraries, nicméně obvykle se tyto moduly používají k provádění mnoha dalších úkolů kromě Sledeshow. Po instalaci povolte moduly Views Slideshow a Views Slideshow:Cycle.

Vytvořte nový typ materiálu, nazval jsem ho Posuvník. Vytvoříme v něm nové pole typu Dlouhý text a shrnutí (celý text s oznámením), nazveme jej field_slideshow. Nyní by bylo hezké vytvořit několik stránek tohoto typu materiálu a text vyplnit pole field_slideshow tohoto materiálu, aby bylo v pohledu co zobrazovat. Přidal jsem tři materiály s názvem Slideshow 1, 2, 3.

Dále vytvořte nový pohled, nazvěte jej Prezentace. Typ - pole, zobrazit obsah, typ obsahu Posuvník, vytvořit - blok, formát zobrazení (Formát zobrazení) - Prezentace, z polí je ve zkratce vše znázorněno na obrázku:

Stiskněte tlačítko „Pokračovat v úpravách“ (Pokračovat a upravit), otevře se nové okno, ve kterém v sekci „Pole“ (Pole) stiskneme tlačítko „přidat“ (přidat), v otevřeném rolloutu „ Přidat pole“ (Přidat pole ) vyberte vytvořený typ pole Obsah: Field-Slideshow, klikněte na „Použít“.

V novém okně zrušte zaškrtnutí políčka Vytvořit štítek a znovu klikněte na Použít.

Odstraňte výchozí pole z rozbalení "Pole" Obsah: Název. Kritéria řazení Obsah: Datum příspěvku (popis), nastaveno jako výchozí , můžete ho zatím ponechat.

V rolování pageru klikněte na položku "Zobrazit zadaný počet položek" a nastavte "zobrazit všechny položky" (Zobrazit všechny položky).

Ve skutečnosti je tím instalace prezentace dokončena. Pokud kliknete na tlačítko “Aktualizovat náhled”, můžete vidět, jak se mění řádek s textem v bloku, tzn. změna uzlů z typu materiálu Slider.

Přechodové efekty a další nastavení můžete změnit kliknutím na řádek "Nastavení" vedle "Formát: Prezentace" :

Nastavení polí pro výstup v prezentaci

Aby se v posuvníku zobrazilo pole, které potřebuji, nastavím styly css, tzn. šířka, výška, výplň, obrázek na pozadí atd. jako u normální html stránky. Stejným způsobem jsem vytvořil hypertextové odkazy. Příklad kódu, který jsem zadal do pole field_slideshow v poli Typ obsahu Slider:

1 2 3 4 5 6 7 8 9 10 11 12

Text odkazu

Text pole posuvníku

Pokud si přejete, nastavením odsazení nebo umístěním můžete do tohoto kódu vložit obrázky, ale všechny obrázky, které jsem potřeboval ve Photoshopu, jsem našrouboval na jeden obrázek na pozadí, jehož velikost se rovnala velikosti posuvného pole.

Kategorie: