Vés al contingut (premeu Retorn)

Carrusel d'imatges

Dificultat Alta

El carousel és un seguit d'items, normalment imatges que van passant de forma automàtica o mitjançant la interacció de l'usuari, fent ús de la navegació.

 

IMPORTANT!! L'editor TinyMCE no permet afegir scripts, el que fa es comentar-ho afegint un codi // <![CDATA[ contingut // ]]> que fa que no es pugui utilitzar. Una solució pasa per anar al menú superior del genweb, fer clic al nom del teu usuari i anar a preferències i seleccionar Editor Wysiwyg = CAP. D'aquesta forma no tenim cap editor visual i podem editar en html pur i el codi no serà comentat. Un cop desem, podem tornar a activar l'editor visual, però hem de tenir molt en compte que cada actualització de pàgines on hi hagin scripts, si tenim activat l'editor visual, tornaran a comentar-se. 

 


Creant un Carrusel

Seleccionant la plantilla

Obrirem l'editor del genweb i buscarem la eina que ens permet obrir uns continguts predefinits anomenats plantilles, els quals ens insereixen trossos de codi html que hem d'adaptar a la realitat que volem que finalment tingui el nostre contingut i per això sovint hem d'editar codi html.

Farem clic a la barra d'eines a la part superior i del desplegable seleccionarem l'item que diu carousel d'imatges (anglicisme de carrusel). Tot seguit farem clic al botó de la part inferior on posa insereix.

D'aquesta forma el codi predefinit a la plantilla s'inserirà a la posició en que haguem deixat el cursor a l'editor de la nostra pàgina (per defecte o inserirà a l'inici del document)

Visualitzant el codi HTML

El codi html és bàsic per editar continguts en qualsevol plataforma CMS com per exemple aquesta, es per això que us deixem un enllaç a aquest tutorial on podeu trobar una guia de referència.

Un cop tenim carregada la plantilla podem accedir al codi fent clic al botó HTML de la barra d'eines del nostre editor.

Interpretant el codi HTML

El codi html que forma la pàgina se'ns mostrarà d'una forma similar a la de la imatge, però és aconsellable tenir un editor html extern ja sigui d'un software amb llicència descarregable a la distribució de software d'UPCnet o algun que sigui gratuït com per exemple Notepad++ ja que per segons quin nivell d'edició de codi ens resultarà més fàcil editar el codi en aquests programes i inserir-lo de nou un cop editat. 

El primer que aconsellem és tabular el codi, es a dir, identificar on comencen les etiquetes <tags> capes <div> etc que engloben altres capes i etiquetes.

En aquest cas tenim una capa contenidora del carrusel que es diu <div class="carousel slide" id="myCarousel"> i un altre sub-contenidor que es diu <div class="carousel-inner">

Dintre d'aquest sub-contenidor iteren les capes: 

<div class="active item"> (el paràmetre active indica que és la primera imatge en sortir, la resta són identificats com a <div class="item">

tot seguit bé la imatge que utilitzarem

<img alt="" src="++genweb++static/example-images/car1.jpg" />

Més endavant el títol i descripció

<div class="carousel-caption">

<h4>Títol de la imatge 1</h4>
<p>Descripció de la imatge 1.</p>
</div> 

un cop acabem amb la iteració de tots els items de carrusel que volem tanquem la capa carousel-inner

</div> 

implementem els controls del mateix

<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>

<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>

i tanquem la capa contenidora del carrusel id=myCarousel

<div id="myCarousel" class="carousel slide">
  <!-- Carousel items -->
  <div class="carousel-inner">
    <div class="active item">
      <img src="..." alt="">
      <div class="carousel-caption">
        <h4>Títol de la imatge</h4>
        <p>Descripció de la imatge.</p>
      </div>
    </div>
    <div class="item">
    …
    </div>
    <div class="item">
    …
    </div>
  </div>
  <!-- Carousel nav -->
  <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
  <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
</div>

Customitzant el nostre Carrusel. Dubtes freqüents

És important, com a qualsevol altre contingut que vulguem editar, tenir clar què volem des del principi. Per exemple, saber quina mida han de fer les imatges que composaran el nostre carrusel, quantes volem, pujar-les prèviament per després poder trobar la ruta per afegir-les i quantes consideracions més siguin necessàries en funció del que vulguem aconseguir. Customitzar plantilles avançades com aquesta requereix un cert nivell de coneixement html. 

Per defecte el carrusel es visualitza amb l'autoplay desactivat, és necessari fer clic a una fletxa de navegació per activar-lo (més avall expliquem com activar-ho per defecte), podem personalitzar la velocitat de les transicions del carrusel amb la propietat data-interval, assignant-li un valor en milisegons (3000 = 3 segons) per defecte aquest valor esta fixat a 5000 (5 segons). El carrusel es para si situem el cursor del ratolí a sobre de la imatge, per permetre que llegim la informació.
El codi quedaria quelcom similar a això:

<div class="carousel slide" id="myCarousel" data-interval="3000"></div>

Per a enllaçar les imatges senceres i no només els títols o part dels texts de cada pantalla del carrusel només cal posar el codi d'enllaç a cada imatge de fons <div class="item"> <a href="http://www.domini.com"><img src="ruta de la imatge"> </a>
 
Just després del contenidor principal id="myCarousel" opcionalment podem afegir els indicadors (boletes) amb el codi <ol class="carousel-indicators">

<div class="carousel slide" id="myCarousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li class="active" data-target="#myCarousel" data-slide-to="0"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Fi Indicators -->


Activació del Autoplay

Per raons d'accessibilitat l'autoplay esta desactivat per defecte, i és necessari fer clic per activar-ho. A la versió de bootstrap 2.3.2 que porta instal·lada Genweb v4 no es pot activar d'una forma trivial, amb un paràmetre, cal afegir un petit script, com per exemple aquest:

<script type="text/javascript">
             $(document).ready(function(event) {
                 intervalid = setInterval(function(event) {
                     $('.carousel').carousel('cycle')
                     clearInterval(intervalid)
                     console.log('interval')
                 }, 2000)
             })
            
</script>

IMPORTANT!! L'editor TinyMCE no permet afegir scripts com l'anteriorment esmentat, el que fa es comentar-ho afegint un codi // <![CDATA[ contingut // ]]> que fa que no es pugui utilitzar. Una solució pasa per anar al menú superior del genweb, fer clic al nom del teu usuari i anar a preferències i seleccionar Editor Wysiwyg = CAP. D'aquesta forma no tenim cap editor visual i podem editar en html pur i el codi no serà comentat. Un cop desem, podem tornar a activar l'editor visual, però hem de tenir molt en compte que cada actualització de pàgines on hi hagin scripts, si tenim activat l'editor visual, tornaran a comentar-se.