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.

 


 

Crear un modal o imatge amb zoom

Seleccionar la plantilla

Obrirem l'editor del Genweb i buscarem el botó que ens permet obrir uns continguts predefinits, en concret l'anomenat Zoom imatge, el qual ens deixa inserir trossos de codi html que hem d'adaptar a la realitat que volem, sovint editant 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 la qual hàgim deixat el cursor a l'editor de la nostra pàgina (per defecte o inserirà a l'inici del document).

Visualitzar el codi HTML

El codi html és bàsic per a editar continguts en qualsevol plataforma CMS, com per exemple, aquesta. És 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.

Interpretar 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 programari amb llicència descarregable de la pròpia web de 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 qual 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 l'estructura del modal o zoom i que mostrarà l'altra 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>

Personalitzar 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, quantes pestanyes volem d'inici i quins seran els continguts que volem que es mostrin, així com totes les consideracions que siguin necessàries en funció del que vulguem aconseguir. Personalitzar plantilles avançades com aquesta requereix un cert nivell de coneixement de codi html.

Podeu trobar més informació al respecte, fent clic aquí.