Egyéni szkriptek panel

A modulnak lehet saját CSS- és JavaScript-kódja a szerkesztőben megadott beállítások mellett. A CSS a modul megjelenését változtatja, a JavaScript vezérli a modult, vagy reagál arra, amit a modul csinál (például diaváltásra). Az Egyéni szkriptek panelen írod meg ezt a kódot. A panelnek egy CSS- és egy JavaScript-szerkesztője van, mindkettőhöz külön fiókból illeszthetsz be kész részleteket.

A panel megnyitása

1. A modulszerkesztő felső sávjában kattints a Beállítások gombra.
2. A Beállítások oldalsávon kattints az Egyéni szkriptek sorra.

https://minta-bolt.hu/wp-admin/admin.php?page=revslider&view=editor&module=1&slide=1

A képen a két fül (Egyedi CSS és Egyedi JavaScript) és a sorszámozott, még üres kódszerkesztő látszik.

A kód a modullal együtt mentődik, és mindenhol megjelenik az oldalon, ahol a modul látszik. A JavaScript akkor fut le, amikor a modul felépül az oldalon.

Az egyéni CSS-t és JavaScriptet csak WordPress-adminisztrátor mentheti. Ha más szerepkörű felhasználó menti a modult, a korábbi kód változatlanul megmarad.

Egyedi CSS

A fülön a CSS-szerkesztő áll, jobb szélén pedig a Tags fiók a modult alkotó elemek nevével. A szerkesztő sorszámozott, és CSS-ként színezi a kódot. A CSS a modullal együtt kerül az oldalra.

A modul elemeit a szerepük alapján nevezték el, például sr7-module az egész modul, sr7-slide egy dia, így azonosító nélkül is meg lehet célozni őket szabállyal.

A Tags a panel jobb szélén nyitja ki a fiókot, még egy kattintás bezárja. Minden sorának plusz gombja üres CSS-szabályt szúr be az adott elemhez a kurzor helyére.

Bejegyzés	Beszúrt szabály
Main Module Wrapper	sr7-module, az egész modult körbevevő elem.
Module Content	sr7-content, a diákat tartalmazó elem.
Carousel Container	sr7-carousel, a körhinta diáit tartalmazó elem.
Slide Container	sr7-slide, minden dia.
Row Container	sr7-row, minden sorréteg.
Column Container	sr7-col, minden oszlopréteg.
Shape Layer	sr7-shp, minden alakzatréteg.
Text Layer	sr7-txt, minden szövegréteg.
Image Layer	sr7-img, minden képréteg.

Egyedi JavaScript

A fülön a JavaScript-szerkesztő áll, jobb szélén fiókkal, amelyben három fülön találsz beszúrható részleteket: Methods, Events és Examples. A részletek a modul API-objektumát hívják, amelynek neve a revapi és a modul azonosítója, például revapi113. Az azonosítót a rendszer a beszúráskor kitölti.

A szerkesztő sorszámozott, JavaScriptként színezi a kódot, és a kód a modul felépülésekor fut le az oldalon.

Methods

A modul API-jának parancsait sorolja fel. A bejegyzés fölé víve a leírása, a plusz gombra víve a parancs látszik. A plusz gomb a parancsot magyarázó megjegyzéssel együtt a szerkesztőbe szúrja a kurzor helyére.

Bejegyzés	Beszúrt parancs és hatása
Start Slider	revapi.start(): elindítja az API-ra váró modult.
Pause Slider	revapi.pause(): szünetelteti a modul haladását.
Forced Pause	revapi.forcedPause(): szünetelteti a modult, és szüneteltetve is tartja, még ha újra látótérbe ér is, amíg a resume() meg nem hívódik.
Resume Slider	revapi.resume(): folytatja a modul haladását.
Previous Slide	revapi.prevSlide(): az előző diát mutatja.
Next Slide	revapi.nextSlide(): a következő diát mutatja.
External Scroll	revapi.scroll(offset): az oldalt a megadott pozícióra görgeti.
Max Slides	revapi.maxSlide(): a diák számát adja vissza.
Last Slide	revapi.lastSlide(): a navigációval elérhető utolsó diát adja vissza.
Go To Slide	revapi.showSlide(2): egy diát mutat. Az érték lehet "first", "last", "random", egy dia azonosítója, "+2" vagy "-1" (ennyi diával léptet), vagy 0-tól számolt sorszám.
Current Slide	revapi.currentSlide(): az aktuális dia sorszámát, kulcsát és sorrendjét adja vissza.
Redraw Slider	revapi.redraw(): újrarajzolja a modult.
Kill Slider	revapi.kill(): leállítja a modult, és eltávolítja az oldalról.
Go To Frame	revapi.playScene(layerid, scene): lejátssza egy réteg animációs jelenetét, például "in", "out" vagy "scene_1".
Remove Slide	revapi.removeSlide(slidekey): eltávolít egy diát a modul ciklusából.

Events

A modul futás közben küldött eseményeit sorolja fel. A fiókot az Events fülre váltva éred el. A plusz gomb az eseményre figyelő részletet szúr be a kurzor helyére. A részlet az esemény adatait a böngészőkonzolra írja ki, saját kód kiindulópontjaként.

Bejegyzés	Esemény és mikor érkezik
Modal Loaded	sr.modal.loaded: betöltött egy modálként használt modul.
Modal Open	sr.modal.open: kinyílik egy modál.
Modal Close	sr.modal.close: bezárul egy modál.
Module Ready	sr.module.ready: a modul elkészült.
Slide After Change	sr.slide.afterChange: a diaváltás után, az aktuális és az előző diával.
Slide Ended	sr.slide.ended: egy dia a végére ért, az aktuális és a következő diával.
Slide Before Change	sr.slide.beforeChange: a diaváltás előtt, az aktuális és a következő diával.
Slide Pause	sr.slide.pause: a modul szünetel.
Slide Resume	sr.slide.resume: a modul folytatja.
Media Update	sr.media.update: egy videó- vagy hangréteg lejátszója állapotot váltott.
Layer Action	sr.layer.action: lefutott egy réteg animációja vagy művelete, a réteggel és a jelenettel.
Module Finished	sr.module.finished: a modul minden diát lejátszott, és megállt.

Examples

Gyakori feladatokra adott teljes szkriptek. A fiókot az Examples fülre váltva éred el. A plusz gomb a szkriptet a módosítandó részeket jelző megjegyzésekkel együtt illeszti a szerkesztőbe a kurzor helyére.

Bejegyzés	Mit csinál
External Nav Buttons	A prev-btn és next-btn azonosítójú két oldalelemre kattintva az előző, illetve a következő dia látszik.
Custom Keyboard Navigation	Az A billentyű az előző, a D a következő diát mutatja.
Slide Counter (X of Y)	Minden diaváltáskor az aktuális dia számát és a diák számát (például 2 / 5) beírja a slide-counter azonosítójú elembe.
Go To Slide (External)	Minden data-goto-slide attribútumú elemre kattintva az attribútumban megadott sorszámú dia látszik, a 0 az első dia.
GA4 / GTM Analytics	Minden diaváltáskor rs_slide_view eseményt küld a Google Tag Managernek a modullal, a dia sorszámával és azonosítójával. A Google Tag Managernek vagy a gtag.js-nek már az oldalon kell lennie.
Style Page per Slide	Az oldal body elemére az aktuális diához tartozó osztályt teszi (például sr-slide-0), így az oldal többi eleme diánként formázható.
Reduce Motion (Accessibility)	Azoknál a látogatóknál, akiknek a rendszere csökkentett mozgásra van állítva, az első diaváltás után szünetelteti a modult.
Scroll to Next Section	Miután a modul minden diát lejátszott, az oldalt a next-section azonosítójú elemhez görgeti.

https://minta-bolt.hu/wp-admin/admin.php?page=revslider&view=editor&module=1&slide=1

A képen az Egyedi JavaScript fül látszik a sorszámozott szerkesztővel.