Cultura Digital#Blog

/**
 * Images Slideshow v1.06:
 * Copyright 2008 by J.A.Cobo aka Covi for laguardiadejaen.com working on jQuery.
 *
 * Inspired in Barak Obama website slideshow and 
 * style of BarakSlideshow by Guillermo Rauch (http://devthought.com/). 
 *
 * License: GPL, CC-BY
 *
 * CHANGELOG:
 * 26/08/2008 -		1.06 » Slider menú con dimensions y animate().
 * 25/08/2008 -		1.05 » Inicial.
 *
 * TODO:
 * - T.O.D.O en marcado XHTML (Wordpress » CmsTheme - cmsGallery()).
 * - Función: Parámetros y varios modos de trabajo XXX.
 * - Vaciar la cola de espera : queue off (fácil) XX.
 * - Click para ampliar imagen (fácil) XX.
 * - Usar botones de navegación bonitos (entretenido - queue jiji) X.
 * - Fondo apreciable para cada item (entretenido) X.
 * - Logotipo marca de agua en el menú (entretenido) X.
 * ------------------------------------------------------ */
// Div contenedor:
var slideshowContainer = $('div.sld_slideshow');
 
// Si existe al menos uno:
if ( (slideshowContainer.length)>0 ) {
	/* Parámetros y recursos necesarios */
	// CSS para Slideshow:
	var slideshowCSS = '<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_url');?>/css/imagesSlideshow.css" media="screen" />';
	$(slideshowCSS).appendTo("head");
 
	// Dimensions
	$.getScript('<?php echo LIBS_RT;?>js/jquery/jquery.dimensions.min.js');
 
	// Cursor móvil:
	$('#sld_current').css({visibility: 'hidden', position: 'absolute'});
 
	// Proceso:
	$('ul.sld_menu li').each(function(){
		// Click:
		$(this).children('a').click(function(){
			/* Feedback visual, selección (.selected):
			 * Eliminaremos cualquier clase (sólo debería haber una en el ancla)
			 * y añadimos la clase del item seleccionado.
			 */
			$('ul.sld_menu li a').removeAttr('class');
			$(this).addClass('sld_selected');
 
			/* Parámetros internos */
			// Lo más importante, el recurso enlazado:
			var thisHref = $(this).attr('href');
 
			/* Proceso real */
			// Efecto carga...
			$('.sld_loading').show();
			// Obtenemos el recurso y procedemos:
			$.ajax({
				type: 'GET',
				url: thisHref,
				// Éxito:
				success: function(){
					// Reseteamos posición si hubo error:
					$('.sld_content').css({margin: '0'}).html('');
					// Proceso:
					$('.sld_loading').hide();
					$('.sld_content').fadeTo('slow', 0.1, function(){
						$(this).css('background', '#141414 url('+thisHref+') no-repeat center center').fadeTo('slow', 1);
					});
				},
				// Error:
				error: function(){
					$('.sld_loading').hide();
					// Posicionamos el contenido nuevo de error:
					$('.sld_content').css({background: '#141414', margin: '10px 0 0 10px'});
					// Html:
					$('.sld_content').html('<p><strong class="red">Error, imagen no encontrada.</strong></p>');
				}
			});
			return false;	// Click off
		});
		// Hover: Usamos dimensions para colocar el cursor en el item en donde estamos.
		$(this).children('a').hover(function(){
			$('#sld_current').animate($(this).offset(), 'medium', function(){
				$('#sld_current').css('visibility', 'visible').css('z-index', 1000).animate({marginTop:20}, 'fast');
			});
		}, // Hover fuera: nada.
		function(){});
	});
}
/* End Slideshow
/-------------------------------------------------------- */

<img id="sld_current" src="/images/imagesSlideshow/arrow.gif" alt="arrow" />
<div class="sld_slideshow">
	<span class="sld_loading">Cargando...</span>
 
	<div class="sld_content"></div>
	<!-- Para XHTML1.1, XML de verdad <div class="sld_content" /> -->
 
	<ul class="sld_menu">
		<li><a href="images/cities/melbourne0.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/imagesSlideshow/bg_shadow.gif') no-repeat top;
	position:relative;
	padding:14px 0 15px;
	width:628px;
	height:276px;
}
.sld_slideshow ul {list-style:none !important;}
.sld_slideshow .sld_menu, .sld_slideshow .sld_content, .sld_slideshow .sld_loading {
	position:absolute;
}
.sld_slideshow .sld_loading {
	background:url('../images/loaders/ajax-loader-bar.gif');
	display:block;
	top:158px;
	left:150px;
	width:126px;
	height:22px;
	text-indent:-5000px;
	display:none;
	z-index:5;
}
/* Visor */
.sld_slideshow .sld_content {
	background:url('../images/imagesSlideshow/bg2.jpg');
	width:437px;
	height:277px;
	left:0;
	overflow:hidden;
}
/* Menú */
.sld_slideshow .sld_menu {
	background:#141414 url('../images/imagesSlideshow/bg_side.jpg') no-repeat left center;
	width:225px;
	height:257px;
	right:0;
	padding:10px 0.5px 10px 0.5px;
}
.sld_slideshow .sld_menu li {
	display:block;
	z-index:1000;
	position:relative;
}
.sld_slideshow .sld_menu li a {
	display:block;
	padding:1em 1.5em 1em 1em;
	z-index:1000;
	color:#ccc;
	vertical-align:middle;
	text-decoration:none;
	line-height:1.1em;
}
.sld_slideshow .sld_menu li a:hover, .sld_slideshow .sld_menu li a:active {padding-left:2em; color:#fff;}
.sld_slideshow .sld_menu li a.sld_selected {padding-left:2em !important; color:#fff !important;}
/* Cursor móvil */
.sld_current {vertical-align:middle;}
 
/* Ul li - Reset boliche (string) css */
.postText ul li:before {content:"";}