Versión 1.051.06 actualizada y optimizada, se espera poder gestionar en un futuro peticiones tanto para imágenes como otros recursos.
Ojo!, en IE es un desastre
Actualizado a 26/08/08 (v1.06)
Bueno… como es lógico va mejorando e inevitablemente ampliándose.
Nota: La entrada original y código de donde partió.
Slider menú
Ahora implementado el efecto «slider» para el menú sin ningún plugin adicional como «CodaSlider», «CyclePlugin», «serialScroll», etc…
Porque es que durante toda esta noche he probado cientos, he intentado adaptarlos a ver si me servían… y al final como siempre: «a pelo», porque de hecho es como matar moscas a cañonazos.
Y es que no conocía «dimensions», así que ahora sólo dependemos de este gran plugin que prácticamente es -o será, creo, en un futuro- parte del core o una extensión de jQuery, y la verdad que no sabía que sería tan fácil implementarlo junto con el efecto nativo de jQuery animate().
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
| /**
* 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
/-------------------------------------------------------- */ |
Marcado XHTML reducido o simple
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| <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> |
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
| .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:"";} |
Importante
Es importante mencionar que TODO debe adaptarse al uso de cada cual, en el script no hay función de jQuery de carga de documento ya que yo lo uso en un script global.
Así, cada cual lo adapta a su manera y nos aseguramos que se tienen los conocimientos básicos y no se hace Copy&Paste puro 
Idem para marcado, reglas css, ids, clases… obvio.
Uso y demo
Actualmente, yo lo uso en laguardiadejaen.com como extensión de un plugin de galería de fotos pero es fácil adaptarlo a cualquier otro uso, así que intentaré que sea un plugin oficial… que al final no acabaré como tantas otras cosas
Demo
Se puede ver en acción en algunas de las galerías de imágenes de laguardiadejaen.com, por ejemplo en esta:
Panorámicas de La Guardia
Espero le sea útil a alguien