Hace poco un colega me preguntó sobre cómo utilizar lightbox con la extensión Moset Tree para ver las imágenes que presentamos al pie, en las entradas del componente en su front-end. Me puse a hurgar en el foro de los desarrolladores y di con un plugin que sirve para eso pero... es de pago, es decir, para descargarlo hay que suscribirse pagando un abono para luego acceder...

Dicho plugin está basado en Savant2, un excelente paquete de clases PHP con licencia GNU que permite crear plantillas. Como no tengo los suficientes conocimientos aún como para hacerlo con él, decidí utilizar Lightbox del que tengo mejor experiencia ya que he hecho algunas cosas con esta excelente y conocida aplicación javascript. A continuación les explico como hacerlo.

La vista front-end del álbum de imágenes a que me refiero se ve como esto:

Vista de Album de Imágenes de Moset Tree
Lo que hará Lightbox será mostrarnos en una ventana emergente la imagen ampliada, que se verá como esto:

Vista de la Ventana Emergente

Lo primero que tenemos que hacer es cargar la aplicación en la web para poder utilizarla. Para ello, subiremos el paquete dentro del template, en mi caso lo hice en: "raízJoomla/templates/mi_template/lightbox". (el paquete se los dejo adjunto a este artículo pero lo pueden descargar de su web).

Posteriormente haremos los enlaces en la plantilla dentro de las etiquetas HEAD poniéndo lo siguiente:

<!-- Lightbox para mtree -->
<script type="text/javascript" src="/<?php echo $this->baseurl ;?>/templates/<?php echo $this->template ;?>/lightbox/js/prototype.js"></script>
<script type="text/javascript" src="/<?php echo $this->baseurl ;?>/templates/<?php echo $this->template ;?>/lightbox/js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="/<?php echo $this->baseurl ;?>/templates/<?php echo $this->template ;?>/ligh tbox/js/lightbox.js"></script>
<link rel="stylesheet" href="/<?php echo $this->baseurl ;?>/templates/<?php echo $this->template ;?>/ligh tbox/css/lightbox.css" type="text/css" media="screen" />
<!-- Fin Ligthbox para mtree -->

Finalmente modificaremos el archivo ubicado en "raízJoomla/components/com_mtree/templates/m2" llamado "sub_images.tpl.php". Aquí buscaremo la línea 37 y posteriores, el código:

<div class="thumbnail-left"><a href="/<?php echo JRoute::_('index.php?option=com_mtree&task=viewimage&img_id=' . $image->id . '&Itemid=' . $this->Itemid); ?>"><img src="/<?php
echo $this->jconf['live_site'] . $this->mtconf['relative_path_to_listing_small_image'] . $image->filename;
?>" img="" /></a></div>

y lo reemplazaremos por:

<div class="thumbnail-left">
<a rel="lightbox" href="/<?php echo $this->jconf['live_site'] . $this->mtconf['relative_path_to_listing_original_image'] . $image->filename;?>" title="Copyright MiSitioWeb 2009"><img src="/<?php echo $this->jconf['live_site'] . $this->mtconf['relative_path_to_listing_small_image'] . $image->filename;?>" img="" /></a>
</div>

Con esto debería funcionar. Para finalizar les aclaro que fue probado con el paquete Lightbox adjunto a este artículo (vean aquí) y con la version Moset Tree 2.1.

Redactado por :

tuxmerlin