jQuery jsGalScroll es un Plugin que nos permitirá agrupar imágenes y convertirlas en una especie de galería de fotos con paginación.
En nuestro encabezado
JavaScript:
<script type="text/javascript" src="jquery-latest.pack.js"></script>
<script type="text/javascript" src="jquery.easing.1.2.js"></script>
<script type="text/javascript" src="jqGalScroll.js"></script>
<style type="text/css" media="screen">
@import url(jqGalScroll.css);
</style>
<script type="text/javascript">
$(document).ready(function(){
$("ul.jqGalScroll").jqGalScroll({height:268,width:400,ease:'easeInOutCubic',speed:1000});
});
</script>
<script type="text/javascript" src="jquery.easing.1.2.js"></script>
<script type="text/javascript" src="jqGalScroll.js"></script>
<style type="text/css" media="screen">
@import url(jqGalScroll.css);
</style>
<script type="text/javascript">
$(document).ready(function(){
$("ul.jqGalScroll").jqGalScroll({height:268,width:400,ease:'easeInOutCubic',speed:1000});
});
</script>
Nota: En height (alto)y width (ancho) podremos configurar el tamaño que tendrán las imágenes.
En "speed" la velocidad de transición entre las imágenes.
Ya en nuestro contenido, agregamos nuestras imágenes y una pequeña descripción de cada una de ellas.
HTML:
<ul class="jqGalScroll">
<li><img src="common/img/alamos_en_otonio.jpg" alt="Alamos en Otoño" /></li>
<li><img src="common/img/chapelco_verano.jpg" alt="Chapelco - San Martin de los Andes - Verano" /></li>
<li><img src="common/img/gch_chapelco12.jpg" alt="Chapelco bajo Nieve" /></li>
<li><img src="common/img/ch_rafting01.jpg" alt="El rafting en la zona" /></li>
<li><img src="common/img/foto.jpg" alt="Naturaleza en Neuquen - Argentina" /></li>
</ul>
<li><img src="common/img/alamos_en_otonio.jpg" alt="Alamos en Otoño" /></li>
<li><img src="common/img/chapelco_verano.jpg" alt="Chapelco - San Martin de los Andes - Verano" /></li>
<li><img src="common/img/gch_chapelco12.jpg" alt="Chapelco bajo Nieve" /></li>
<li><img src="common/img/ch_rafting01.jpg" alt="El rafting en la zona" /></li>
<li><img src="common/img/foto.jpg" alt="Naturaleza en Neuquen - Argentina" /></li>
</ul>
Loading ...
juanuuu
20-10-2007
Permalink
Muy buena! parece buenisima, pero el demo presenta "errores en la página voy a hacer una prueba a ver si es error del demo o del script.
Saludos y gracias por los aportes!!!
Nikko
20-10-2007
Permalink
No se a que error te refieres, para mi trabaja muy bien ..Saludos
Benjamin Sterling
20-10-2007
Permalink
Realmente bonito tutorial sobre cómo usar mi "plugin", que realmente me aprecian. Me envió un enlace a su sitio en mi puesto para las personas que hablan español.
Buen trabajo.
Nota: he usado para convertir translate.google.com Inglés a Español
jQuery: jqGalScroll 2.0 (Photo Gallery) | The Book and the Cover
20-10-2007
Permalink
[...] Note: Nicely done tutorial in Spanish. [...]
alex
20-10-2007
Permalink
Excelente Master Nikko... va de peluchines...
Dario German
20-10-2007
Permalink
Hola chicos, como hago andar esto en mi pagina?necesito hacer una galería de imágenes ya. y pongo el plugin en su respectiva carpeta y no anda. si alguien me puede ayudar se lo agradeceré, soy nuevo en wordpress, voy a investigar mas a ver si encuentro algo.
Galer
20-10-2007
Permalink
[...] de im