Cómo implementar un slideshow con las imágenes de fondo de la página con jQuery

Cómo hacer un slideshow de imágenes con jQuery es algo de lo que hemos hablado varias veces. Hoy vamos hablar sobre hacer lo mismo pero con las imágenes del fondo (backgrounds) de una página.

Para implementar este efecto vamos a usar algunos PNGs con transparencias, HTML, CSS y claro está, jQuery.

Implementación

Primero tenemos que enlazar todos los archivos necesarios: CSS, JS (plugin) y jQuery:

<link rel="stylesheet" type="text/css" href="css/style.css"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</head>

Para mostrar el la imágenes de fondo, necesitamos generar unas estructuras HTML como las siguiente: código

<!-- jQuery maneja el lugar donde coloca las imágenes -->
<div id="headerimgs">
<div id="headerimg1" class="headerimg"></div>
<div id="headerimg2" class="headerimg"></div>
</div>
<!-- Controles del slide (presentación) -->
<div id="headernav-outer">
<div id="headernav">
<div id="back" class="btn"></div>
<div id="control" class="btn"></div>
<div id="next" class="btn"></div>
</div>
</div>

<!-- jQuery controla la siguiente imagen a mostrar -->
<div id="headertxt">
<p class="caption">
<span id="firstline"></span>
<a href="#" id="secondline"></a>
</p>
<p class="pictured">
Pictured:
<a href="#" id="pictureduri"></a>
</p>
</div>

Corolario

Esta presentación es muy sencilla de implementar ya que está controlada íntegramente por jQuery y no requiere ninguna configuración ni código Javascript adicional. Pero si tenemos que tener en cuenta los elementos que se superponen y ver bien su implementación en archivo CSS.

En la página del autor de éste desarrollo hay un demo funcional, que también podemos descargar en un archivo ZIP que contiene todo lo necesario para correrlo sin necesidad de montarlo en un servidor web.

Advanced jQuery background image slideshow

Visitar/documentación/demo: www.marcofolio.net/webdesign/advanced_jquery_background_image_slideshow.html

<!-- Slideshow controls -->
<div id="headernav-outer">
<div id="headernav">
<div id="back" class="btn"></div>
<div id="control" class="btn"></div>
<div id="next" class="btn"></div>
</div>
</div>
<!-- jQuery handles for the text displayed on top of the images -->

<div id="headertxt">
<p class="caption">
<span id="firstline"></span>
<a href="#" id="secondline"></a>
</p>
<p class="pictured">
Pictured:
<a href="#" id="pictureduri"></a>
</p>
</div>
 
Tags: background animadoCSSCuriosidaddesarrollo webJavascriptjQueryplugin jqueryRecursosslideshow jquerySoftware libretutorialtutorial jqueryTutoriales