Seguro hemos visto en varias páginas galerias de imagen con un scroll horizontal o vertical, no es complicado diseñarlas usando ajax, y con la ayuda de jquery y un plugin llamado jcarousel.
La forma de implementarlo es sencilla, ya que el plugin se encarga de la mayoria de cosas
Implementación de la galeria
Probemos con el ejemplo mas simple para implementar carousel
1 2 3 4 5 6 7 8 9 10 11 12 | <ul id="mycarousel" class="jcarousel-skin-tango"> <li><img src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" width="75" height="75" alt="" /></li> <li><img src="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg" width="75" height="75" alt="" /></li> <li><img src="http://static.flickr.com/57/199481087_33ae73a8de_s.jpg" width="75" height="75" alt="" /></li> <li><img src="http://static.flickr.com/77/199481108_4359e6b971_s.jpg" width="75" height="75" alt="" /></li> <li><img src="http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg" width="75" height="75" alt="" /></li> <li><img src="http://static.flickr.com/72/199481203_ad4cdcf109_s.jpg" width="75" height="75" alt="" /></li> <li><img src="http://static.flickr.com/58/199481218_264ce20da0_s.jpg" width="75" height="75" alt="" /></li> <li><img src="http://static.flickr.com/69/199481255_fdfe885f87_s.jpg" width="75" height="75" alt="" /></li> <li><img src="http://static.flickr.com/60/199480111_87d4cb3e38_s.jpg" width="75" height="75" alt="" /></li> <li><img src="http://static.flickr.com/70/229228324_08223b70fa_s.jpg" width="75" height="75" alt="" /></li> </ul> |
Cada elemento del li es la imagen que vamos a mostrar en el carousel, tambien debemos fijarnos bien en el id del ul y la clase
Jquery Ajax
Debemos llamar a jquery, el plugin y activarlo
1 2 3 4 5 6 7 |
Estilos del carousel
El creador del plugin nos da algunos estilos para aplicarle a carousel que podemos cambiarlos a nuestro gusto
1 2 |
Una pregunta, lo has ejecutado con plantillas, es decir que en un documento tengas el head, en otro el body, etc.. por que yo lo intente y solo me funciono en IE pero en chrome no ni en firefox, y yo necesito que funcione en Google Chrome (los demas navegadores no me interesan)
A lo que tu te refieres se llama web modular y es exactamente igual que si estuviera todo junto, yo te recomendaría ver el código fuente final, tal vez es sólo un fallo con alguna comilla. De todas formas Chrome (Webkit para ser más precisos) cuenta con una potente herramienta para depurar (casi tan buena como firebug en FF)