In disperarea unora de a avea un slideshow si incapacitatea acestora de a cauta pe forum sau de a citi instructiile de instalare si adaugare a informerului in el, am hotarat sa creez acest tutorial.
Deci cum sa adaptam un informer cu elementele intrarilor a unui modul.
Ca exemplu sa luam acest http://forum.ucoz.ro/forum/23-637-1 slideshow care functioneaza perfect.
Ni se ofera codul:
Cod
<div id="wrapper">
<div class="slider-wrapper theme-default">
<div class="ribbon"></div>
<div id="slider" class="nivoSlider">
<img src="images/toystory.jpg" alt="" />
<a href="http://dev7studios.com"><img src="images/up.jpg" alt="" title="This is an example of a caption" /></a>
<img src="images/walle.jpg" alt="" data-transition="slideInLeft" />
<img src="images/nemo.jpg" alt="" title="#htmlcaption" />
</div>
<div id="htmlcaption" class="nivo-html-caption">
<strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>.
</div>
</div>
</div>
In codul dat, elementele care se afiseaza in browser sunt:
Cod
<img src="images/toystory.jpg" alt="" />
<a href="http://dev7studios.com"><img src="images/up.jpg" alt="" title="This is an example of a caption" /></a>
<img src="images/walle.jpg" alt="" data-transition="slideInLeft" />
<img src="images/nemo.jpg" alt="" title="#htmlcaption" />
Le vom numi elemente repetitive pentru ca se repeta.
Deci un element repetitiv este imaginea:
Cod
<img src="images/toystory.jpg" alt="" />
La al doilea element este adaugat o descriere si link la imagine.
La elementul 4 e putin mai complicat. Acestui element i se atribuie un cod care adauga o descrie iar in aceasta descriere este un link.
Cod
<div id="htmlcaption" class="nivo-html-caption">
<strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>.
</div>
Din pacate acesta nu poate fi adaptat in informer intr-un cat este separat de codul de baza (imagine)
Deci sa luam al doilea element repetitiv pentru adaptare.
Creem un informer pentru modulul load, se poate pentru oricare.
Continutul informerului inlocuiti cu al 2-lea element repetitiv.
Acum adaptam acest element in informer:
Cod
<a href="http://u.to/h6RPBg" title="http://dev7studios.com"><img src="images/up.jpg" alt="" title="This is an example of a caption" /></a>
[texterror6]http://dev7studios.com - schimbam cu adresa intrarii - $ENTRY_URL$
images/up.jpg - schimbam cu adresa imaginii in dependenta care celula o folositi - $IMG_URL1..10$ sau $SCREEN_URL$
Titlu imagini care e afisata in subsol, il inlocuiti cu $TITLE$
[/texterror6]
Rezultatul final va fi astfel:
Cod
<a href="$ENTRY_URL$"><img src="$IMG_URL1$" alt="" title="$TITLE$" /></a>
In unele cazuri slideshow are si un mesaj. Nu va sfatui sa folositi tagul $MESSAGE$. Celula tagului rezervat $MESSAGE$ 99% din cazuri contine tagurile div, span, br si altele. Din cauza acestora slideshow-ul se va deforma. In aceste cazuri ar trebui sa-l scoateti din slider
Codul informerului ($MYINF_ID$) il inlocuim cu elementele repetitive. In urma modificariilor codul de la care am inceput modificarile a ajuns astfel:
Cod
<div id="wrapper">
<div class="slider-wrapper theme-default">
<div class="ribbon"></div>
<div id="slider" class="nivoSlider">
$MYINF_ID$
</div>
</div>
</div>
Dupa cum vedeti am exculs codul:
Cod
<div id="htmlcaption" class="nivo-html-caption">
<strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>.
</div>
acesta apartine unui element repititiv insa nu este incadrat in el.
Ca sa excludem orice intrebare, luam ca exemplu acest slideshow http://newwpthemes.com/demo/Avia/
Elementul repetitiv adaptat si adaugat in informer va fi astfel:
Cod
<div class="fp-slides-items" style="position: absolute; top: 0px; left: -930px; display: none; z-index: 5; opacity: 1; width: 930px; height: 300px;">
<div class="fp-thumbnail">
<a href="$ENTRY_URL$" title="$TITLE$">
<img src="$IMG_URL1$" width="930" height="300" alt="$TITLE$" style="border-radius: 25px; "></a>
</div>
</div>
Dupa cum vedeti, la acest slider elementul repetitiv nu se limiteaza doar la un link cu imagine, iar mesajul l-am eliminat pentru a nu deforma aspectul.
© Copyright MyCorp © 2024
