|
   |
| Comunitatea uCoz » Configurări ale sistemului uCoz » Configurarea design-ului » Cum adaptăm un informer pentru a fi implementat în slideshow |
| Cum adaptăm un informer pentru a fi implementat în slideshow |
În cadrul tutorialul de mai jos se regăsesc instrucțiunile cu privire la instalarea și adaptarea unui informer pentru a fi implementat în slideshow.
Cum adaptăm un informer cu elementele intrărilor a unui modul. Ca exemplu să luăm acest http://forum-ro.ucoz.net/forum/23-637-1 slideshow care funcționează perfect. Ni se oferă 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> În codul dat, elementele care se afișează în 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 că se repetă. Deci un element repetitiv este imaginea: Cod <img src="images/toystory.jpg" alt="" /> La al doilea element este adăugată o descriere și link la imagine. La elementul 4 e puțin mai complicat. Acestui element i se atribuie un cod care adaugă o descriere, iar în această 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 păcate acesta nu poate fi adaptat în informer deoarece este separat de codul de bază (imagine) Deci să luăm al doilea element repetitiv pentru adaptare. Creem un informer pentru modulul load, se poate pentru oricare.  Conținutul informerului înlocuiți cu al 2-lea element repetitiv. Acum adaptăm acest element în 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> http://dev7studios.com - schimbăm cu adresa intrării - $ENTRY_URL$ images/up.jpg - schimbăm cu adresa imaginii în funcție de celula pe care o folosiți - $IMG_URL1..10$ sau $SCREEN_URL$ Titlu imaginii care e afișată în subsol, îl înlocuiți cu $TITLE$ Rezultatul final va fi astfel: Cod <a href="$ENTRY_URL$"><img src="$IMG_URL1$" alt="" title="$TITLE$" /></a> În unele cazuri slideshow-ul are și un mesaj. Nu vă sfătuiesc să folosiți tagul $MESSAGE$. Celula tagului rezervat $MESSAGE$ 99% din cazuri conține tagurile div, span, br și altele. Din cauza acestora slideshow-ul se va deforma. În aceste cazuri ar trebui să-l scoateți din slider Codul informerului ($MYINF_ID$) îl înlocuim cu elementele repetitive. În urma modificărilor, codul de la care am pornit 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> După cum vedeți am exclus 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 aparține unui element repititiv însă nu este încadrat în el. Ca să excludem orice întrebare, luăm ca exemplu acest slideshow http://newwpthemes.com/demo/Avia/ Elementul repetitiv adaptat și adăugat în 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> După cum vedeți, la acest slider elementul repetitiv nu se limitează doar la un link cu imagine, iar mesajul l-am eliminat pentru a nu deforma aspectul. Tutorial oferit de: MaxRom
  |
multumesc de tutorial!!!
Adăugat (16/03/2014, 12:20 PM) Adăugat (16/03/2014, 12:24 PM) |
Daca vreti sa nu va mai chinuiti atat intrati aici "http://slideful.com" iti faci slideul cum vrei poti sa dai si a doua varianta ca iti da voiie sa pui caseta de text transparenta jos dupa aceea urmati pasii pe care vii da site-ul respectiv si la sfarsit copiati codul html si-l puneti unde vreti voi pa!
Material modificat de florin567 - Joi, 22/01/2015, 1:17 PM
|
| |||
| |||