Excelente explicación como siempre,
Muchas gracias!!
Muchas gracias!!
monitojoomla
Home 
Tutoriales Plantillas Insertar script slider de imágenes en Joomla
Tutoriales Plantillas Insertar script slider de imágenes en Joomla
Insertar script slider de imágenes en Joomla
Domingo, 26 Septiembre 2010 | Escrito por Jhon Marreros Guzman
Detalles Tutorial - Nivel : Intermedio, Versión Joomla : 1.5.x, Formato : texto y video.
En este tutorial veremos cómo insertar código javascript de slider de imágenes descargado de internet en nuestro sitio web de joomla, se trabajará códigos javascript tanto para mootools 1.1x, 1.2x y también para jquery.
En el siguiente video se explica la generalidad de este procedimiento, así como el primer ejemplo de inserción de slider.
Suscríbete a monitojoomla en youtube para que puedas ver todos los videos publicados
En este video se continua con los ejemplos e inserción de sliders para códigos javascrit de mootools 1.2 y jquery
Suscríbete a monitojoomla en youtube para que puedas ver todos los videos publicados
Esquema General
Slider Mootools 1.1
Joomla trabaja con mootools por defecto, en la versión 1.12, por lo que para este primer ejemplo sólo será necesario añadir los archivos a las carpetas de nuestro template y editar el archivo del template.
- Descargamos el código de ejemplo de slider para mootools 1.1
- Copiamos el archivo CSS y el archivo Javascript a las carpetas correspondientes de nuestro template
- Creamos un módulo personalizado en donde colocaremos el código html
- Hacemos la referencia de estos archivos en nuestro template, en el archivo /templates/miTemplate/index.php
Slider Mootools 1.2
Para poder utilizar un slider javascript que trabaja con Mootools 1.2, será necesario activar un pluging de actualización de librería, el cual esta disponible a partir de la versión 1.5.19 de joomla. Hay evaluar cuidadosamente la activación de este pluging, ya que, si estamos utilizando alguna extensión que hace uso de mootools 1.1, es posible que se genere problemas.
- Activamos el pluging mootools update
- Descargamos el código de ejemplo de slider par mootools 1.2
- Copiamos el archivo CSS y el archivo Javascript a las carpetas correspondientes de nuestro template, adicionalmente en este ejemplo se incluye una carpeta de imágenes la cual también debe ser copiada
- Creamos un módulo personalizado en donde colocaremos el código html
- Hacemos la referencia de estos archivos en nuestro template, en el archivo /templates/miTemplate/index.php
Slider Jquery
Para este caso será necesario agregar el core de jquery, así como modificar el código javascript para que no exista conflicto con la librería mootools de joomla
- Descargamos el código de ejemplo de slider para jquery
- Copiamos el archivo CSS y el archivo Javascript a las carpetas correspondientes de nuestro template, adicionalmente en este ejemplo se incluye una carpeta de imágenes la cual también debe ser copiada
- Creamos un módulo personalizado en donde colocaremos el código html
- Hacemos la referencia de estos archivos en nuestro template, en el archivo /templates/miTemplate/index.php
- Hacemos referencia al core de jquery
- Modificamos el script para que no exista conflicto entre librerías, ver este artículo
Conclusión
Los recursos javascript para mejorar nuestro sitio web, son abundantes en internet, pero para poder integrarlo en nuestro sitio joomla debemos tener conocimiento de los archivos utilizados, así como evitar el conflicto entre librerías, como el caso de jquery en joomla y mootools 1.2 en joomla.
Comentarios (14)
-
02-10-2010 Fernando
Muy bueno el tutorial, como el resto de los otros tutoriales. Muchas gracias por compartirlos!!!
-
12-01-2011 Santiago
Hola! Muy bueno el tutorial, pero sin embargo de algo no me está funcionando...
Hay algún paso que se de por sabido y para los novatos pueda ser crucial??
Gracias y saludos!
-
07-03-2011 Chris
Excelente aportación, pero eh tenido un inconveniente al colocar un slider q lleva un poco de javascript al final de la pagina!!!
no detecta el codigo o existe conflicto con el mootools pero ya coloque el jQuery.noConflict()
tal como en el tuto dond lo explicas & nada, Me pudieses orientar a solucionar este problema,
Graciias x tu atentción....
-
05-04-2011 TecladoZurdo
lo he logrado pero me gustaria saber si se pued hacer que cambien la imagen cada cierto tiempo
-
26-04-2011 Ernesto
Hola, muchas gracias por el tutorial, apenas empiezo a conocer Joomla y me son muy utiles tus explicaciones,por cierto quise intentar trabajar con el mootools 1.2 en joomla 1.6, siguiendo tus pasos, pero no me dal el efecto del slider, me podrías decir como cambiarlo.
gracias por tu atención
-
14-05-2011 Nama
Hi
I followed your instruction and i think I did something wrong but this is the result that I got.Please review and let me know what should i do differently
http://namahousewares.com/#
Thanks
-
02-06-2011 elimse
como le ago para que el slider sea automatico, que se cambien las imagenes solas... gracias de ante mano
-
26-07-2011 Patricio
Muchas gracias por el tutorial ofrecido, me sacaste de muchas dudas y conflictos.
Te felicito por la forma de explicar y a su vez entender que no todos sabemos ni razonamos como personas profesionales en la materia.
Te encontre en la web y te seguire mediante correo y rss, se te agradece nuevamente.
-
12-03-2012 Oliver Macdonald
Hola! Muchas gracias por su tutorial, la verdad es que era justamente lo que estaba buscando. Mi pregunta es, si por alguna casualidad tendras un link para un tutorial en ingles? Yo soy bilingue pero aveces para estas cosas me gusta verlo en ingles. Gracias igual, ya que lo estare usando para mi propia pagina. =)
-
19-03-2012 Marimar
Hola necesito ayuda!! intento implementar el slider 1.2 en mi sitio y me aparece pero no trabaja correctamente. Mi sitio esta en joomla 2.5 y lo que quiero es colocar varias imagenes de sitios web y que al hacerle click se abra la pagina web correspondiente.
el error que tiene es que las imagenes no pasan de una en una sino q pareciera estar descontrolada
gracias de antemano
¿Interesado en aprender más de Joomla? Suscríbete al Boletín Mensual
Al suscribirte recibirás una recopilación de 10 templates Joomla gratuitas
Artículos Relacionados
