Plantillas Joomla!
  • 1
  • 2
  • 3
Prev Next

Ja Teline III - 2ra Parte: Frontpage - Cabecera

Vamos a ver cómo se conforma el frontpage de esta gran plantilla empezando por su cabecera, header, parte superior o como quieran llamarle. Me refiero a la sección que abarca...

Ja Teline III - 1ra Parte: Configuración

La plantilla JA Teline III de Joomla Art es una de las mejores que existen para crear diarios y/o revistas digitales y una de las que ostenta el título de...

Ja Teline III - 3ra Parte: Ja News FP

El módulo Ja News Front Page es aquel que nos permite destacar ciertos titulares en la página principal y puede tener varias apariencias según lo configuremos, inclusive podemos retocar el...

Ja Teline III - 6ta Parte: Plugin Ja Popup

A raíz de una consulta en el foro explico cómo se utiliza el plugin JA Popup que se instala con la plantilla y que está basado en varios frameworks jQuery. El...

Ja Teline III - 5ta Parte: Ja Tabs

El módulo JA Tabs de JA Teline es el que nos permite "armar" grupos de fichas para mostrar módulos o contenidos en una posición de la plantilla. Es una forma...

Ja Teline III - 4ta Parte: Ja News2

A diferencia de plantillas normales, JA Teline presenta las noticias mediante módulos, es decir, no hay una vista por defecto a traves de la API "component" de Joomla, sino que se...

Nuevas Plantillas - Panorama y Perspectivas

Tanto los que diseñamos plantillas Joomla! como los que las utilizamos, estamos acostumbrados a ver cierta estructura y ciertos archivos a la hora de instalarlas. Generalmente esos archivos se repiten...

Ja Teline III - 1ra Parte: Configuración - Upgrade!

Una sección importante y muy útil de la configuración del template es la que se titula "Page Layouts Overwrite", que sería algo así como "Sobreescribir plantillas de páginas". En el...

Ja Teline III - 4ta Parte: Ja News2 - Upgrade!

Me olvidé de comentar en el artículo anterior que hay un pequeño bugs en el módulo referente a una etiqueta. El plugin "JA User Setting for joomla 1.5.x" como hemos...

A raíz de una consulta en el foro explico cómo se utiliza el plugin JA Popup que se instala con la plantilla y que está basado en varios frameworks jQuery.

Ja Teline III - 6ta Parte: Plugin Ja Popup

Imprimir COM_CONTENT_ICON_PDF
Por: Tux Merlín : Buru
Jueves, 20 Mayo 2010
(Tiempo estimado: 3 - 5 minutos)

El plugin soporta unos cuantos tipos de contenidos y lo que hace básicamente es cargar los mismos, según el tipo seleccionado, dispararándolo en una ventana emergente usando algunos ajaxs configurables desde back-end de la extensión. Funciona tanto en los artículos como en otras extensiones con algunas salvedades que comentaré más adelante.

Los frameworks ajax que podemos utlizar son:

Para acceder a la configuración del plugin la ruta es: Menú Extensiones -> Gestor de Plugins -> JA Popup Plugin. Según el que seleccionen les dará otras configuraciones extra.

El código para la utilización tiene el siguiente formato:

{japopup type="Tipo de contenidos" content="enlace o contenido" width="" height="" title="Ja Teline III - 6ta Parte: Plugin Ja Popup" } Texto de la etiqueta {/japopup}

Observen los textos en rojo son obligatorios.

Tipo de contenidos:
1. ajax:
Ejemplo: {japopup type="ajax" content="http://www.joomla-gnu.com" width="300" height="300" title="Esta es la Web de Tux"}Tux Web About Joomla{/japopup}
Mostrará en el front-end un enlace con el texto "Tux Web About Joomla" y al cliquear en él aparecerá la web del enlace puesto en "content"  en una ventana emergente con las dimensiones mencionadas utilizando el método ajax. Algunas veces no funciona, por eso hay que intentar con otros tipos.

2. iframe:
En este caso es similar al anterior. Por ejemplo, marquen en el back-end del plugin el ajax "ThickBox" y coloquen en un artículo cualquiera el código anterior reemplazado el "type" por "iframe".

3. youtube: Para los videos de youtube hay cuestiones extras a tener en cuenta y veamos la incrustación en un módulo custom o HTML personalizado y luego un ejemplo en un artículo.
Ejemplo en un artículo:

{japopup type="youtube" content="http://www.youtube.com/v/9OFSyBQZ3z8&hl=es_ES&fs=1&" width="640" height="380" title="Rainbow-Deep Purple"}Rainbow - Deep Purple< img border="0" alt="Rainbow-Deep Purple" src="/http ://img.youtube.com/vi/9OFSyBQZ3z8/2.jpg" />{/japopup} 

En el ejemplo indicamos como tipo "youtube", luego como "content" el enlace al video que lo podemos sacar editando el código <insertar" que nos da la misma web de Youtube, luego le damos el tamaño con width (ancho) y height (alto), también un title y cerramos la llave.
Inmediatamente seguido de la llave va un texto descriptivo y luego le indicamos que muestre una imagen  en vez del texto mediante la etiqueta HTML < img >. Observen aquí que la fuente de la imagen es el mismo Youtube utilizando su subdominio http://img.youtube.com, seguido de vi y el código del video y con 2.jpg que tome el segundo fotograma.  Para esto último pueden tomar cualquier fotograma indicando el número  seguido de la extensión jpg.

Para el caso de los módulos agreguen cualesquiera de los ejemplos indicados aquí pero con la etiqueta HTML < div class="ja-video-thumb">, eso hará que se hagan las miniaturas con un borde especial definido por maquetación dentro del template.

Para los videos se puede repetir el plugin en la misma página sin problemas, pudiendo de esta formar armar un album de videos dentro de un artículo.

4. image: Con este tipo podemos cargar un imagen. Ejemplos:
Ejemplo 1:
{japopup type="image" content="/images/stories/joomla-dev_cycle.png" title="Imagen"}Imagen de Ejemplo{/japopup}
En este caso nos mostrará un enlace con el texto "Imagen de Ejemplo". Al cliquear sobre él aparecerá la imagen según el enlace indicado en content en una ventana emergente.

Ejemplo 2:
{japopup type="image" content="/images/stories/joomla-dev_cycle.png" title="Imagen"}Imagen de Ejemplo< img src="/images/stories/joomla-dev_cycle.png" width="100" alt="imagen" title="imagen" />{/japopup}
En este caso mostrará la imagen indicada en content en un tamaño de 100px de ancho y un enlace debajo titulado "Imagen de Ejemplo". Al cliquear sobre la imagen o sobre el texto aparecerá la misma imagen en una ventana emergente.

Ejemplo 3:
{japopup type="image" content="/images/stories/joomla-dev_cycle.png" title="Imagen"}<img src="/images/stories/joomla-dev_cycle.png" width="100" alt="imagen" title="imagen" />{/japopup}
Idem anterior solo que en este caso no aparecerá el texto.

5. slideshow: Este tipo nos permite cargar o mostrar imagenes que al cliquear sobre cualquiera nos hará una presentación o slideshow.
Ejemplo:
{japopup type="slideshow" content="images/stories/articles.jpg" width="100" title="imagen1"}Imagen 1{/japopup}{japopup type="slideshow" content="images/stories/clock.jpg" title="imagen 2" width="100"}Imagen 2{/japopup}

En todos los casos explicados tengan muy en cuenta el ajax seleccionado en el back-end del módulo y prueben ya que algunos tal vez no funcionen según el tipo o type elegido.

Advertencia: No hagan copy/paste (copiar y pegar) de los ejemplos aquí mencionados ya que en algunos casos tuve que dejar un espacio en las etiquetas para poder indicar los códigos

Tags: ayudas | demos | ja teline | joomla | plantillas | plugins | tutoriales

Lo han leído: 13010 almas
Joomla-GNU.com not affiliated with or endorsed by Open Source Matters or the Joomla! Project. The Joomla!, logo and name is used under a limited license from Open Source Matters in the United States and other countries.

BLOG COMMENTS POWERED BY DISQUS