Cultura Digital#Blog

/* Images Slideshow:
 * Copyright 2008 by J.A.Cobo aka Covi for laguardiadejaen.com working on jQuery.
 *
 * Inspired in Barak Obama website slideshow and 
 * adapted from CSS style by Guillermo Rauch (http://devthought.com/). 
 *
 * TODO: Procesar para imágenes (css) u otros recursos.
 * License: GPL, CC-BY
 * ------------------------------------------------------ */
// Div contenedor:
var slideshowContainer = $('div.sld_slideshow');
 
// Si existe al menos uno:
if ( (slideshowContainer.length)>0 ) {
	// CSS para Slideshow:
	var slideshowCSS = '<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_url');?>/css/barackslideshow.css" media="screen" />';
	$(slideshowCSS).appendTo("head");
 
	// Proceso:
	$('ul.sld_menu li').each(function(){
		// Click:
		$(this).children('a').click(function(){
			/* Parámetros internos */
			// Lo más importante, el recurso enlazado:
			var thisHref = $(this).attr('href');
			var thisImg = $('img[src*="'+thisHref+'"]');
 
			/* Proceso real */
			// Efecto carga...
			$('.sld_loading').show();
			// Si el recurso existe, procedemos:
			$.get(thisHref, function(){
				$('.sld_loading').hide();
				$('.sld_content').fadeTo('slow', 0.1, function(){
					$(this).css('background', 'url('+thisHref+')').fadeTo('slow', 1);
				});
			});
 
			$(this).parent().addClass('current').siblings('.current').removeClass('current');
			return false;
		});
	});
}
 
/* End Slideshow
/-------------------------------------------------------- */

<div class="sld_slideshow">    
	<span class="sld_loading">Loading...</span>
 
	<div class="sld_content"></div>
	<!-- Para XHTML1.1, XML de verdad <div class="sld_pictures" /> -->
 
	<ul class="sld_menu">
		<li><a href="images/cities/melbourne.jpg">Melbourne</a></li>
		<li><a href="images/cities/buenos_aires.jpg">Buenos Aires</a></li>
		<li><a href="images/cities/urubamba.jpg">Urubamba</a></li>
		<li><a href="images/cities/london.jpg">London</a></li>
		<li><a href="images/cities/venice.jpg">Venice</a></li>
		<li><a href="images/cities/paris.jpg">Paris</a></li>
		<li><a href="images/cities/osaka.jpg">Osaka</a></li>
	</ul>
</div>

.sld_slideshow * {margin:0; padding:0;}
.sld_slideshow {
	background:url('../images/barakSlideshow/bg_shadow.gif') no-repeat top;
	position:relative;
	padding:14px 0 15px;
	width:603px;
	height:276px;
}
.sld_slideshow ul {list-style:none !important;}
.sld_slideshow .sld_menu, .sld_slideshow .sld_pictures, .sld_slideshow .sld_loading {
	position:absolute;
}
.sld_slideshow .sld_loading {
	background:url('../images/barakSlideshow/spinner.gif');
	display:block;
	top:158px;
	left:205px;
	text-indent:-5000px;
	width:24px;
	height:24px;
	display:none;
	z-index:5;
}
.sld_slideshow .sld_pictures {
	background:url('../images/barakSlideshow/bg.jpg');
	width:437px;
	height:277px;
	left:0;
	overflow:hidden;
}
.sld_slideshow .sld_menu {
	background:url('../images/barakSlideshow/bg_side.jpg');
	width:166px;
	height:257px;
	right:0;
	padding-top:20px;
}
.sld_slideshow .sld_menu li {
	display:block;
	z-index:1000;
	position:relative;
}
.sld_slideshow .sld_menu li a {
	display:block;
	text-decoration:none;
	padding:0.7em 0 0.7em 2.8em;
	z-index:1000;
	color:#ccc;
	line-height:1.4em;
	vertical-align:middle;
}
.sld_slideshow .sld_menu li a:hover {
	color:#fff;
}
.sld_slideshow .sld_menu li.current a {
	font:15px "Georgia";
	color:#fff;
	padding:5px 0 5px 28px;
	line-height:18px;
}
.sld_slideshow .sld_menu li.background {
	background:url('../images/barakSlideshow/arrow.gif') no-repeat left center !important;
	position:absolute;
	font-size:1px;
	height:7px;
	width:4px;
	z-index:5;
}
 
/* WP */
.postText ul li:before {content:"";}