Llevo tiempo buscando un efecto sombra "de verdad"... no esos que son reflejo y no sé porqué les llaman sombra.
Los mejores que he encontrado y que valgan para texto e imágenes, son en CSS, si acaso con algo de javascript. Pero... todos tienen la pega gorda de que usan imágenes de esquina y cuadro, con lo que dotan a las imágenes que no están encerradas en un cuadro... de un cuadro. Y eso no me gusta.
Ya sé que para eso hay mootools y reflections varios, pero... quería algo que, de forma automática, me generase sombras en imágenes y textos.

Y bueno... algo hay: pero sumamente obstructivo y... hay que añadir una nueva clase por cada nueva imagen a la que se quiere añadir una sombra... lo cual es una gaita. Para lo que no habría problemas es en los textos: con "span" se generan las sombras y listos.

Lo peor de todo es que me encanta el resultado... es lo mejor que he visto en sombras hasta ahora. Podéis echarle un vistazo a Mi Blog de Pruebas y la página del hack dropshadow

Bueno:;

Puede hacerse de la siguiente manera:

.- sCRIPTS:

<script src='http://.../jquery.js' type='text/javascript'/>

<script src='http://.../jquery.dimensions.js' type='text/javascript'/>



<script src='http://.../jquery.dropshadow.js' type='text/javascript'/>


<script type='text/javascript'>

window.onload = function()

{

$(&quot;.Title span&quot;).dropShadow({left: 12, top: 15, blur: 4, opacity: 0.4});

$(&quot;.Title span&quot;).dropShadow({left: 2, top: 2, blur: 1, color: &quot;#58a&quot;, opacity: 0.5, swap: true});

$(&quot;#btnToggle&quot;).dropShadow();

$(&quot;.Lab&quot;).dropShadow({left: 8, top: 8, blur: 3});

$(&quot;input:text, input:button&quot;).dropShadow({left: 3, top: 3});

$(&quot;select&quot;).dropShadow();

$(&quot;hr&quot;).dropShadow({left: -18, top: -18});

$(&quot;p&quot;).dropShadow({left: 6, top: 6, blur: 3});

$(&quot;#Gear&quot;).dropShadow({left: 8, top: 8, blur: 3, opacity: 1});

$(&quot;#Sombra&quot;).dropShadow({left: 8, top: 8, blur: 3, opacity: 1});

$(&quot;#GearWrapper&quot;).draggable().css(&quot;z-index&quot;, 2000);



// Toggle all shadows on and off

$(&quot;#btnToggle&quot;).toggle(

function()

{

$(&quot;.dropShadow&quot;).hide();

$(this).val(&quot;Show Shadows&quot;);

},

function()

{

$(&quot;.dropShadow&quot;).show();

$(this).val(&quot;Hide Shadows&quot;);

});



// Examples select event handler

$(&quot;#selExample&quot;).change(ShowExample);



// Update button event handler

$(&quot;#btnUpdate&quot;).click(UpdateDisplay);



// Font radio event handlers

$(&quot;#serif&quot;).click(

function()

{

$(&quot;.Display&quot;).css(&quot;font-family&quot;, &quot;serif&quot;);

$(&quot;.Display span&quot;).redrawShadow();

});

$(&quot;#sans&quot;).click(

function()

{

$(&quot;.Display&quot;).css(&quot;font-family&quot;, &quot;sans-serif&quot;);

$(&quot;.Display span&quot;).redrawShadow();

});



UpdateDisplay();

$(window).resize();



}



function UpdateDisplay()

{

var opts = {

left: parseInt($(&quot;#txtLeft&quot;).val()),

top: parseInt($(&quot;#txtTop&quot;).val()),

blur: parseInt($(&quot;#txtBlur&quot;).val()),

opacity: $(&quot;#txtOpacity&quot;).val(),

color: $(&quot;#txtColor&quot;).val(),

swap: $(&quot;#chkSwap&quot;)[0].checked

};

$(&quot;.Display span&quot;).removeShadow();

$(&quot;.Display span&quot;).dropShadow(opts);

}



function ShowExample()

{

var l, t, b, o, c, s;

switch ($(&quot;#selExample&quot;).val()) {

case &quot;Default&quot;:

l = 4;

t = 4;

b = 2;

o = 0.5;

c = &quot;black&quot;

s = false;

break;

case &quot;Soft&quot;:

l = 6;

t = 6;

b = 4;

o = 0.6;

c = &quot;black&quot;

s = false;

break;

case &quot;Sharp&quot;:

l = 4;

t = 4;

b = 0;

o = 0.25;

c = &quot;black&quot;

s = false;

break;

case &quot;Embossed&quot;:

l = -3;

t = -3;

b = 1;

o = 1;

c = &quot;white&quot;

s = true;

break;

case &quot;Engraved&quot;:

l = 2;

t = 2;

b = 2;

o = 1;

c = &quot;white&quot;

s = true;

break;

case &quot;Glow&quot;:

l = 1;

t = 1;

b = 8;

o = 4;

c = &quot;white&quot;

s = false;

break;

}

$(&quot;#txtLeft&quot;).val(l);

$(&quot;#txtTop&quot;).val(t);

$(&quot;#txtBlur&quot;).val(b);

$(&quot;#txtOpacity&quot;).val(o);

$(&quot;#txtColor&quot;).val(c);

$(&quot;#chkSwap&quot;)[0].checked = s;

UpdateDisplay();

}



</script>

Ojo a este segundo script: porque aquí van los ejemplos de la página del hack, incluído el de prueba con parámetros. Además, viene una parte dedicada a un efecto de "recoger-soltar" que lleva la página original (con un par de scripts adicionales de mouse y draggable. Y como aquí hay gente lista, sabréis distinguir las partes a las que me refiero y quedaros con todo o sólo con el efecto sombra... para gustos... por eso lo pongo completito). Al margen, debéis reformar en este script opacidades, colores, clases para imágenes, esconder o mostrar todas las sombras, etc, a la hora de adaptar el script a vuestro blog y necesidades.

.- HTML:

a) Imagen:
<div style="position: relative;">

<img id="Gear (o "Sombras" o el nombre que le dáis a la clase)" src="http://3.bp.blogspot.com/_BQrzxz9-EQk/R8ey8yqG-BI/AAAAAAAAECE/Pgf02PmQU2Y/s400/clipart_tech_film_011.gif" title="!" />

b) Texto:

<h1 class='Title'><span>Trans</span> <span>Parente</span></h1>

Lo sé... es complicadito... :(

Con control de paginación y autostart con efectos.

La demo en la sidebar de Mi Blog de Pruebas

La explicación... cuando esté más descansada....

Autostart, onmouseover, paginación y controles de previo y siguiente. ¿Qué más quieres?. ¿Que funcione?: pues funciona, jajjaaa.

Para comprobarlo, nada mejor que un vistazo bajo el "image rotator" de
Mi Blog de Pruebas


Otro día, más...

Esta de la que voy a hablar es una adaptación de algo que ví en Joomía. No es que me gusten mucho ni el resultado ni el original, en comparación con otras soluciones que tengo por aquí, pero no deja de ser una buena alternativa, esta vez con query y nada difícil de instalar. El resultado, en el footer de Este Blog

Así se hace:

.- Para evitar saltos, voy a colocar todo el código junto, tal y como se puede implementar en el blog:

<div id='ja-banner'>

<script src='http://junioscripts.googlepages.com/jquery.js' type='text/javascript'/>

<style type='text/css'>

/*The main module wrapper*/

#jp_gallerie_wrapper {width:600px;height:310px; float:left;position:relative; background: #7c7c7c }

/*The div containing all the images*/

.imagebox {position: absolute; top: 5px; left: 5px; width:450px;height:300px;}

#imagebx {width:450px;height:300px; position:absolute; top:5px; left: 5px}

/*The div containing the individual image*/

.imageitem {overflow:hidden; width:450px;height:300px;}

#nav_column {position:absolute;background:none;z-index: 100;right:5px;top:5px;width:165px;height:300px;}

.nav_item{float: right;width:150px;height:60px;background: #fff url(http://3.bp.blogspot.com/_BQrzxz9-EQk/R8PPSNV9ChI/AAAAAAAAD9s/A13xQ8tbrx4/s1600/item_bg.png) repeat-x 0% 100%;}

.nav_item_active {float: right; width:150px; background: #2186ba url(http://3.bp.blogspot.com/_BQrzxz9-EQk/R8PPSNV9ChI/AAAAAAAAD9s/A13xQ8tbrx4/s1600/item_bg.png) repeat-x 0px 100% }

a.nav_link{

line-height:60px; text-align: center; color: #333; font-weight: bold; font-size: 14px;}



.nav_item_active a.nav_link {color:#fff; background: url(http://4.bp.blogspot.com/_BQrzxz9-EQk/R8PO-dV9CgI/AAAAAAAAD9k/qcm3f5hF2lc/s400/arrow.png) 0px no-repeat; display:block; margin-left: -15px}



#nav_text {display:none}

.transboxpos{display:none;}

.tbleft{

left:67.5px; top:5px;width:200px; height:300px;

}

.tbright{

right:172.5px; top:5px;width:200px; height:300px;

}

.tbbottom{

left:5px;top: 60%;width:450px;height:90px;

}

#translucentbox {position: absolute; z-index: 1;}

/*The transparent background of the text*/

#translucentbg {

width:100%;height:100%;

background-color: #000000;

filter:alpha(opacity=50);

-moz-opacity:0.5;

opacity: 0.5;

position: absolute;

z-index: 2

}

#opaquetext {

width:90%;height:90%;

background-color: transparent; /* transparent background */

color:#ffffff;padding:5%; font-size: 12px;

position: absolute; /* absolute positioning */

z-index: 3; /* place it over the other DIV */

}





</style>

<script type='text/javascript'>



jQuery.noConflict()

var ppdelay = 7000;

var newsitems;

var curritem=0;

var iPause=0;

var tbtype=&#39;&#39;;

var indicdelay = ppdelay-3000;



jQuery(document).ready(function(){



jQuery(&quot;#imagebx&quot;).css(&quot;display&quot;,&quot;block&quot;);

var tickerSelector = &quot;#imagebx .imageitem&quot;;

newsitems = jQuery(tickerSelector).hide().hover(

function(){

jQuery(this).addClass(&quot;hovered&quot;);

iPause=1;

},

function(){

jQuery(this).removeClass(&quot;hovered&quot;);

iPause=0;

}

).filter(&quot;:eq(0)&quot;).show().add(tickerSelector).size();



jQuery(&quot;.nav_item:eq(&quot;+curritem+&quot;)&quot;).addClass(&quot;nav_item_active&quot;);



var ntext = jQuery(&quot;.ntext:eq(&quot;+curritem+&quot;)&quot;).html();

var csstype = jQuery(&quot;.transboxpos:eq(&quot;+curritem+&quot;)&quot;).text();

switch(csstype){

case &quot;right&quot;:

var tbtype = &#39;tbright&#39;;

break;

case &quot;bottom&quot;:

var tbtype = &#39;tbbottom&#39;;

break;

default:

var tbtype = &#39;tbleft&#39;;

}

jQuery(&quot;#opaquetext&quot;).html(ntext);

jQuery(&quot;#translucentbox&quot;).addClass(tbtype).slideDown(&quot;slow&quot;,function(){

indictimeset = setInterval(function(){showanim()},indicdelay);

});

timeset = setInterval(function(){ticknews()},ppdelay);

});



function ticknews(itemnum) {

if (iPause==0){

jQuery(&quot;.nav_item:eq(&quot;+curritem+&quot;)&quot;).removeClass(&quot;nav_item_active&quot;);

jQuery(&quot;#indic&quot;).hide();

jQuery(&quot;#translucentbox&quot;).slideUp(&quot;slow&quot;,function(){

jQuery(&quot;#translucentbox&quot;).removeClass(tbtype);

});

jQuery(&quot;#imagebx .imageitem:eq(&quot;+curritem+&quot;)&quot;).fadeOut(&quot;slow&quot;,function(){

jQuery(this).hide();

});

if (itemnum !=undefined){

curritem = itemnum;

}else{

curritem = ++curritem%newsitems;

}

jQuery(&quot;.nav_item:eq(&quot;+curritem+&quot;)&quot;).addClass(&quot;nav_item_active&quot;);

jQuery(&quot;#imagebx .imageitem:eq(&quot;+curritem+&quot;)&quot;).fadeIn(&quot;slow&quot;,function(){

var ntext = jQuery(&quot;.ntext:eq(&quot;+curritem+&quot;)&quot;).html();

jQuery(&quot;#opaquetext&quot;).html(ntext);

var csstype = jQuery(&quot;.transboxpos:eq(&quot;+curritem+&quot;)&quot;).text();

switch(csstype){

case &quot;right&quot;:

var tbtype = &#39;tbright&#39;;

break;

case &quot;bottom&quot;:

var tbtype = &#39;tbbottom&#39;;

break;

default:

var tbtype = &#39;tbleft&#39;;

}



jQuery(&quot;#translucentbox&quot;).addClass(tbtype).slideDown(&quot;slow&quot;,function(){

indictimeset = setInterval(function(){showanim()},indicdelay);

});

});

}

}



function ticknews_new(elnum){

clearInterval(timeset);

ticknews(elnum);

timeset = setInterval(function(){ticknews()},ppdelay);

}



</script>





<div id='jp_gallerie_wrapper'>

<div id='translucentbox'>

<div id='translucentbg'/>

<div id='opaquetext'/></div>

<div id='imagebx'>

<div class='imageitem'><img src='http://2.bp.blogspot.com/_BQrzxz9-EQk/R6PUkr2uXJI/AAAAAAAADrE/wLOMzzytsCs/s1600/todo.jpg'/></div>

<div class='imageitem'><img src='http://3.bp.blogspot.com/_BQrzxz9-EQk/R6PPj72uXCI/AAAAAAAADqM/sz_RnwvQrYA/s800/1130095651Paisajes1.jpg'/></div>

<div class='imageitem'><img src='http://4.bp.blogspot.com/_BQrzxz9-EQk/R6PFUL2uW-I/AAAAAAAADps/4f9YaVCft-g/s800/merienda_del_cisne.jpg'/></div>

<div class='imageitem'><img src='http://4.bp.blogspot.com/_BQrzxz9-EQk/R8PRUdV9CiI/AAAAAAAAD90/HYZ5Iv9Uydg/s800/airbus.jpg'/></div>

<div class='imageitem'><img src='http://1.bp.blogspot.com/_BQrzxz9-EQk/R6A3XL2uW5I/AAAAAAAADpA/5hoHK6SPNPs/s800/gjaguar1.jpg'/></div>

</div>



<div id='nav_column'>







<div class='nav_item' onMouseout='this.style.backgroundColor=""' onMouseover='this.style.backgroundColor="#DAFF76"' onclick='ticknews_new("0")'>

<div class='nav_item_gradient'>

<a class='nav_link' href='http://imagemenulightbox.blogspot.com/'>Plastis</a>

</div>

</div>







<div class='nav_item' onMouseout='this.style.backgroundColor=""' onMouseover='this.style.backgroundColor="#DAFF76"' onclick='ticknews_new("1")'>

<div class='nav_item_gradient'>



<a class='nav_link' href='http://imagemenulightbox.blogspot.com/'>Paisajes</a>

</div>

</div>







<div class='nav_item' onMouseout='this.style.backgroundColor=""' onMouseover='this.style.backgroundColor="#DAFF76"' onclick='ticknews_new("2")'>

<div class='nav_item_gradient'>

<a class='nav_link' href='http://imagemenulightbox.blogspot.com/'>Natura</a>

</div>

</div>









<div class='nav_item' onMouseout='this.style.backgroundColor=""' onMouseover='this.style.backgroundColor="#DAFF76"' onclick='ticknews_new("3")'>

<div class='nav_item_gradient'>

<a class='nav_link' href='http://imagemenulightbox.blogspot.com/'>Varios</a>

</div>

</div>







<div class='nav_item' onMouseout='this.style.backgroundColor=""' onMouseover='this.style.backgroundColor="#DAFF76"' onclick='ticknews_new("4")'>

<div class='nav_item_gradient'>

<a class='nav_link' href='http://imagemenulightbox.blogspot.com/'>Felinos</a>



</div>

</div>





</div>

<div id='transboxpos'>

<div class='transboxpos'>left</div>

<div class='transboxpos'>left</div>

<div class='transboxpos'>left</div>

<div class='transboxpos'>left</div>



<div class='transboxpos'>left</div>



</div>

<div id='nav_text'>

<div class='ntext'>La colección de plastilinas de Hiper... que anda por ahí dispersa y tengo que reunirla en este blog.</div>

<div class='ntext'>Y de aquí en adelante, todo va de animales... parece que no hay otra cosa...</div>

<div class='ntext'>Y de aquí en adelante, todo va de animales... parece que no hay otra cosa....</div>

<div class='ntext'>Pocas imágenes se ajustan a este cuadro...</div>

<div class='ntext'>Y de aquí en adelante, todo va de animales... parece que no hay otra cosa....</div>



</div>





<div class='clr'/>

</div>

</div>

Ylo siento en el alma, Brainiac, pero te tiento con query ;) :
---------------------------------

Es una forma de consignar noticias en el blog, con efectos de slide, fade y alguno más... incluídos controles para autostart, parada, previo y siguiente.

El "problemilla" que tenía con el hack es que la página original desplegaba la demo en un iframe que contenía el HTML de la misma... y el HTML se veía pegadito a la esquina superior izquierda de la susodicha página. Y yo me preguntaba a santo de qué una "postura" tan extraña... Y, claro... en cuanto intenté colocarlo yo en la posición que se me antojó, se me fueron los botones de control a donde les pareció bien, separados del resto de la noticia.
La causa: cuando abrí el CSS ví que el div de los controles estaba en posición "absolute"... con la de problemas que trae eso. Probé a cambiarlo a "relative" y no hubo mucha solución.

Ahora mismo he probado a, sencillamente, dejar en blanco la posición y ¡Voilá!: se acabó el problema. Ahora se pueden poner las Easy News donde a uno le de la gana, no en la cima del blog por narices o chiflando para cambiar tops, paddings, etc...

Así que he colocado la demo al pie de las entradas de Mi Blog de Pruebas. Podéis encontrar el hack original en EASYNEWS

Explicación:

.- CSS: así lo he dejado yo... podéis cambiar el color de fondo, tamaños, etc...

<style>

html

{ background-color: #323319;

font: normal 76% "Arial", "Lucida Grande",Verdana, Sans-Serif;

color:black;

}

a { text-decoration: none; font-weight: bold; }



.news_style{

display:none;

}

.news_show

{

background-color: white;

color:black;

width:350px;

height:150px;

font: normal 100% "Arial", "Lucida Grande",Verdana, Sans-Serif;

overflow: auto;



}

.news_border

{

background-color: white;

width:350px;

height:150px;

font: normal 100% "Arial", "Lucida Grande",Verdana, Sans-Serif;

border: 1px solid gray;

padding: 5px 5px 5px 5px;

overflow: auto;



}

.news_mark{

background-color:white ;

font: normal 70% "Arial", "Lucida Grande",Verdana, Sans-Serif;

border: 0px solid gray;

width:361px;

height:35px;

color:black;

text-align:center;

}

.news_title{

font: bold 120% "Arial", "Lucida Grande",Verdana, Sans-Serif;

border: 0px solid gray;

padding: 5px 0px 9px 5px;

color:black;

}

.news_show img{



margin-left: 5px;

margin-right: 5px;



}

.buttondiv

{

position: ;

/*float: left;*/

/*top: 169px;*/

padding: 5px 5px 5px 5px;

background-color:white ;

border: 1px solid gray;

/*border-top-color: white;*/

border-top:none;

height:20px;

}

.news_border2

{

background-color: black;

width:300px;

height:400px;

font: normal 100% "Arial", "Lucida Grande",Verdana, Sans-Serif;

border: 1px solid gray;

padding: 5px 5px 5px 5px;

/*overflow: auto;*/

}

.news_mark2{

background-color:#666666 ;

font: normal 70% "Arial", "Lucida Grande",Verdana, Sans-Serif;

border: 0px solid gray;

width:312px;

height:35px;

color:white;

text-align:center;

}



.buttondiv2

{

position: absolute;

/*float: left;*/

/*top: 169px;*/

padding: 3px 3px 5px 3px;

background-color:black ;

border: 1px solid gray;

/*border-top-color: white;*/

border-top:none;

height:20px;

}

.news_show2

{

background-color:black;

color:white;

width:300px;

height:400px;

font: normal 100% "Arial", "Lucida Grande",Verdana, Sans-Serif;

overflow: auto;



}

.news_show2 img{



margin-left: 5px;

margin-right: 5px;



}

.news_title2{

font: bold 120% "Arial", "Lucida Grande",Verdana, Sans-Serif;

border: 0px solid gray;

padding: 5px 0px 9px 5px;

width:300px;

color:white;

}

</style>

.- SCRIPTS:

<script src='http://.../jquery-1.2.3.pack.js' type='text/javascript'/>

<script src='http://.../jquery.easynews.js' type='text/javascript'/>

<script>

$(document).ready(function(){

var newsoption4 = {

firstname: &quot;mynews&quot;,

secondname: &quot;showhere2&quot;,

thirdname:&quot;news_display2&quot;,

fourthname:&quot;news_button2&quot;,

newsspeed:&#39;10000&#39;,

effectis:&#39;2&#39;

}

$.init_news(newsoption4);//right side 1st





//var myoffset2=$(&#39;#news_button2&#39;).offset();





//var mytop2=myoffset2.top+161;





$(&#39;#news_button2&#39;).css({top:161});

});



</script>

.- HTML:

<div align='left' id='mynewsdis'><div class='news_border'>

<div class='news_show' id='showhere2'/>

</div>

<div class='buttondiv' id='news_button2'>

<img align='absmiddle' id='news_prev' src='http://www.ezjquery.com/slideimg/prev.gif'/><img align='absmiddle' id='news_pause' src='http://www.ezjquery.com/slideimg/pause.gif'/><img align='absmiddle' id='news_next' src='http://www.ezjquery.com/slideimg/next.gif'/>



</div>

<div class='news_mark'><div class='news_title' id='news_display2'/>

</div></div>

<div id='mynews'>



<div class='news_style' id='news1' rel='Lou"s newest book'>



<table><tr><td><img align='left' height='60' src='http://www.ezjquery.com/slideimg/news1.jpg' width='38'/>

Lou&#39;s newest book -- Independents Day: Awakening the American Spirit -- hit shelves on November 6!<font color='#CC3300'><b>INDEPENDENTS DAY! </b></font></td></tr><tr><td>

<img align='left' height='60' src='http://www.ezjquery.com/slideimg/news1-1.jpg' width='80'/><font color='#FF9900'><b>The weak dollar</b></font> is threatening the survival of European planemaker Airbus, chief executive Tom Enders told workers in Hamburg on Thursday.</td></tr></table>

</div>

<div class='news_style' id='news2' rel='Lou Dobbs Tonight'>

<table><tr><td><img align='left' height='49' src='http://www.ezjquery.com/slideimg/news2.jpg' width='65'/><font color='#CC3300'><b>&quot;Lou Dobbs Tonight&quot;</b></font> is moving to prime-time! Starting Monday, November 5th.</td></tr><tr><td>

<img align='left' height='60' src='http://www.ezjquery.com/slideimg/news2-1.jpg' width='80'/><font color='#FF9900'><b>India</b></font> were held up by a rearguard action from Pakistan&#39;s Misbah-ul-Haq after taking control on the opening afternoon of the first Test in Delhi.</td></tr></table>



</div>

<div class='news_style' id='news3' rel='On this Veterans Day'><table><tr><td>

<img align='left' height='70' src='http://www.ezjquery.com/slideimg/news3.jpg' width='125'/><i><b><font color='#000080'>On this Veterans Day,</font></b></i> we honor the men and women serving our country in uniform. please watch here.</td></tr><tr><td>

<img align='left' height='60' src='http://www.ezjquery.com/slideimg/news3-1.jpg' width='80'/>An annual report on<font color='#FF9900'><b> drug use</b></font> says around 4.5 million Europeans are likely to have used cocaine in the past year - a million more than in 2006.</td></tr></table>

</div>

<div class='news_style' id='news4' rel='War on the Middle Class'><table><tr><td>

<img align='left' height='60' src='http://www.ezjquery.com/slideimg/news4.gif' width='37'/><font color='#FF3300'><b>&quot;War on the Middle Class&quot;</b></font>



&quot;The government, big business, and special interest groups are enriching themselves at our expense.</td></tr><tr><td>

<img align='left' height='60' src='http://www.ezjquery.com/slideimg/news4-1.jpg' width='80'/><font color='#009933'><b>&quot;In diplomacy, as you know, we don&#39;t get instant replies,&quot;</b></font> said John Negroponte carefully, as he addressed the media before leaving Islamabad.</td></tr></table>

</div>



</div>

Cambiad alineación, colores y demás que estiméis oportuno, y listos...

Por separado y en conjunto, es lo que se puede ver en MALSUP.
He puesto algunos de los ejemplos que más me llamaron la atención, junto a sus específicas llamadas, en Este Blog de Pruebas

Como podéis ver en la página de Cycle, hay slides con navegación, autostart... fades, efectos elásticos, efectos "pic", slides de HTML... de todo.

Si hace falta, explico los ejemplos que he puesto (o, al menos, los scripts que hacen falta para desarrollar cada ejemplo)... pero en otro momento... que la gripe ha pasado ha ser más gorda y estoy malita... :(

Es la "showcase-slide" estrella de Yoo... o era.
Porque ya me parecía a mí que debía salir alguna "interpretación" gratuíta para este hack. Y la ha hecho DAEMN,COM, usando query.
Las demos constan de varios draw, horizontales y verticales, onmouseover o en click, con o sin mensaje de "hover", más compactos o menos... hay para todos los gustos.
Yo he escogido para mis pruebas un menú vertical y otro hrizontal onmouseover, que podéis ver AQUÍ

No es difícil de insertar, pero sí de unir en una plantilla ya "llena" (el query puede resultar bastante obstructivo... de esos scripts que "ni comen ni dejan comer").

La explicación la pongo en otro momento, con más tiempo...
-----------------------------------------------
Vamos a ello. Para empezar, podeís descargaros, en Zip, o uno por uno, los ficheros AQUÍ

.- CSS para el Drawer: la parte más trabajosa, porque hay bastantes imágenes:

<link href='http://.../jDrawer.css' media='screen' rel='stylesheet' type='text/css'/>

.- SCRIPTS:

<script src='http://.../jquery.js' type='text/javascript'/>

<script src='http://.../jDrawer.js' type='text/javascript'/>

<script type='text/javascript'>

jQuery(document).ready(function($)

{

$(&quot;#jDrawer-1&quot;).jDrawer({event: &quot;click&quot;});

$(&quot;#jDrawer-2&quot;).jDrawer({speed: 500, sticky: false});

$(&quot;#jDrawer-3&quot;).jDrawer({layout: &quot;horizontal&quot;, sticky: false});

$(&quot;#jDrawer-4&quot;).jDrawer({layout: &quot;horizontal&quot;, event: &quot;click&quot;});

$(&quot;#jDrawer-5&quot;).jDrawer();

$(&quot;#jDrawer-6&quot;).jDrawer({callback: function() { alert(&quot;hover&quot;); } });

});

</script>

.- HTML: Viene muy clarito en el "index" al que os vinculo. De todas maneras, vamos a ver cómo lo he colocado yo:

<div class='wrapper'>



<div class='module-drawer'>



<div id='jDrawer-5' style='float: left'>

<div class='jDrawer-title'>jDrawer Vertical</div>



<ul>

<li class='jDrawer-active'>

<center>

<a href='#'>

<img alt='New! jDrawer' class='png' height='110' src='http://daemn.com/modules/jDrawer/latest/images/jDrawer.png' title='New! jDrawer' width='150'/>

</a>

</center>

<div class='jDrawer-buffer'>

<h3>New! jDrawer</h3>



<div class='jDrawer-divider'/>

Keep playing with the new jDrawer module.

<br/>

<a href='#'>Learn more...</a>

</div>

</li>

<li>

<center>

<a href='#'>



<img alt='Latest Gadgets' class='png' height='110' src='http://daemn.com/modules/jDrawer/latest/images/gadgets.png' title='Latest Gadgets' width='150'/>

</a>

</center>

<div class='jDrawer-buffer'>

<h3>Latest Gadgets</h3>

<div class='jDrawer-divider'/>

Check out the latest cutting-edge features.

<br/>

<a href='#'>Learn more...</a>



</div>

</li>

<li>

<center>

<a href='#' target='_blank'>

<img alt='jSkin' class='png' height='110' src='http://daemn.com/modules/jDrawer/latest/images/jskin.png' title='jSkin' width='150'/>

</a>

</center>

<div class='jDrawer-buffer'>



<h3>jSkin</h3>

<div class='jDrawer-divider'/>

Professional Web 2.0! template club.

<br/>

<a href='#' target='_blank'>Learn more...</a>

</div>

</li>

<li>



<center>

<a href='#' target='_blank'>

<img alt='Sign up' class='png' height='110' src='http://daemn.com/modules/jDrawer/latest/images/signup.png' title='Sign up' width='150'/>

</a>

</center>

<div class='jDrawer-buffer'>

<h3>Sign Up</h3>

<div class='jDrawer-divider'/>



Web 2.0 for your site?

<br/>

Kick your design from 1999!

<br/>

<a href='#' target='_blank'>Join today...</a>

</div>

</li>

</ul>

</div>

<br/><br/>







<div class='jDrawer jDrawer-horizontal' id='jDrawer-3' style='background-color: rgb(255, 255, 255);'>

<ul class='jDrawer-list' style='height: 184px; width: 991px;'>

<li class='jDrawer-item' style='z-index: 4; left: -234px;'><div class='jDrawer-item-border-1'><div class='jDrawer-item-border-2'><div class='jDrawer-item-border-3'><div class='jDrawer-content' style='background-color: rgb(255, 255, 255);'>

<div style='float: left; padding-left: 10px;'>

<h3>New! jDrawer</h3>

<div class='jDrawer-divider'/>

Keep playing with the new jDrawer module.

<br/>

<a href='#'>Learn more...</a>



</div>

<div class='jDrawer-buffer'>

<a href='#'>

<img alt='New! jDrawer' class='png' height='110' src='http://daemn.com/modules/jDrawer/latest/images/jDrawer.png' title='New! jDrawer' width='150'/>

</a>

</div>

<div style='clear: both;'/></div></div></div></div></li>

<li class='jDrawer-item' style='z-index: 3; left: -58px;'><div class='jDrawer-item-border-1'><div class='jDrawer-item-border-2'><div class='jDrawer-item-border-3'><div class='jDrawer-content' style='background-color: rgb(255, 255, 255);'>

<div style='float: left; padding-left: 10px;'>



<h3>Latest Gadgets</h3>

<div class='jDrawer-divider'/>

Check out the latest cutting-edge features.

<br/>

<a href='#'>Learn more...</a>

</div>

<div class='jDrawer-buffer'>

<a href='#'>



<img alt='Latest Gadgets' class='png' height='110' src='http://daemn.com/modules/jDrawer/latest/images/gadgets.png' title='Latest Gadgets' width='150'/>

</a>

</div>

<div style='clear: both;'/></div></div></div></div></li>

<li class='jDrawer-item' style='z-index: 2; left: 143px;'><div class='jDrawer-item-border-1'><div class='jDrawer-item-border-2'><div class='jDrawer-item-border-3'><div class='jDrawer-content' style='background-color: rgb(255, 255, 255);'>

<div style='float: left; padding-left: 10px;'>

<h3>jSkin</h3>

<div class='jDrawer-divider'/>



Professional Web 2.0! template club.

<br/>

<a href='#' target='_blank'>Learn more...</a>

</div>

<div class='jDrawer-buffer'>

<a href='#' target='_blank'>

<img alt='jSkin' class='png' height='110' src='http://daemn.com/modules/jDrawer/latest/images/jskin.png' title='jSkin' width='150'/>

</a>

</div>



<div style='clear: both;'/></div></div></div></div></li>

<li class='jDrawer-item' style='z-index: 1; left: 353px;'><div class='jDrawer-item-border-1'><div class='jDrawer-item-border-2'><div class='jDrawer-item-border-3'><div class='jDrawer-content' style='background-color: rgb(255, 255, 255);'>

<div style='float: left; padding-left: 10px;'>

<h3>Sign Up</h3>

<div class='jDrawer-divider'/>

Web 2.0 for your site?

<br/>

Kick your design from 1999!

<br/>



<a href='#' target='_blank'>Join today...</a>

</div>

<div class='jDrawer-buffer'>

<a href='#' target='_blank'>

<img alt='Sign up' class='png' height='110' src='http://daemn.com/modules/jDrawer/latest/images/signup.png' title='Sign up' width='150'/>

</a>

</div>

<div style='clear: both;'/></div></div></div></div></li>

</ul>



</div></div></div>

La primera pieza de código es para el Drawer vertical. La segunda, para el Drawer horixontal.

Pongamos que tenéis un vínculo en una imagen y que queréis ir a él...al pasar el ratón encima... se produce un efecto "cortina": la imagen "sube" y desaparece, para dejar paso a otra nueva. Esto es lo que hace "Burtton Flick". Y para muestra, el "button" en mi blog de pruebas, bajo el menú Flash-sin flash.

Para conseguirlo necesitamos:

.- UN CSS:

margin:0;
padding:0;
}
body {
background-color:#ccc;
}
#nav {
list-style:none;
float:right;
}
#nav li {
float:left;
}
#nav a, #nav a .btn {
width:135px;
height:100px;
text-align:center;
padding-top:11px;
text-decoration:none;
font-family:Arial, sans-serif;
font-weight:bold;
letter-spacing:-1px;
}
#nav a {
background:url(http://.../hp-invent.gif) no-repeat top left;
display:block;
color:#fff;
font-size:1.5em;
position:relative;
}
#nav a.active {
cursor:default;
}
#nav .btn {
background:url(http://.../temp01.jpg) no-repeat top left;
color:#6E6941;
}

.- SCRIPTS:

<script src='http://.../mootools-release-1.11.js' type='text/javascript'/>
<script type='text/javascript'>



var ButtonFlick = {

start: function () {

$$(&#39;#nav li a&#39;).each(function(el){

if (el.hasClass(&#39;active&#39;)) return;

var text = el.getText();

var button = new Element(&#39;div&#39;, {&#39;class&#39;:&#39;btn&#39;})

.setText(text)

.injectInside(el);

var buttonfx = new Fx.Slide(button, {

&#39;wait&#39;:false,

&#39;transition&#39;:Fx.Transitions.Cubic.easeInOut,

&#39;duration&#39;:350

});

buttonfx.wrapper.setStyles({

&#39;position&#39;: &#39;absolute&#39;,

&#39;top&#39;: 0,

&#39;left&#39;: 0

});

el.addEvents({

&#39;mouseenter&#39;: function () {

buttonfx.slideOut();

},

&#39;mouseleave&#39;: function () {

buttonfx.slideIn();

}

});

});

}

}



window.addEvent(&#39;load&#39;, function(){

ButtonFlick.start();

});



</script>

.- HTML:

<ul id='nav'>

<li><a href='http://cafe-junio.blogspot.com/'>Epílogo</a></li>



<li><a href='http://menupececillos.blogspot.com/'>Peces</a></li>

<li><a class='active' href='http://otromenu.blogspot.com/'>Página actual</a></li>

<li><a href='http://menudivertido.blogspot.com/'>Menú</a></li>

</ul>

Vía chromasynthetic

Eso mismo: parece hecho con flash, pero no lleva nada de eso. Para comprobarlo, echad un vistazo mi blog de pruebas

El "secreto" es la opacidad:

.- CSS:

#menu {
width:720px;
height:400px;
overflow:hidden;
margin:10px;
}
#menu ul {
position:absolute;
z-index:99;
}
#menu ul li {
list-style:none;
width:180px;
float:left;
}
#menu ul li.first {
border:0;
}
#menu ul li ul {
overflow:hidden;
width:178px;
background-color:lightblue;
border:solid #fff;
border-width:0 2px;
opacity: 0.75;
-moz-opacity: 0.75;
filter: alpha(opacity=75);
}
#menu ul li.first ul {
width:180px;
border-left:0;
}
#menu ul li ul li {
padding:10px;
border-top:solid 1px #fff;
font-size:0.8em;
font-family:Arial, sans-serif;
float:none;
}
#menu ul li ul li.first {
border:0;
}
#menu ul li ul li h3 {
font-size:1.2em;
}
#menu ul li ul li ul {
position:relative;
border:0;
}
#menu ul li ul li ul li {
font-size:0.9em;
padding:0 0 0 15px;
line-height:1.3em;
border:0;
background:url(http://.../03.gif) no-repeat left center;
}
#menu ul li h2 a {
display:block;
padding:10px 5px;
font-family:Arial, sans-serif;
text-decoration:none;
font-size:0.7em;
font-weight:normal;
color:#fff;
background-color:#666;
border:solid 2px #fff;
border-width:0 0 2px 2px;
}
#menu ul li.first h2 a {
border-left:none;
}
#menu ul li.hover h2 a {
background-color:#663;
}
#menu_content {
background: url(http://.../en-velay4-375.jpg) no-repeat center;
height:100%;
padding:3em 1em 1em 1em;
color:#fff;
}
* {
margin:0;
padding:0;
}

.- SCRIPTS:

<script src='http://.../mootools-release-1.11.js' type='text/javascript'/>



<script type='text/javascript'>

var Menu = {

start: function () {

var menu = $(&#39;menu&#39;);

var img_opacity = new Fx.Style(&#39;menu_content&#39;, &#39;opacity&#39;, {&#39;wait&#39;: false, &#39;duration&#39;: 400});

menu.getFirst().addEvents({

&#39;mouseenter&#39;: function () {

img_opacity.start(0.5);

},

&#39;mouseleave&#39;: function () {

img_opacity.start(1);

}

});

menu.getFirst().getChildren().each(function (el) {

var second_list = el.getElement(&#39;ul&#39;);

second_list.setStyles({

&#39;opacity&#39;: 0,

&#39;height&#39;: menu.getStyle(&#39;height&#39;).toInt() - menu.getFirst().offsetHeight

});

var fx = second_list.effect(&#39;opacity&#39;, {&#39;wait&#39;: false, &#39;duration&#39;: 200});

el.addEvents({

&#39;mouseenter&#39;: function () {

fx.start(1);

this.addClass(&#39;hover&#39;);

},

&#39;mouseleave&#39;: function () {

fx.start(0);

this.removeClass(&#39;hover&#39;);

}

});

});

}

};

window.addEvent(&#39;domready&#39;, Menu.start);

</script>

.- El HTML:

<div id='menu'>

<ul>



<li class='first'>

<h2><a href='#'>&gt; Menu 1</a></h2>

<ul>

<li class='first'>

<h3>Section 1</h3>

<p>Here are a few links:</p>

<ul>



<li><a href='#'>Link 1</a></li>

<li><a href='#'>Link 2</a></li>

<li><a href='#'>Link 3</a></li>

<li><a href='#'>Link 4</a></li>

</ul>

</li>

<li>



<h3>Section 2</h3>

<p>Más links:</p>

<ul>

<li><a href='#'>Link 1</a></li>

<li><a href='#'>Link 2</a></li>

<li><a href='#'>Link 3</a></li>



<li><a href='#'>Link 4</a></li>

</ul>

</li>

<li>

<h3>Section 3</h3>

<p>Más links:</p>

<ul>



<li><a href='#'>Link 1</a></li>

<li><a href='#'>Link 2</a></li>

<li><a href='#'>Link 3</a></li>

<li><a href='#'>Link 4</a></li>

</ul>

</li>

</ul>



</li>

<li>

<h2><a href='#'>&gt; Menu 2</a></h2>

<ul>

<li class='first'>

<h3>Section 1</h3>

<p>Here are a few links:</p>



<ul>

<li><a href='#'>Link 1</a></li>

<li><a href='#'>Link 2</a></li>

<li><a href='#'>Link 3</a></li>

<li><a href='#'>Link 4</a></li>

</ul>

</li>



<li>

<h3>Section 2</h3>

<p>Aquí hay más Links:</p>

<ul>

<li><a href='#'>Link 1</a></li>

<li><a href='#'>Link 2</a></li>

<li><a href='#'>Link 3</a></li>



<li><a href='#'>Link 4</a></li>

</ul>

</li>

<li>

<h3>Section 3</h3>

<p>Even more links:</p>

<ul>



<li><a href='#'>Link 1</a></li>

<li><a href='#'>Link 2</a></li>

<li><a href='#'>Link 3</a></li>

<li><a href='#'>Link 4</a></li>

</ul>

</li>

</ul>



</li>

<li>

<h2><a href='#'>&gt; Menu 3</a></h2>

<ul>

<li class='first'>

<h3>Section 1</h3>

<p>Here are a few links:</p>



<ul>

<li><a href='#'>Link 1</a></li>

<li><a href='#'>Link 2</a></li>

<li><a href='#'>Link 3</a></li>

<li><a href='#'>Link 4</a></li>

</ul>

</li>



<li>

<h3>Section 2</h3>

<p>Here are some more links:</p>

<ul>

<li><a href='#'>Link 1</a></li>

<li><a href='#'>Link 2</a></li>

<li><a href='#'>Link 3</a></li>



<li><a href='#'>Link 4</a></li>

</ul>

</li>

<li>

<h3>Section 3</h3>

<p>Even more links:</p>

<ul>



<li><a href='#'>Link 1</a></li>

<li><a href='#'>Link 2</a></li>

<li><a href='#'>Link 3</a></li>

<li><a href='#'>Link 4</a></li>

</ul>

</li>

</ul>



</li>

<li>

<h2><a href='#'>&gt; Menu 4</a></h2>

<ul>

<li class='first'>

<h3>Section 1</h3>

<p>Here are a few links:</p>



<ul>

<li><a href='#'>Link 1</a></li>

<li><a href='#'>Link 2</a></li>

<li><a href='#'>Link 3</a></li>

<li><a href='#'>Link 4</a></li>

</ul>

</li>



<li>

<h3>Section 2</h3>

<p>Aquí hay algunos links más:</p>

<ul>

<li><a href='#'>Link 1</a></li>

<li><a href='#'>Link 2</a></li>

<li><a href='#'>Link 3</a></li>



<li><a href='#'>Link 4</a></li>

</ul>

</li>

<li>

<h3>Section 3</h3>

<p>Even more links:</p>

<ul>



<li><a href='#'>Link 1</a></li>

<li><a href='#'>Link 2</a></li>

<li><a href='#'>Link 3</a></li>

<li><a href='#'>Link 4</a></li>

</ul>

</li>

</ul>



</li>

</ul>

<div id='menu_content'>

<p>Más contenido <a href='#'>clickable</a>.</p>

</div> </div>

Vía

En este caso un "clon" de Electricprism

El resultado podéis verlo bajo las entradas de Mi blog de pruebas

En comparación con otras cosas que vemos or aquí y por allá, es "modestito". Pero las transiciones son muy suaves y me gusta mucho el resultado (aunque sacarlo adelante ha sido tarea endiablada... de fácil no tuvo nada).

.- SCRIPTS:
Hacemos un link al CSS y colocamos el inevitable Mootools, además del js del slideshow:

<script src='http://.../mootools-release-1.11.js' type='text/javascript'/>

<link href='http://.../slideshow1.css' media='screen' rel='stylesheet' type='text/css'/>

<script src='http://.../slideshow.rc1.packed.js' type='text/javascript'/>

.- HTML:

<div class='slideshow' id='my_slideshow'><img alt='Mapa' height='300' src='http://.../Mapapirata.jpg' width='400'/></div><script language='JavaScript'>

myShow = new Slideshow(&#39;my_slideshow&#39;, {type: &#39;combo&#39;, resize: true, duration: [2000, 4000], width: 400, height: 300, hu: &#39;&#39;, images:

[&#39;<image_folder/>&#39;,&#39;http://...Paisajes1.jpg&#39;,

&#39;http://...naranja.JPEG&#39;,&#39;http://.../Rama.jpg&#39;,

&#39;http://.../ElJuego.jpg&#39;,&#39;http://.../gtiger1.jpg&#39;,

&#39;http://.../leop3.jpg&#39;,&#39;http://.../mamaBebe.jpg&#39;,

...etc...
&#39;http://.../Cuentos4.jpg&#39;,&#39;http://.../Calvin.JPG&#39;]});

</script>

</div>

La primera imagen es la "señal" para el slideshow: el fondo del mismo. Son las demás las que veréis deslizarse con las "instrucciones que véis en el código anterior respecto a la duración, al tipo de transición, el ancho y alto, etc (que, evidentemente, podéis cambiar: echadle un ojo a la página original del hack).

Y eso es todo...

... deusar Mootools:

Echad un vistazo a mi GALERÍA II.

Tablas con imágenes de fondo para las URL, opacidad para los vínculos de cada tabla, efecto "image-menu" y un carrusel-con opacidad-al pie del blog.

Otro día cuento más... estoy cansada por insertar tanta imagen... :(

-----------------------------

Sigo, aunque me caiga de sueño... porque si lo dejo más se me olvida definitivamente...

Poco más hay que decir, salvo que dada mi poquita imaginación para el diseño, es claro que el mismo no es cosa mía (lo único que he hecho ha sido "inventarme" las imágenes). Se trata de un diseño, con funcionalidades de Mootools (y otras propias del autor), de Oonsambacht

Me han gustado una barbaridad: porque se despliegan con una suavidad que parecen salir d euna nube; porque se les puede cambiar el ancho a voluntad; porque se despliegan con imágenes, HTML, texto, y cualquiera que sea su contenido; y porque no son difíciles de insertar (a sensu contrario de otros plugins de Yoo).

Mi demo, con todas las "variedades", está AQUÍ

ASÍ SE HACE:

.- CSS Y SCRIPTS: Necesiamos un link al CSS de la Tooltip, un script para el js y otro que nos enlace a la librería yoo-mootools:

<link href='http://tools.yootheme.com/plugins/content/yoo_tooltip/yoo_tooltip.css.php' rel='stylesheet' type='text/css'/>



<script src='http://tools.yootheme.com/templates/yoo_yootheme/lib/js/mootools.js.php' type='text/javascript'/>

<script src='http://tools.yootheme.com/plugins/content/yoo_tooltip/yoo_tooltip.js' type='text/javascript'/>

Y vuelvo a lo de siempre: procurad abrir estos scripts y subirlos a vuestro propio servidor.

.- HTML: Estas son las posibilidades (teniendo en cuenta que las otras tooltips que conozco no tienen ninguna.... todo lo que sea más de una es muchísimo):
Ojo con el script que va contenido dentro de cada referencia a la tooltip: sin script no hay tooltip que valga:

<div class="whitebox">

<div style="float: right; margin: 0px 150px 0px 0px;"><div id="yoo-tooltip-1" class="yoo-tooltip-toggler"><img width="140" height="100" title="YOOtooltip!" alt="YOOtooltip!" src="http://tools.yootheme.com/images/stories/yootooltip/yootooltip_icon.png"/></div><script>new YOOtooltip('yoo-tooltip-1', 'La Tooltip de Yoo puede aparecer dslizando el ratón sobre texto, imágenes y cualquier tipo de HTML.', { mode: 'cursor', display: 'block', width: 250, style: 'default' });</script></div>

<strong>Tooltip con texto:</strong> <div id="yoo-tooltip-2" class="yoo-tooltip-toggler">PASA EL RATÓN POR AQUÍ!</div><script>new YOOtooltip('yoo-tooltip-2', 'Esta Tooltip puede desplegarse sobre cualquier tecto dentro de ella.', { mode: 'cursor', display: 'inline', width: 250, style: 'default' });</script>

<br /><strong>Tooltip con imagen:</strong> <div id="yoo-tooltip-3" class="yoo-tooltip-toggler">Mueve aquí el ratón!</div><script>new YOOtooltip('yoo-tooltip-3', '<img style="margin: 20px 0px 0px -20px;" width="125" height="100" align="right" title="YOOtooltip!" alt="YOOtooltip!" src="http://tools.yootheme.com/images/stories/yootooltip/yootooltip.png"/><strong>YOOtooltip</strong><br /><br />Esta Tooltip puede desplegarse sobre cualquier imagen dentro de ella.', { mode: 'cursor', display: 'inline', width: 250, style: 'default' });</script>

<br /><strong>Tooltip con contenido HTML:</strong> <div id="yoo-tooltip-4" class="yoo-tooltip-toggler">Mueve el ratón por aquí!</div><script>new YOOtooltip('yoo-tooltip-4', '<strong>YOOtooltip</strong><br /><span class="info">Esta YOOtooltip puede desplegarse sobre cualquier contenido HTML dentro de ella.</span>', { mode: 'cursor', display: 'inline', width: 250, style: 'default' });</script>



<br /><strong>Tooltip con ancho 300px:</strong> <div id="yoo-tooltip-5" class="yoo-tooltip-toggler">Mueve el ratón aquí!</div><script>new YOOtooltip('yoo-tooltip-5', '<img style="margin: 20px 0px 0px -20px;" width="125" height="100" align="right" title="YOOtooltip!" alt="YOOtooltip!" src="http://tools.yootheme.com/images/stories/yootooltip/yootooltip.png"/><strong>YOOtooltip</strong><br /><span class="info" style="width: 80px">TEsta Tooltipo tiene diferentes anchos.</span>', { mode: 'cursor', display: 'inline', width: 300, style: 'default' });</script>

<br /><strong>Tooltip con ancho 400px:</strong> <div id="yoo-tooltip-6" class="yoo-tooltip-toggler">Mueve el ratón aquí!</div><script>new YOOtooltip('yoo-tooltip-6', '<img style="margin: 20px 0px 0px -20px;" width="125" height="100" align="right" title="YOOtooltip!" alt="YOOtooltip!" src="http://tools.yootheme.com/images/stories/yootooltip/yootooltip.png"/><strong>YOOtooltip</strong><br /><span class="info" style="width: 180px">Diferentes anchos.</span>', { mode: 'cursor', display: 'inline', width: 400, style: 'default' });</script>

<br /><strong>Tooltip con ancho 500px:</strong> <div id="yoo-tooltip-7" class="yoo-tooltip-toggler">Pasa el ratón or aquí!</div><script>new YOOtooltip('yoo-tooltip-7', '<img style="margin: 20px 0px 0px -20px;" width="125" height="100" align="right" title="YOOtooltip!" alt="YOOtooltip!" src="http://tools.yootheme.com/images/stories/yootooltip/yootooltip.png"/><strong>YOOtooltip</strong><br /><span class="info" style="width: 280px">Diferentes anchos.</span>', { mode: 'cursor', display: 'inline', width: 500, style: 'default' });</script>

</div>



Y una prueba "de la casa":



<div id="yoo-tooltip-3" class="yoo-tooltip-toggler">Mueve aquí el ratón!</div><script>new YOOtooltip('yoo-tooltip-3', '<img style="margin: 20px 0px 0px -20px;" width="125" height="100" align="right" title="PRUEBA!" alt="PRUEBA!" src="http://2.bp.blogspot.com/_BQrzxz9-EQk/R6ozZ72uXqI/AAAAAAAADvM/XkCfnRWUplY/s400/Life.jpg"/><strong>YOOtooltip</strong><br /><br />Esta Tooltip puede desplegarse sobre cualquier imagen dentro de ella.', { mode: 'cursor', display: 'inline', width: 250, style: 'default' });</script>

¿A que es genial?- Por cierto: que Yoo ha cambiado su página de inicio en este mismo mes (para añadir más funcionalidades). Ahora están aquí las extensiones (de siempre y nuevas): YOO. Muy, pero que muy interesantes...

Para variar... me ha costado un congo conseguirlo, pero... ya lo tengo con mis propias imágenes (playlist), en lugar del Flickr público.

Te recuerdo la dirección, por si quieres echar un VISTAZO... y lo cuento mañana (me ha llevado demasiado tiempo... hay que dormir)

--------------------------

Ya verás que vas a decir: "¡pues menuda tontería!". Pero las chorradas suelen ser las que más cuestan, jajajaa.

Sólo abre tu notepad, bloc de notas o lo que estés acostumbrado a usar e inserta ésto:

<playlist>

<title>Fotos y dibujos</title>

<trackList>



<track>

<title>La merienda del cisne</title>

<location>http://4.bp.blogspot.com/_BQrzxz9-EQk/R6PFUL2uW-I/AAAAAAAADps/4f9YaVCft-g/s400/merienda_del_cisne.jpg</location>

<meta rel="type">jpg</meta>

</track>



... etc...



</trackList>

</playlist>

Es la estructura que va a tener tu "playlist.xml". Como ves, sólo tiene un título de la imagen, el vídeo, la canción o lo que desees y la dirección desde la cual los captas. Además, el "meta", que señalará si se trata de una imagen o de otra cosa.

Una vez que tengas llena tu lista, tal cual está la subes a tu servidor con ese nombre y extensión: "playlist.xml".

Y ahora, sólo tienes que cambiar el código del image rotator aquí:

so.addVariable('file','http://junioscripts.googlepages.com/playlist.xml');

Es decir: te queda el código exactamente igual que lo teníamos con el Flickr, sólo que cambiamos la "file" con la URL de grupos de Flickr y ponemos en su lugar la URL de nuestra playlist. Así queda:

<div id='mediaspace'><img alt='JW Image Rotator' height='250' src='http://...jpg' title='JW Image Rotator' width='720'/></div>



<script type='text/javascript'>

var so = new SWFObject(&#39;http://junioscripts.googlepages.com/imagerotator.swf&#39;,&#39;player&#39;,&#39;720&#39;,&#39;250&#39;,&#39;8&#39;);

so.addParam(&quot;allowfullscreen&quot;,&quot;true&quot;);

so.addParam(&quot;allowscriptaccess&quot;,&quot;always&quot;);

so.addParam(&quot;wmode&quot;,&quot;opaque&quot;);

so.addVariable(&quot;width&quot;,&quot;720&quot;);

so.addVariable(&quot;height&quot;,250);



so.addVariable(&#39;file&#39;,&#39;http://junioscripts.googlepages.com/playlist.xml&#39;);

so.addVariable(&#39;shownavigation&#39;,&#39;true&#39;);

so.addVariable(&#39;transition&#39;,&#39;random&#39;);

so.addVariable(&#39;lightcolor&#39;,&#39;0x990066&#39;);

so.addVariable(&#39;overstretch&#39;,&#39;true&#39;);

so.write(&#39;mediaspace&#39;);

</script>

Echale un ojo a la página del hack, porque tienes infinitas posibilidades... incluso la de añadirle un fondo musical al rotator de imágenes (mírate el resultado de La Acera

Pásalo bien ;)

Es otra forma de mostrar imágenes. En Flash y 3D.
Resulta muy original y se puede usar con imágenes propias o imágenes de Flickr, p.e.: yo he optado por esto último en mi GALERIA, a la que podéis acceder también picando en "Galería Flickr" de mi BLOG DE PRUEBAS DE IMAGE MENU

Podéis picar en las imágenes para acercarlas, y en el circulito con flecha que véis en cada una de ellas, para girarla y ver en el dorso el título de la foto y quién la tomó. Para devolver la foto a su lugar, picad nuevamente sobre ella. No os molestéis en picar en el círculo con flecha del pie de la gaería... porque es para hacer "salir" más fotos: como no tengo ninguna más que las que véis, lo que sucede es que la pantalla se cierra y queda en negro.

Tengo que decir que me ha resultado fastidiadísimo el encontrar el TiltViewer Pro para descargármelo... tanto que os aconsejo que os guardéis mi URL para posteriormente subirla a vuestro servidor: resultará más fácil que si os quemáis las pestañas intentando averigüar donde guarda el download airtight

Desde ya insisto: si no tenéis Flash, olvidáos de ver y ejecutar este hack.

Así se hace:

.- SCRIPT:
Necesitáis el Swfobject

<script src='http://junioscripts.googlepages.com/Swfobject.js' type='text/javascript'/>

.- Ahora, el HTML, ensamblando el objeto y las variables que nos interesa mostrar (aconsejo que echéis un ojo a la página original), p.e. si queremos etiquetas, id de usuario o fotos de grupo; zoom, títulos de las fotos, por quien han sido tomadas, colores... etc.

<div id='flashcontent'>Gallery requires the latest Flash player. <a href='http://www.macromedia.com/go/getflashplayer/'>Get Flash here.</a> If you have Flash installed, <a href='index.html?detectflash=false'>click to view</a>.</div>



<script type='text/javascript'>

var fo = new SWFObject(&quot;http://junioscripts.googlepages.com/TiltViewer.swf&quot;, &quot;viewer&quot;, &quot;100%&quot;, &quot;100%&quot;, &quot;9.0.28&quot;, &quot;#000000&quot;);



fo.addVariable(&#39;user_id&#39;, &#39;IDUSUARIO&#39;);

//fo.addVariable(&#39;tags&#39;, &#39;TAG,TAG&#39;);

//fo.addVariable(&#39;tag_mode&#39;, &#39;all&#39;);

//fo.addVariable(&#39;columns&#39;, &#39;5&#39;);

//fo.addVariable(&#39;rows&#39;, &#39;5&#39;);

//fo.addVariable(&#39;linkLabel&#39;, &#39;This is the Link text&#39;);

//fo.addVariable(&#39;showLinkButton&#39;, &#39;true&#39;);

//fo.addVariable(&#39;showTakenByText&#39;, &#39;true&#39;);

//fo.addVariable(&#39;zoomedInDistance&#39;, &#39;1400&#39;);

//fo.addVariable(&#39;zoomedOutDistance&#39;, &#39;7500&#39;);

//fo.addVariable(&#39;fontName&#39;, &#39;Arial&#39;);

//fo.addVariable(&#39;titleFontSize&#39;, &#39;50&#39;);

//fo.addVariable(&#39;descriptionFontSize&#39;, &#39;20&#39;);

//fo.addVariable(&#39;linkFontSize&#39;, &#39;40&#39;);

fo.addVariable(&#39;textColor&#39;, &#39;0xffffff&#39;);

fo.addVariable(&#39;linkTextColor&#39;, &#39;0x5F5987&#39;);

fo.addVariable(&#39;linkBkgndColor&#39;, &#39;0x000000&#39;);

fo.addVariable(&#39;frameColor&#39;, &#39;0x000000&#39;);

fo.addVariable(&#39;backColor&#39;, &#39;0x000000&#39;);

fo.addVariable(&#39;bkgndInnerColor&#39;, &#39;0x000000&#39;);

fo.addVariable(&#39;bkgndOuterColor&#39;, &#39;0x000000&#39;);

//



fo.addParam(&quot;allowFullScreen&quot;,&quot;true&quot;);

fo.write(&quot;flashcontent&quot;);



</script>

Y lo dicho: si no encontráis forma humana de bajaros el "pro" directamente, lo más fácil es que abráis mi galería (http://junioscripts.googlepages.com/TiltViewer.swf) , la guardéis y la subáis a vuestro servidor para sustituir mi URL (es que si yo me quedo sin galería por cualquier causa... al tener vosotros mi dirección... perdéis la vuestra. Que no digan que no aviso).

La verdad es que queda pero que muy original. Y he encontrado cientos de páginas que hablanan de ello, pero... ni una sola (ni en español, ni en inglés, ni en japonés... nada) que mostrara su propia demo... lo que me invita a sospechar que no he sido la única en tener dificultades; pero sí la única en "atreverme" a efectuar mi propia demo (viene bien, de vez en cuando, ser obstinada, je)

pd: En IE7 no se ve más que el círculo flechado del pie de la galería. Cuando hay más fotos (no como en mi caso, que tengo cuatro mal contadas) al picar en el círculo ya comienza a a aparecer la galería.

De vez en cuando, reviso los hacks que tengo en cada blog de pruebas... es algo complicado, porque tengo un montón de hacks, casi todos con scripts que pueden, y de hecho lo hacen, "estorbarse" unos a otros. Algunos los dejo tal cual, si no estorban; otras veces elimino algo para dejar lo que más me interesa, si es que no pueden convivir en la misma plantilla...

Todo ésto viene a que si algún hack no funciona o no lo hace correctamente, no me molesto en anunciar su explicación a bombo y platillo... o comento si se estorba con algún otro o si no funciona bien en algún navegador (hasta donde yo sé, claro: a nadie se le ocurre que pueda trabajar con más navegadores... creo que dos de los más populares son más que suficiente). TODO LO QUE AQUÍ SE EXPLICA HA SIDO PROBADO POR MÍ Y COMPROBADO QUE FUNCIONA PERFECTAMENTE.

Lo que quiere decir que, en muchos casos, no dejáis cargar la página completamente... o no os habéis fijado que necesitáis coomo ensamblar Java... o quicktime... o Flash. A veces, insertáis un hack en una plantilla que se da de tortas con los scripts que ya tenéis...

Los tropiezos en HTML y javascript son múltiples y de mcuhas clases... por eso Blogger es tan antipático.

Quiero decir que reviséis bien los códigos, las interacciones con otos scripts, las posibilidades de vuestro navegador; las funcionalidades de que disponéis y las que no habéis implementado (Flash, p.e: sin Flash no podeís ver hacks en Flash, evidentemente).

Y, sobre todo: Por favor... dejad que carguen las páginas antes de andar picando...

Es decir: el ya muy comentado Image Menu, pero con las opciones que tiene insertadas el fotógrafo Aaron Birch en su página.
PaRa saber exactamente de qué hablo, mirad en el vínculo del fotógrafo que acabo de daros y en mi DEMO

Así lo hice:

.- CSS:

}

/*big menu*/

#kwick {
position: relative;
/*border-bottom: 3px double #333;*/
margin-top: 10px;
}

#kwick .kwicks {
display: block;
height: 200px;
margin: 0px;
}

#kwick li {
float: left;
}

#kwick .kwick {
display: block;
cursor: pointer;
overflow: hidden;
height: 200px;
width: 131px;
/*padding: 10px;*/
background: #fff;
/*border-right: 5px solid #202020;*/
border-right: 2px solid #fff;
}

#kwick .kwick span {
display: none;
}

#kwick .opt1 {
background: #ccc url(http://1.bp.blogspot.com/_BQrzxz9-EQk/R6Phcb2uXSI/AAAAAAAADsM/cqOpZ79WbTM/s400/Fauna.jpg) ;
}

#kwick .opt2 {
background: #ccc url(http://4.bp.blogspot.com/_BQrzxz9-EQk/R6PbYL2uXNI/AAAAAAAADrk/zCkzotngxT4/s400/Dibujos.jpg);
}

#kwick .opt3 {
background: #ccc url(http://2.bp.blogspot.com/_BQrzxz9-EQk/R6Pcmr2uXOI/AAAAAAAADrs/G6k_b9CvQY4/s400/Paisajes.jpg);
}

#kwick .opt4 {
background: #ccc url(http://4.bp.blogspot.com/_BQrzxz9-EQk/R6PeHL2uXPI/AAAAAAAADr0/w1_NtPchDKg/s400/Artesano.jpg);
}

#kwick .opt5 {
background: #ccc url(http://3.bp.blogspot.com/_BQrzxz9-EQk/R6Pgk72uXRI/AAAAAAAADsE/JBa2dtY1ygQ/s400/Mixtura.jpg);
}

#kwick .opt6 {
background: #ccc url(http://1.bp.blogspot.com/_BQrzxz9-EQk/R6PfSb2uXQI/AAAAAAAADr8/xzoRnTIxsZ4/s400/Natura.jpg);
border-right: 0;
}

Estos kwick son la cabecera: las imágenes que servirán de presentación a las distintas secciones de vuestra galería de fotos.

.- Además, entes del cierre de la tag <header> incluiremos un par de links al CSS de la lightbox y de la página:

<link href='http://junioscripts.googlepages.com/_common_css_style.css' media='screen' rel='stylesheet' type='text/css'/>



<link href='http://www.aaronbirchphotography.com/_common/css/lightbox.css' media='screen' rel='stylesheet' type='text/css'/>

No pongo el link de mi propia lightbox porque mi diseño es algo diferente de la "común", y quiero que veáis el ejemplo lo más parecido posible al original. En cualquier caso, ya sabéis: usad vuestros propios scripts...

.- SCRIPTS:
Bajo los links al CSS irán los siguientes scripts:

<script src='http://junioscripts.googlepages.com/_common_scripts_mootools.js' type='text/javascript'/>



<script src='http://junioscripts.googlepages.com/_common_scripts_imageMenu.js' type='text/javascript'/>

<script src='http://junioscripts.googlepages.com/_common_scripts_lightbox.js' type='text/javascript'/>



<script src='http://junioscripts.googlepages.com/_common_scripts_mages.js' type='text/javascript'/>

<script type='text/javascript'>

window.addEvent(&#39;domready&#39;, function(){

var myMenu = new ImageMenu($$(&#39;#kwick .kwick&#39;),{openWidth:320, onClick:openThumbs});

Lightbox.init({showControls: true});

});

</script>

He usado el " _common" a la hora de subir, en esste caso, mis scripts para diferenciarlos de los que ya uso para mi lightbox y mi Image Menu. Una cosa es que quiera hacer ésto lo más parecido al original, y otra que estos scrpts reemplacen a los que ya vengo usando... porque estoy muy cómoda con ellos...

.- HTML:
Aquí, prestad atención a las "id" o identificación del elemento: en mi caso serán "Fauna", "Dibujos", "Paisajes", "Artesano", "Mixtura" y "Natura". Cada quien que las cambie al encabezado que va a porner a sus grupos de fotos.

<div id='images' style='display:none;'>

<img src='http://1.bp.blogspot.com/_BQrzxz9-EQk/R6Phcb2uXSI/AAAAAAAADsM/cqOpZ79WbTM/s400/Fauna.jpg'/>

<img src='http://4.bp.blogspot.com/_BQrzxz9-EQk/R6PbYL2uXNI/AAAAAAAADrk/zCkzotngxT4/s400/Dibujos.jpg'/>

<img src='http://2.bp.blogspot.com/_BQrzxz9-EQk/R6Pcmr2uXOI/AAAAAAAADrs/G6k_b9CvQY4/s400/Paisajes.jpg'/>



<img src='http://4.bp.blogspot.com/_BQrzxz9-EQk/R6PeHL2uXPI/AAAAAAAADr0/w1_NtPchDKg/s400/Artesano.jpg'/>

<img src='http://3.bp.blogspot.com/_BQrzxz9-EQk/R6Pgk72uXRI/AAAAAAAADsE/JBa2dtY1ygQ/s400/Mixtura.jpg'/>

<img src='http://1.bp.blogspot.com/_BQrzxz9-EQk/R6PfSb2uXQI/AAAAAAAADr8/xzoRnTIxsZ4/s400/Natura.jpg'/>

</div>



<div id='container'>



<div class='title'>

<img alt='JUNIO-PRUEBAS' src='http://2.bp.blogspot.com/_BQrzxz9-EQk/R6Pmpr2uXTI/AAAAAAAADsU/StWk1ixzx_w/s400/TitleJunio.gif'/>

</div>



<div id='kwick'>



<ul class='kwicks'>

<li class='kwick opt1'><span>Fauna</span></li>

<li class='kwick opt2'><span>Dibujos</span></li>

<li class='kwick opt3'><span>Paisajes</span></li>

<li class='kwick opt4'><span>Artesano</span></li>

<li class='kwick opt5'><span>Mixtura</span></li>



<li class='kwick opt6'><span>Natura</span></li>

</ul>

</div>



<div class='thumbnailContainer' id='Fauna'>

<div class='clipper'>

<a href='http://1.bp.blogspot.com/_BQrzxz9-EQk/R6A3lL2uW6I/AAAAAAAADpI/bm9zzwKXX04/s800/leop3.jpg' rel='lightbox[Fauna]' title='Felinos'><div class='horizontal'><img alt='' border='0' height='66' src='http://1.bp.blogspot.com/_BQrzxz9-EQk/R6A3lL2uW6I/AAAAAAAADpI/bm9zzwKXX04/s400/leop3.jpg' width='100'/></div></a>

<a href='http://1.bp.blogspot.com/_BQrzxz9-EQk/R6A4GL2uW8I/AAAAAAAADpY/EwlXMvr_jS4/s800/gtiger1.jpg' rel='lightbox[Fauna]' title='Felinos'><div class='horizontal'><img alt='' border='0' height='66' src='http://1.bp.blogspot.com/_BQrzxz9-EQk/R6A4GL2uW8I/AAAAAAAADpY/EwlXMvr_jS4/s400/gtiger1.jpg' width='100'/></div></a>

<a href='http://3.bp.blogspot.com/_BQrzxz9-EQk/R6A32r2uW7I/AAAAAAAADpQ/edWFrRgiR1E/s800/snow7.jpg' rel='lightbox[Fauna]' title='Felinos'><div class='horizontal'><img alt='' border='0' height='66' src='http://3.bp.blogspot.com/_BQrzxz9-EQk/R6A32r2uW7I/AAAAAAAADpQ/edWFrRgiR1E/s400/snow7.jpg' width='100'/></div></a>

<a href='http://1.bp.blogspot.com/_BQrzxz9-EQk/R6A3XL2uW5I/AAAAAAAADpA/5hoHK6SPNPs/s800/gjaguar1.jpg' rel='lightbox[Fauna]' title='Felinos'><div class='horizontal'><img alt='' border='0' height='66' src='http://1.bp.blogspot.com/_BQrzxz9-EQk/R6A3XL2uW5I/AAAAAAAADpA/5hoHK6SPNPs/s400/gjaguar1.jpg' width='100'/></div></a>



<a href='http://4.bp.blogspot.com/_BQrzxz9-EQk/R6A2572uW4I/AAAAAAAADo4/uEhg582L7e4/s800/gcheeta1.jpg' rel='lightbox[Fauna]' title='Felinos'><div class='horizontal'><img alt='' border='0' height='66' src='http://4.bp.blogspot.com/_BQrzxz9-EQk/R6A2572uW4I/AAAAAAAADo4/uEhg582L7e4/s400/gcheeta1.jpg' width='100'/></div></a>

<a href='http://4.bp.blogspot.com/_BQrzxz9-EQk/R6PFUL2uW-I/AAAAAAAADps/4f9YaVCft-g/s800/merienda_del_cisne.jpg' rel='lightbox[Fauna]' title='La Merienda'><div class='horizontal'><img alt='La Merienda del cisne' border='0' height='66' src='http://4.bp.blogspot.com/_BQrzxz9-EQk/R6PFUL2uW-I/AAAAAAAADps/4f9YaVCft-g/s400/merienda_del_cisne.jpg' width='100'/></div></a>

<a href='http://1.bp.blogspot.com/_BQrzxz9-EQk/R6PGEb2uW_I/AAAAAAAADp0/jZI3UPqVeQE/s800/Al_agua_patos.jpg' rel='lightbox[Fauna]' title='Patos'><div class='horizontal'><img alt='' border='0' height='66' src='http://1.bp.blogspot.com/_BQrzxz9-EQk/R6PGEb2uW_I/AAAAAAAADp0/jZI3UPqVeQE/s400/Al_agua_patos.jpg' width='100'/></div></a>

<a href='http://2.bp.blogspot.com/_BQrzxz9-EQk/R6PGar2uXAI/AAAAAAAADp8/XFlq4R5IhcI/s800/cisne_malhumorado.jpg' rel='lightbox[Fauna]' title='Cisne malhumorado'><div class='horizontal'><img alt='' border='0' height='66' src='http://2.bp.blogspot.com/_BQrzxz9-EQk/R6PGar2uXAI/AAAAAAAADp8/XFlq4R5IhcI/s400/cisne_malhumorado.jpg' width='100'/></div></a>

<a href='http://4.bp.blogspot.com/_BQrzxz9-EQk/R6PG3L2uXBI/AAAAAAAADqE/YB2UcMMry_Q/s800/pavo_real.jpg' rel='lightbox[Fauna]' title='Pavo Real'><div class='horizontal'><img alt='' border='0' height='66' src='http://4.bp.blogspot.com/_BQrzxz9-EQk/R6PG3L2uXBI/AAAAAAAADqE/YB2UcMMry_Q/s400/pavo_real.jpg' width='100'/></div></a>

<a href='' rel='lightbox[Fauna]' title='Fauna'><div class='horizontal'><img alt='' border='0' height='66' src='' width='100'/></div></a>

<a href='' rel='lightbox[Fauna]' title='Fauna'><div class='vertical'><img alt='' border='0' height='100' src='' width='66'/></div>

</a>

<a href='' rel='lightbox[Fauna]' title='Fauna'><div class='horizontal'><img alt='' border='0' height='66' src='' width='100'/></div></a>



</div>

</div>

<div class='thumbnailContainer' id='Dibujos'>

<div class='clipper'>

<a href='http://4.bp.blogspot.com/_BQrzxz9-EQk/R50Sgr2uWmI/AAAAAAAADmw/R6ETie0-ynU/s800/Nido.jpg' rel='lightbox[Dibujos]' title='Nido'><div class='vertical'><img alt='' border='0' height='100' src='http://4.bp.blogspot.com/_BQrzxz9-EQk/R50Sgr2uWmI/AAAAAAAADmw/R6ETie0-ynU/s400/Nido.jpg' width='66'/></div></a>

<a href='http://3.bp.blogspot.com/_BQrzxz9-EQk/R50Stb2uWnI/AAAAAAAADm4/Q0706-cEtag/s800/Leonardo.jpg' rel='lightbox[Dibujos]' title='Imitando a Leonardo Da Vinci: Estudio anatómico'><div class='vertical'><img alt='' border='0' height='100' src='http://3.bp.blogspot.com/_BQrzxz9-EQk/R50Stb2uWnI/AAAAAAAADm4/Q0706-cEtag/s400/Leonardo.jpg' width='66'/></div></a>



<a href='http://2.bp.blogspot.com/_BQrzxz9-EQk/RwARFjrB-HI/AAAAAAAABbE/VgAY_bL7s-o/s800/Mamut.jpg' rel='lightbox[Dibujos]' title='Mamut'><div class='horizontal'><img alt='' border='0' height='66' src='http://2.bp.blogspot.com/_BQrzxz9-EQk/RwARFjrB-HI/AAAAAAAABbE/VgAY_bL7s-o/s800/Mamut.jpg' width='100'/></div></a>

<a href='http://1.bp.blogspot.com/_BQrzxz9-EQk/RuCiUFgespI/AAAAAAAABVk/J0i5DWuDdIk/s800/PiCome.jpg' rel='lightbox[Dibujos]' title='¡Comeeee!'><div class='horizontal'><img alt='' border='0' height='66' src='http://1.bp.blogspot.com/_BQrzxz9-EQk/RuCiUFgespI/AAAAAAAABVk/J0i5DWuDdIk/s800/PiCome.jpg' width='100'/></div></a>

<a href='http://1.bp.blogspot.com/_BQrzxz9-EQk/RuCiBFgesoI/AAAAAAAABVc/iBD-09Q0puY/s800/AsriLlanto.jpg' rel='lightbox[Dibujos]' title='Dibus de Adri'><div class='horizontal'><img alt='' border='0' height='66' src='http://1.bp.blogspot.com/_BQrzxz9-EQk/RuCiBFgesoI/AAAAAAAABVc/iBD-09Q0puY/s800/AsriLlanto.jpg' width='100'/></div></a>

<a href='http://2.bp.blogspot.com/_BQrzxz9-EQk/RuChnVgesnI/AAAAAAAABVU/uqAka_LWSJ8/s800/Pi%C2%BFActor.jpg' rel='lightbox[Dibujos]' title='descentrado...'><div class='vertical'><img alt='' border='0' height='100' src='http://2.bp.blogspot.com/_BQrzxz9-EQk/RuChnVgesnI/AAAAAAAABVU/uqAka_LWSJ8/s800/Pi%C2%BFActor.jpg' width='66'/></div></a>



<a href='http://4.bp.blogspot.com/_BQrzxz9-EQk/RuChL1gesmI/AAAAAAAABVM/Pc84aLpYLFM/s800/PiHada.jpg' rel='lightbox[Dibujos]' title='Hada'><div class='horizontal'><img alt='' border='0' height='66' src='http://4.bp.blogspot.com/_BQrzxz9-EQk/RuChL1gesmI/AAAAAAAABVM/Pc84aLpYLFM/s800/PiHada.jpg' width='100'/></div></a>

<a href='http://3.bp.blogspot.com/_BQrzxz9-EQk/RuEphVgesqI/AAAAAAAABVs/drfIZN7Xi6Y/s800/AdriRostro.jpg' rel='lightbox[Dibujos]' title='Dibujos de Adri'><div class='horizontal'><img alt='' border='0' height='66' src='http://3.bp.blogspot.com/_BQrzxz9-EQk/RuEphVgesqI/AAAAAAAABVs/drfIZN7Xi6Y/s800/AdriRostro.jpg' width='100'/></div></a>

<a href='http://2.bp.blogspot.com/_BQrzxz9-EQk/RhQ6ySuCcxI/AAAAAAAAAbo/hBE0WgI0iis/s800/Peces.jpg' rel='lightbox[Dibujos]' title='Que se me caen los peces...'><div class='horizontal'><img alt='' border='0' height='66' src='http://2.bp.blogspot.com/_BQrzxz9-EQk/RhQ6ySuCcxI/AAAAAAAAAbo/hBE0WgI0iis/s800/Peces.jpg' width='100'/></div></a>

<a href='http://3.bp.blogspot.com/_BQrzxz9-EQk/RhQ35iuCcvI/AAAAAAAAAbY/adrmbrKPo9A/s800/Puma.jpg' rel='lightbox[Dibujos]' title='El puma tiene hambre'><div class='horizontal'><img alt='' border='0' height='66' src='http://3.bp.blogspot.com/_BQrzxz9-EQk/RhQ35iuCcvI/AAAAAAAAAbY/adrmbrKPo9A/s800/Puma.jpg' width='100'/></div></a>

<a href='http://3.bp.blogspot.com/_BQrzxz9-EQk/RhQ27iuCcuI/AAAAAAAAAbQ/m4LsRb0dkp0/s800/Sirenas.jpg' rel='lightbox[Dibujos]' title='La Isla de las Sirenas. Peter Pan'><div class='horizontal'><img alt='' border='0' height='66' src='http://3.bp.blogspot.com/_BQrzxz9-EQk/RhQ27iuCcuI/AAAAAAAAAbQ/m4LsRb0dkp0/s800/Sirenas.jpg' width='100'/></div></a>

<a href='http://4.bp.blogspot.com/_BQrzxz9-EQk/RhQ0wyuCcsI/AAAAAAAAAbA/UAx9GHoTV1o/s800/Pap%C3%A1.jpg' rel='lightbox[Dibujos]' title='Papá'><div class='horizontal'><img alt='' border='0' height='66' src='http://4.bp.blogspot.com/_BQrzxz9-EQk/RhQ0wyuCcsI/AAAAAAAAAbA/UAx9GHoTV1o/s800/Pap%C3%A1.jpg' width='100'/></div></a>

<a href='http://2.bp.blogspot.com/_BQrzxz9-EQk/RhQz-SuCcrI/AAAAAAAAAa4/So9SLTTet2I/s800/Yo+misma.jpg' rel='lightbox[Dibujos]' title='Ego'><div class='horizontal'><img alt='' border='0' height='66' src='http://2.bp.blogspot.com/_BQrzxz9-EQk/RhQz-SuCcrI/AAAAAAAAAa4/So9SLTTet2I/s800/Yo+misma.jpg' width='100'/></div></a>

<a href='http://4.bp.blogspot.com/_BQrzxz9-EQk/RhQzTyuCcqI/AAAAAAAAAaw/rgS1XsMdTS4/s800/Abuelo.jpg' rel='lightbox[Dibujos]' title='Abuelo'><div class='horizontal'><img alt='' border='0' height='66' src='http://4.bp.blogspot.com/_BQrzxz9-EQk/RhQzTyuCcqI/AAAAAAAAAaw/rgS1XsMdTS4/s800/Abuelo.jpg' width='100'/></div></a>

<a href='http://3.bp.blogspot.com/_BQrzxz9-EQk/RhQyaiuCcpI/AAAAAAAAAao/IjCrwQb9gvk/s800/Mam%C3%A1.jpg' rel='lightbox[Dibujos]' title='Mamá'><div class='horizontal'><img alt='' border='0' height='66' src='http://3.bp.blogspot.com/_BQrzxz9-EQk/RhQyaiuCcpI/AAAAAAAAAao/IjCrwQb9gvk/s800/Mam%C3%A1.jpg' width='100'/></div></a>

<a href='http://1.bp.blogspot.com/_BQrzxz9-EQk/RhQxXCuCcoI/AAAAAAAAAag/YAWY2ERl94U/s800/ImagenManos.jpg' rel='lightbox[Dibujos]' title='Manos'><div class='horizontal'><img alt='' border='0' height='66' src='http://1.bp.blogspot.com/_BQrzxz9-EQk/RhQxXCuCcoI/AAAAAAAAAag/YAWY2ERl94U/s800/ImagenManos.jpg' width='100'/></div></a>

</div>

</div>

<div class='thumbnailContainer' id='Paisajes'>



<div class='clipper'>



<a href='http://4.bp.blogspot.com/_BQrzxz9-EQk/R50SGr2uWlI/AAAAAAAADmo/1RTOOM-2Kco/s400/Palombina4.jpg' rel='lightbox[Paisajes]' title='Palombina'><div class='horizontal'><img alt='' border='0' height='66' src='http://4.bp.blogspot.com/_BQrzxz9-EQk/R50SGr2uWlI/AAAAAAAADmo/1RTOOM-2Kco/s400/Palombina4.jpg' width='100'/></div></a>

<a href='http://3.bp.blogspot.com/_BQrzxz9-EQk/R6PPj72uXCI/AAAAAAAADqM/sz_RnwvQrYA/s400/1130095651Paisajes1.jpg' rel='lightbox[Paisajes]' title='Vistas'><div class='horizontal'><img alt='' border='0' height='66' src='http://3.bp.blogspot.com/_BQrzxz9-EQk/R6PPj72uXCI/AAAAAAAADqM/sz_RnwvQrYA/s400/1130095651Paisajes1.jpg' width='100'/></div></a>



<a href='http://farm2.static.flickr.com/1194/1418249119_dc961132c4.jpg?v=0' rel='lightbox[Paisajes]' title='Palombina'><div class='horizontal'><img alt='' border='0' height='66' src='http://farm2.static.flickr.com/1194/1418249119_dc961132c4.jpg?v=0' width='100'/></div></a>

<a href='http://farm2.static.flickr.com/1187/1419117258_3fc941a543.jpg?v=0' rel='lightbox[Paisajes]' title='Palombina'><div class='horizontal'><img alt='' border='0' height='66' src='http://farm2.static.flickr.com/1187/1419117258_3fc941a543.jpg?v=0' width='100'/></div></a>

<a href='http://farm2.static.flickr.com/1172/1419102496_d47e501638.jpg?v=0' rel='lightbox[Paisajes]' title='Palombina'><div class='horizontal'><img alt='' border='0' height='66' src='http://farm2.static.flickr.com/1172/1419102496_d47e501638.jpg?v=0' width='100'/></div></a>

<a href='http://farm2.static.flickr.com/1395/1419039448_c6cc21b883.jpg?v=0' rel='lightbox[Paisajes]' title='Palombina'><div class='horizontal'><img alt='' border='0' height='66' src='http://farm2.static.flickr.com/1395/1419039448_c6cc21b883.jpg?v=0' width='100'/></div></a>

<a href='http://2.bp.blogspot.com/_BQrzxz9-EQk/R6PVer2uXLI/AAAAAAAADrU/hQ_IKyJes_E/s400/gris.jpg' rel='lightbox[Paisajes]' title='Adri en gris'><div class='horizontal'><img alt='' border='0' height='66' src='http://2.bp.blogspot.com/_BQrzxz9-EQk/R6PVer2uXLI/AAAAAAAADrU/hQ_IKyJes_E/s400/gris.jpg' width='100'/></div></a>

....... etc
</div>

</div>

<div class='thumbnailContainer' id='Artesano'>

<div class='clipper'>

<a href='http://2.bp.blogspot.com/_BQrzxz9-EQk/R50RuL2uWjI/AAAAAAAADmY/Txnzr_2WJKM/s400/mamaBebe.jpg' rel='lightbox[Artesano]' title='Plastilina: Mamá y bebé'><div class='vertical'><img alt='' border='0' height='100' src='http://2.bp.blogspot.com/_BQrzxz9-EQk/R50RuL2uWjI/AAAAAAAADmY/Txnzr_2WJKM/s400/mamaBebe.jpg' width='66'/></div></a>

<a href='http://2.bp.blogspot.com/_BQrzxz9-EQk/R6PSnr2uXDI/AAAAAAAADqU/_BE5kAk-KAc/s400/Picassiano.jpg' rel='lightbox[Artesano]' title='Picassiano'><div class='horizontal'><img alt='' border='0' height='66' src='http://2.bp.blogspot.com/_BQrzxz9-EQk/R6PSnr2uXDI/AAAAAAAADqU/_BE5kAk-KAc/s400/Picassiano.jpg' width='100'/></div></a>



<a href='http://1.bp.blogspot.com/_BQrzxz9-EQk/R6PTAb2uXEI/AAAAAAAADqc/0nFNFyzODa4/s400/bebe.jpg' rel='lightbox[Artesano]' title='Bebé'><div class='horizontal'><img alt='' border='0' height='66' src='http://1.bp.blogspot.com/_BQrzxz9-EQk/R6PTAb2uXEI/AAAAAAAADqc/0nFNFyzODa4/s400/bebe.jpg' width='100'/></div></a>

<a href='http://1.bp.blogspot.com/_BQrzxz9-EQk/R6PTUb2uXFI/AAAAAAAADqk/vOvK2Yo3c9o/s400/Pajaro.jpg' rel='lightbox[Artesano]' title='Pájaro'><div class='horizontal'><img alt='' border='0' height='66' src='http://1.bp.blogspot.com/_BQrzxz9-EQk/R6PTUb2uXFI/AAAAAAAADqk/vOvK2Yo3c9o/s400/Pajaro.jpg' width='100'/></div></a>

<a href='http://4.bp.blogspot.com/_BQrzxz9-EQk/R6PTpL2uXGI/AAAAAAAADqs/hhUbaK-6Hiw/s400/calamar.jpg' rel='lightbox[Artesano]' title='Calamar'><div class='vertical'><img alt='' border='0' height='100' src='http://4.bp.blogspot.com/_BQrzxz9-EQk/R6PTpL2uXGI/AAAAAAAADqs/hhUbaK-6Hiw/s400/calamar.jpg' width='66'/></div></a>

<a href='http://2.bp.blogspot.com/_BQrzxz9-EQk/R6PT9r2uXHI/AAAAAAAADq0/wPwFttUK7r4/s400/firma.jpg' rel='lightbox[Artesano]' title='Firma'><div class='horizontal'><img alt='' border='0' height='66' src='http://2.bp.blogspot.com/_BQrzxz9-EQk/R6PT9r2uXHI/AAAAAAAADq0/wPwFttUK7r4/s400/firma.jpg' width='100'/></div></a>

<a href='http://1.bp.blogspot.com/_BQrzxz9-EQk/R6PURb2uXII/AAAAAAAADq8/NRmwM2NI5qM/s400/pato.jpg' rel='lightbox[Artesano]' title='Pato'><div class='horizontal'><img alt='' border='0' height='66' src='http://1.bp.blogspot.com/_BQrzxz9-EQk/R6PURb2uXII/AAAAAAAADq8/NRmwM2NI5qM/s400/pato.jpg' width='100'/></div></a>

<a href='http://2.bp.blogspot.com/_BQrzxz9-EQk/R6PUkr2uXJI/AAAAAAAADrE/wLOMzzytsCs/s400/todo.jpg' rel='lightbox[Artesano]' title='Todo'><div class='horizontal'><img alt='' border='0' height='66' src='http://2.bp.blogspot.com/_BQrzxz9-EQk/R6PUkr2uXJI/AAAAAAAADrE/wLOMzzytsCs/s400/todo.jpg' width='100'/></div></a>

<a href='http://3.bp.blogspot.com/_BQrzxz9-EQk/R6PU572uXKI/AAAAAAAADrM/MGIro8BoJxM/s400/Autor.jpg' rel='lightbox[Artesano]' title='¡Autor, autor!'><div class='vertical'><img alt='' border='0' height='100' src='http://3.bp.blogspot.com/_BQrzxz9-EQk/R6PU572uXKI/AAAAAAAADrM/MGIro8BoJxM/s400/Autor.jpg' width='66'/></div></a>

...etc...
</div>

</div>

<div class='thumbnailContainer' id='Mixtura'>

<div class='clipper'>

<a href='http://4.bp.blogspot.com/_BQrzxz9-EQk/R50Qfr2uWeI/AAAAAAAADlw/Vm9VRzpdNxo/s400/naranja.JPEG' rel='lightbox[Mixtura]' title='Era una naranja...'><div class='horizontal'><img alt='' border='0' height='66' src='http://4.bp.blogspot.com/_BQrzxz9-EQk/R50Qfr2uWeI/AAAAAAAADlw/Vm9VRzpdNxo/s400/naranja.JPEG' width='100'/></div></a>

<a href='http://farm2.static.flickr.com/1372/1416419741_60b784a3d8.jpg?v=0' rel='lightbox[Mixtura]' title='La Carroza se engancha en la farola (Fiestas de San Mateo)'><div class='horizontal'><img alt='' border='0' height='66' src='http://farm2.static.flickr.com/1372/1416419741_60b784a3d8.jpg?v=0' width='100'/></div></a>

.... etc...
</div>

</div>

<div class='thumbnailContainer' id='Natura'>

<div class='clipper'>

<a href='http://3.bp.blogspot.com/_BQrzxz9-EQk/R50Qub2uWfI/AAAAAAAADl4/rFoC2ICy4Jo/s400/Rama.jpg' rel='lightbox[Natura]' title='Rama'><div class='horizontal'><img alt='' border='0' height='66' src='http://3.bp.blogspot.com/_BQrzxz9-EQk/R50Qub2uWfI/AAAAAAAADl4/rFoC2ICy4Jo/s400/Rama.jpg' width='100'/></div></a>

<a href='http://farm2.static.flickr.com/1221/1418149861_3451916288.jpg?v=0' rel='lightbox[Natura]' title='Rosa-rosae'><div class='horizontal'><img alt='' border='0' height='66' src='http://farm2.static.flickr.com/1221/1418149861_3451916288.jpg?v=0' width='100'/></div></a>

... etc...
</div>



<div id='footer'>

<a class='left' href='http://liquidfotos.blogspot.com/'>Galería Flickr</a>

<a class='right' href='http://cafe-junio.blogspot.com/'>Explicaciones de hacks: Epílogo</a>

</div>



</div>

Si analizáis despacito el HTML, veréis que las primeras URL se refieren a las fotos de las cabeceras, que NO SE VAN A DESPLEGAR EN LIGHTBOX: son la referencia para abrir los cuadros de cada sección.
Como todas las imágenes de cada sección se despliegan en la lightbox, obviamente debéis añadir el mismo "rel=" en cada sección (si ya usáis alguna clase de lightbox, huelgan las explicaciones... ya sabéis cómo va).

Examinad una sección de las que van a desplegar vuestras imágenes, por ejemplo:
<a href='http://4.bp.blogspot.com/_BQrzxz9-EQk/R50Qfr2uWeI/AAAAAAAADlw/Vm9VRzpdNxo/s400/naranja.JPEG' rel='lightbox[Mixtura]' title='Era una naranja...'><div class='horizontal'><img alt='' border='0' height='66' src='http://4.bp.blogspot.com/_BQrzxz9-EQk/R50Qfr2uWeI/AAAAAAAADlw/Vm9VRzpdNxo/s400/naranja.JPEG' width='100'/></div></a>


El rel que unirá las imágenes de una misma sección en la misma lightbox, se ve claro entre corchetes ("Mixtura"). En cuanto a la "class" podéis elegirla entre "horizontal" o "vertical", dependiendo de cómo queráis que se vea vuestra imagen. Por eso mismo podeis modificar aquí el ancho "width" y el alto "height" de la imagen.

Creo que ya todo el mundo sabe que en Blogger ponemos las URLS de las imágenes en dos "tallas": una para que se vea y otra para que se despliegue... pero quien usa imágenes ya lo sabe...

Y creo que eso es todo...

Salvo que... ha sido horroroso meter las url de tantas imágenes. Es la peor parte de trabajar con imágenes...