Jueves 23 de Febrero, 2012
Dinvaders: Alimentando con código a nuestros hambrientos visitantes desde el año 2010.

Coin Slider: Image slideshow con Jquery

En esta ocasion les ofrecemos Coin Slider, un slideshow de imagenes hecho en Jquery, que nos permitira crear presentaciones elegantes a nuestros diseños, además de ofrecernos varias opciones únicas en las transiciones de las imágenes.

Caracteristicas

  • Efectos de transiciones unicas.
  • Compatible con Internet Explorer 6+, Firefox 2+, Safari 2+, Google Chrome 3+, Opera 9+
  • Valid markup
  • Configuración flexible
  • Auto slide
  • Caja de navegación
  • Liviano (solo 8kb)
  • Imagenes con vinculo
  • Uso gratuito bajo licencia MIT
  • Totalmente personalizable desde CSS

Implementación:

Primero bajamos coin-slider.min.js y lo incluimos a nuestro código:

<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript" src="coin-slider.min.js"></script>
<link rel="stylesheet" href="coin-slider-styles.css" type="text/css" />

A continuación agregamos el contenido del Slider, creamos una div con las imagenes y la descripcion de cada imagen de esta manera:

<div id='coin-slider'> <!-- No cambiar nombre, hace funcionar el script -->
	<a href="enlace_1" target="_blank">
		<img src='foto_1.jpg' >
		<span>
			Descripcion for foto_1
		</span>
	</a>
	......
	......
	<a href="enlace_X">
		<img src='foto_X.jpg' >
		<span>
			Descripcion for foto_X
		</span>
	</a>
</div>

Llamamos el script:

<script type="text/javascript">
	$(document).load(function() {
		$('#coin-slider').coinslider();
	});
</script>

Coin Slider te ofrece varias opciones para ayudarte a crear el Slideshow que buscas, he aqui un ejemplo:

<script type="text/javascript">
	$(document).load(function() {
		$('#coin-slider').coinslider({ width: 500, navigation: false, delay: 5000 });
	});
</script>

Artículos relacionados

Este artículo tiene 7 comentarios

  1. Gabriel Martínez Portilla, hace 495 días atras:

    No he podido hacerlo funcionar en IE !!! alguna sugerencia ?

  2. Source, hace 495 días atras:

    Hola Gabriel, lo probe en IE7 e IE8 y funciona perfecto (Coin Slider), por las dudas prueba en html solo poner el coin slider para ver si funciona correctamente, si este es el caso, revisa el código de tu página ya que capaz que puedas tener algun error.
    Te dejo como dato, capaz que te pueda servir, que a mi una vez me paso algo igual en internet explorer con un acordeon en jquery y lo pude resolver colocando el acordeon cerca del header, misterios que tiene IE.

    Saludos.

  3. Javier Onishi, hace 322 días atras:

    No lo he podido hacer, no se si me pudes ayudar? hago todo lo que esta en el ejemplo pero no pasa nada.

  4. josue, hace 322 días atras:

    Javier Onishi

    si te das cuenta los nombres que vienen en el archivo no son los mismos cuando los adjuta procura que sean los nombres de los archivos que descargas y el codigo de javascript colocalo en la ultima linea antes de cerrar el body

  5. Source, hace 318 días atras:

    Claro, Javier: en donde dice “foto_X.jpg” por ejemplo tú tienes que colocar el link de tu imagen, y así con todos los nombres que colocamos para identificar los contenidos.
    Además cuando llamas al jQuery y al CSS del plugin DEBES utilizar tus propios links, nosotros proveemos la sintaxis correcta para que puedan llamar efectivamente al archivo pero no podemos saber en donde ubican el archivo en sus servidores.

    Espero que luego de haber arreglado esos problemillas puedas utilizar el plugin en tu sitio, da muy lindos resultados

  6. Javier Onishi, hace 131 días atras:

    Gracias pos su ayuda me sirvió de mucho!!!!!

  7. José, hace 131 días atras:

    Estimados, he probado con $(document).load(function() pero no ha funcionado. Al cambiar load por ready si.

Deja un comentario