This document contains information for slideshow usage in WordPress themes developed by myThem.es team. The usage is the same for all themes. The only thing that may vary from theme to theme is the size of the slideshow (weight and height) in frontend.

For all examples presented in the documentation will be used My Engine Premium theme where the slideshow has 1110px weight and 450px height. The remaining parameters can be customised to all the themes and the usage is identical.

To make yourself clear how to deal with slideshow and how to make a professional one we'll present an full example. This example will be described in the last chapter.

The Slideshow can be composed of images and HTML elements, that can be applied to certain visual effects described by a set of settled functions. So you can get a lot of possibilities for your slideshows that will make your presentations in the most original and creative ways.

Below, you can see examples of slideshows created at the following links and you can make sure about the infinite possibilities of this component.

Examples:

In the themes developed by myThem.es team slideshows are custom posts. This allows you to create multiple slideshows and reusing them.


In the example below is presented a list of slideshows and where they are placed in /wp-admin/.

myThem.es - custom posts slideshow

Note that it looks exactly like the usual posts and also have the same possibilities.

To better understand what is a slideshow we'll create a new one. To create a new slideshow make a click on the link "Add New Slideshow" on one of the links marked with a red border in the picture below.

myThem.es - add new slideshow

The next step you must make the necessary settings. First, it is necessary to fill in the fields marked with a red border. You can fill in exactly like in the picture below, as seen in the illustration, the slideshow doesn't contain a lot of settings.

myThem.es - new slideshow settings

Next you must save the slideshow. To save it click on the "Publish". After you have published your slideshow it will be possible to view the changes using the "Preview Changes" (the "Preview Changes" button will be displayed only after publishing the slideshow). At this stage were added only the slideshow settings, for this reason it will not display anything at the review/refresh (the slideshow is empty). Below are buttons "Publish" and "Preview Changes".

La urmatorul pas trebuie sa salvam slideshow-ul. Pentru a salva slideshow-ul faceti click pe buttonul "Publish". Dupa ce va fi publicat slideshow-ul va fi posibil de vizualizat modificarile utilizind buttonul "Preview Changes" ( buttonul "Preview Changes" va fi afisat numai dupa publicare slideshow-ului). La aceasta etapa au fost adaugate doar setarile pentru slideshow, din acest motiv la vizualizare nu se va afisa nimic ( slideshow-ul este gol ). In imaginea de mai jos sunt prezentate butoanele "Publish" si "Preview Changes".

myThem.es - new slideshow settings

Inainte de a trece la adaugarea continutului in slideshow si descrierea amanuntita a celorlalte componente, vreau sa explic cum se ataseaza un slideshow la o pagina.

Deaorece slideshow-urile sunt custom postari ele pot fi vizulizate ca un articol obisnuit in templat-ul single plus la asta noi am adaugat optiunea de a atasa un slideshow la o pagina. Am adaugat acesta optiunea pentru a oferi posibilitatea de a afisa diferite slideshow-uri pe diferite pagini. Slideshow-ul poate fi vizualizat de catre utilizatori doar daca este atasat la o pagina, astfel vizualizind pagina poate fi vizualizat si slideshow-ul ( in antetul paginii ). Daca slideshow-ul nu este atasat la o pagina el poate fi vizualizat de utilizatori doar accesind linkul direct spre slideshow.

Asadar pentru a atasa un slideshow la o pagina mergem la lista de pagini si alegem pagina la care dorim sa atasam slideshow-ul. Pentru fiecare pagina exista o boxa cu optiuni suplimentare "myThemes Settings" unde avem optiunea "Attach Slideshow" un select cu ultimile slideshow-uri modificate. Mai jos avem o imagine in care sunt prezentate optiunile.

myThem.es - attach slideshow to page

Slideshow-ul este compus din slidere iar un slider poate contine si layere. Pentru a intelege mai bine ce reprezinta aceste elemente vom adauga citeva din ele in slideshow.

Pentru a adauga un slider utilizam butonul "Add new slide". In continuare adaugam 3 slidere. In imaginea de mai jos avem trei slidere proaspat adaugate.

myThem.es - add new sliders

In continuare vom analiza un slider si componentele sale. In slider avem posibilitatea sa adugam o imagine de fundal pentru el.

Pentru a adauga imaginea de fundal utilizam buttonul "Choose File" exemplu in imaginea de mai jos.

myThem.es - add new sliders

Dupa ce se face un click pe buttonul "Choos File" va fi accesibil managerul de fisiere Media ( functionalitate de la WordPress ). Acest manager ne permite sa utilizam o imagine existenta in librarie sau sa incarcam o imagine noua. Exemplu mai jos.

myThem.es - media uploader

Incaz ca dorim sa schimbam ordinea sliderelor o putem face utilizind bara sura din antetul sliderului, pe care este scris "This is Drag & Drop Element". Pentru a schimba ordinea sliderelor punem cursorul mousului pe bara sura tinem apsat butonul sting al mousului si miscam cursorul in jos sau in sus. Exemple in imaginile de mai jos.

myThem.es - media uploader
myThem.es - media uploader in imaginea de mai sus este prezentat proprietatea drag and drop slider

Pentru a sterge un slider utilizam buttonul "Remove slide"

In interiorul unui slide avem posibilitatea de a creea Layere utilizind buttonul "Add layer" si avem posibilitatea sa le ascundem sau sa le afisam cu ajutorul buttonului "Show/Hide". Layerele sunt elemente aditionale intr-un slide, ele pot fi dinamice sau statice. In imaginile de mai jos avem citeva exemple.

myThem.es - layers buttons In imaginea de mai sus sunt prezentate buttoanele "Add layer" si "Show/Hide" myThem.es - show layers In imaginea de mai sus sunt prezentate layerele dintr-un slide si buttoanele "Show/Hide"

In continuare voi prezenta citeva exemple de layere

myThem.es - layers examples 1 My Engine Premium Slide Nr. 2 myThem.es - layers examples 1 My World Width Gass And Dew Premium Slide Nr. 1 myThem.es - layers examples 1 My Way Premium Slide Nr. 3

Layerele nu pot fi sortate dar acest lucru nu este necesar deorece toate evenimentele legate de layere se executa concomitent.

Pentru a sterge un layer este necesar sa utilizati butonuls "Drop Layer" exemplu in imginea de mai jos.

myThem.es - drop layers

Exista doua tipuri de layere exista layere de tip HTML si imagine. Layerele de tip HTML permit utilizarea codului HTML si CSS. In imaginea de mai jos este un exemplu.

myThem.es - layers type

Acum vom prezenta modul de aranjare a layerelor in slider. In primul rind trebuie de mentionat ca suprafata sliderului reprezinta un system de coordonate cartezian. De exemplu coltul de sus sting reprezinta originea sistemul de coordonate. In imaginea de mai jos este o reprezentare a slideshow-ulu si a sistemului de coordonate utilizat.

myThem.es - coordinate system

Deci avem un system de coordonate cartezian cu originea in punctul O(0,0) si axele Absciselor OX si Ordonatelor OY.

Deci daca dorim sa pozitionam un layer intr-un anumit loc pe supra fata sliderului trebuie sa identificam coordonatele coltului sting de sus pentru acel layer. In imaginea de mai jos este adus un exemplu.

myThem.es - coordinate system layer

Identificind coordonatele coltului de sus stinga ( X = 128px , Y = 219px ) putem completa date pentru layer ca in imaginea de mai jos

myThem.es - test layer

Astfel putem pozitiona orice layer in orice pozitie. Daca un layer are definite coordonatele astfel incit partial sau totalmente nu se afla pe suprafata slideshow-ului atunci partea care nu se afla pe suprafata slideshow-ului nu va fi vizibila.

Unui layer i se poate atasa un efect vizual sau o functie ce descrie miscarea de translatie pentru acel layer. Exista un singur efect vizual disponibil si anume efectul "Show", restul sunt functii.

Efectul show ne permite sa afisam layerele pe o anumite pozitii adica in anumite puncte de pe suprafata slideshow ( coordonatele X, Y ).

Spre deosebire de efectul vizual pentru o functie sunt necesare doua perechi de coordonate si timp de propagare. In imaginea de mai jos este un exemplu care contureaza diferenta dintre efect si functie.

myThem.es - layer function

Fiecare functie ce descrie o miscare de translatie are o dinamica specifica. Detalii despre aceste functii si dinamica lor puti gasi la adresa : http://easings.net/

Layerele carora le sunt atribuite miscari de translatie le vom numi layere dinamice. In continuare vom descrie modul de adaugare a layerelor dinamice. Pentru a adauga un layer dinamic trebuie sa stabilim o traiectorie, sa alegem o functie ce va determina dinamic layerului pe aceasta traiectorie si trebuie sa stabilim timpul de propagare.

Trebuie sa mentionez ca nu exista careva restrictii la stabilirea traiectoriei sau directie. Pentru a stabili traiectoria este necesar sa alegem doua perechi de coordonate ( doua puncte ) care pot fi atit pe suprafata slideshow-ului cit si in afara. Astfel daca unim aceste doua puncte cu o line imaginara vom obtine traiectoria pe care se va misca layerul. In imaginea de mai jos este un exemplu de traiectorie.

myThem.es - layer trajectory

Directia se stabileste automat si anume directia de miscare va fi de la punctul de start ( coordonatele X , Y ) spre punctul final ( coordonatele End X, End Y) pe linia imaginara dintre aceste puncte. In imaginea de mai jos este un exemplu de directie pe traiectoria stabilita.

myThem.es - layer direction

In imaginea de mai jos este prezentat modul de completare a datelor pentru un layer dinamic ce se va misca pe traiectoria definita de punctele din imaginea de mai sus, respectind aceasi directie de la A la B.

Aveti libertatea de a utiliza oricare din functii, eu voi utiliza functia "easeOutBounce" si timpul de propagare 2000 ( timpul de propagare este in milesecunde )

myThem.es - layer function form

Dupa cum am mentionat intr-unul din paragrafele anterioare toate layerele i-si executa evenimentele concomitent fie este vorba de o functie fie este vorba de efectul "show". Dar uneori este necesar de a se executa evenimentele unul cite unul cu un anumit interval de timp inrte doua evenimente, pentru aceasta se utilizeaza parametrul "Timeout". Parametrul "Timeout" reprezinta timpul de asteptare, in milesecunde, inainte de a executa evenimentul unui layer.