HTML5 Slideshow con Canvas & jQuery



Slideshow HTML5 con Canvas y jQuery

HTML5 Slideshow es una implementación de una presentación de imágenes con controles de avance y retroceso bajo HTML5 que utiliza el elemento canvas y la biblioteca jQuery.

Implementación

Como se trata de HTML5, se aprecia que todo es mucho más sencillo de lo que era, el siguiente es el código HTML:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>An HTML5 Slideshow w/ Canvas 
&amp; jQuery | Tutorialzine Demo</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>

Aquí comienza la estructura que muestra el slideshow:

<div id="slideshow">
<ul class="slides">
<li><img src="img/photos/1.jpg" 
width="620" height="320" 
alt="Marsa Alam underawter close up" /></li>
<li><img src="img/photos/2.jpg" 
width="620" height="320" 
alt="Turrimetta Beach - Dawn" /></li>
<li><img src="img/photos/3.jpg" 
width="620" height="320" 
alt="Power Station" /></li>
<li><img src="img/photos/4.jpg" 
width="620" height="320" 
alt="Colors of Nature" /></li>
</ul>
<span class="arrow previous"></span>
<span class="arrow next"></span>
</div>

<p class="tzine"><a 
href="http://tutorialzine.com/2010/09/html5-canvas-slideshow-jquery
/">Read &amp; Download on Tutorialzine</a></p>

<p class="credit">Photos by <a 
href="http://www.flickr.com/photos/ac_theart/3835954685/#
/">Andrea Costa</a>, <a href="http://www.flickr.com
/photos/7818801@N03/4996330017">Big Jobs</a>, 
<a href="http://www.flickr.com/photos/jbgoblin/4160580726
/">johnb/uk</a>, <a 
href="http://www.flickr.com/photos/gorditojaramillo
/368461921/">gorditojaramillo</a></p>

Por último se enlazan los archivos de la biblioteca jQuery y el que contiene la implementación del slideshow, en el sitio de este tutorial está el archivo JS explicado (en inglés) paso a paso:

<script src="http://ajax.googleapis.com/ajax/
libs/jquery/1.4.2/jquery.min.js"></script>
<script src="script.js"></script>
</body>
</html>

HTML5 Slideshow vith Canvas & jQuery

Sitio: tutorialzine.com/2010/09/html5-canvas-slideshow-jquery

Related Posts Plugin for WordPress, Blogger...


Desarrollador de software egresado de la Universidad Católica de Argentina, blogger, entusiasta del diseño y trabajador independiente.

5 Respuestas a “HTML5 Slideshow con Canvas & jQuery”

  1. eduardo

    may 23. 2011

    En la actualidad la pagina web no solo nos sirve para tener presencia si no también es una muy buena herramienta para obtener más ventas aquí te damos la mejor opción http://www.addirt.com.mx

  2. juan hernandez

    sep 28. 2010

    No todo el mundo está de acuerdo en que el HTML 5 sea capaz de superar a Flash a medio plazo. Por ejemplo, en este blog se explica porqué, de una forma bastante creíble (inglés):

    http://jaumemussons.edertone.com/2010/09/02/html-5-will-never-be-a-good-choose-for-professional-web-applications/

Trackbacks/Pingbacks

  1. 14 hermosas galerías de imágenes implementadas con jQuery | Pixelco blog - 28/09/2010

    [...] Leer: http://pixelcoblog.com/html5-slideshow-con-canvas-jquery [...]

  2. Tweets that mention HTML5 Slideshow con Canvas & jQuery | Pixelco blog -- Topsy.com - 24/09/2010

    [...] This post was mentioned on Twitter by Noticias usabilidad, Noticias de medios, Pixelco – Diego, nexus11, Omar Terrazas and others. Omar Terrazas said: RT @diegocambiaso HTML5 Slideshow con Canvas & jQuery | Pixelco blog http://bit.ly/cKvpaR [...]

  3. Bitacoras.com - 23/09/2010

    Información Bitacoras.com…

    Valora en Bitacoras.com: HTML5 Slideshow es una implementación de una presentación de imágenes con controles de avance y retroceso bajo HTML5 que utiliza el elemento canvas y la biblioteca jQuery. (…) Sigue HTML5 Slideshow con Canvas & jQuery (1……

Comentario