Vés al contingut (premeu Retorn)

Zoom imatge o modals

Dificultat Alta

Un modal és un mètode de bootstrap que ens permet que una contingut (imatge o part de la pàgina) s'obri en una finestra destacada.

 


 

Creant un modal o imatge amb zoom

Seleccionant la plantilla

Obrirem l'editor del genweb i buscarem la eina que ens permet obrir uns continguts predefinits anomenats zoom imatge, 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 Zoom imatge. 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 aquesta estructura de la que cal destacar la imatge class=image-inline" que és la miniatura i la que hi ha dintre de la class="modal hide fade" que engloba la resta de la estructura del modal o zoom i que mostrarà l'altre imatge.

<p>
	<a href="#myModal" data-toggle="modal"><img class="image-inline" src="++genweb++static/example-images/anecs-petit.jpeg" /></a>
</p>
<div class="modal hide fade" id="myModal">
	<div class="modal-header">
		<a class="close" data-dismiss="modal">×</a>
		<h3 id="myModalLabel">Títol de la imatge</h3>
		<img src="++genweb++static/example-images/anecs-gran.jpg" />
	</div>
</div>

Un altre exemple:

<!-- Botó -->
<a href="#myModal" role="button" class="btn" data-toggle="modal">Exemple de modal</a>

<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <a class="close" data-dismiss="modal" aria-hidden="true">×</a>
    <h3 id="myModalLabel">Títol del Modal</h3>
  </div>
  <div class="modal-body">
    <p>Un cos tan llarg com us convingui…</p>
  </div>
  <div class="modal-footer">
    <a class="btn btn-primary" data-dismiss="modal" aria-hidden="true">Tanca</a>
  </div>
</div>

Customitzant els nostres modals o imatges amb zoom. Dubtes freqüents

És important, com a qualsevol altre contingut que vulguem editar, tenir clar què volem des del principi. Per exemple, quines elements volem que es destaquin amb un modal o zoom així 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.

Podeu trobar més informació fent clic aquí