Galería Suckerfish

Es una galería fotográfica muy guapa, desplegable en horizonta, con una barra de menú y lightbox. Si ya tenéis la lightbox V2, implementarla será cosa facilísima... aunque tengamos un montón de escripts por delante...
Podéis ver mi demo AQUÍ, y el hack original en mondaybynoon

.- Nos vamos directamente a los scripts, que insertaremos antes del cierre /head de nuestra plantilla. Estos scripts son los de la lightbox V2, (prototype, Scriptacolo.us, lightbox.js y lightbox.css) y el añadido del Css de la galería,(y de la barra de navegación, si estamos usando IE6):

<!-- Suckerfish HoverLightbox Redux -->

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

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

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

<script src='http://.../scriptaculous.js?load=effects' type='text/javascript'/>

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



<!--[if lte IE 6]>

<script src="http://.../navigation.js" type="text/javascript"></script>

<![endif]-->

.- El HTML, que podéis colocar bajo la cabecera de vuestro blog:

<div class='gallery' id='gallery1'>

<ul>

<li class='first'><a class='section' href='photos/vacation/'>Vacaciones</a>



<ul>

<li class='overview'>Ya me gustaría a mí ener unas vacaciones así... y que las fotos las hubiera hecho yo en vivo y directo... snif....</li>

<li>

<a href='http://.../vacation1.jpg' rel='lightbox[vacation1]' title='Vacation Photo 1'>

<img alt='Vacation Photo 1' src='http://.../vacation1.jpg'/>

</a>

</li>

<li>



<a href='http://.../vacation2.jpg' rel='lightbox[vacation1]' title='Vacation Photo 2'>

<img alt='Vacation Photo 2' src='...vacation2.jpg'/>

</a>

</li>

<li>

<a href='http://.../vacation3.jpg' rel='lightbox[vacation1]' title='Vacation Photo 3'>

<img alt='Vacation Photo 3' src='http://.../vacation3.jpg'/>

</a>

</li>



<li>


etc...

<a href='http://.../vacation9.jpg' rel='lightbox[vacation1]' title='Vacation Photo 9'>



<img alt='Vacation Photo 9' src='http://...vacation9.jpg'/>

</a>

</li>

</ul>

</li>

<li><a href='photos/food/'>Comida</a>

<ul>

<li class='overview'>Después de las fiestas de Navidad... como que no me tientan.</li>



<li>

<a href='http://.../food1.jpg' rel='lightbox[food1]' title='Food Picture 1'>

<img alt='Food Picture 1' src='http://.../food1.jpg'/>

</a>

</li>

<li>

etc...
Y podemos crear subsecciones dentro de cada sección de galería:

<li class='overview'>Separando la galería en subsecciones, tal que así...</li>

<li>



<a href='http://.../food4.jpg' rel='lightbox[food1]' title='Food Picture 4'>

<img alt='Food Picture 4' src='http://.../food4.jpg'/>

</a>

</li>

<li>

<a href='http://.../food5.jpg' rel='lightbox[food1]' title='Food Picture 5'>

<img alt='Food Picture 5' src='http://.../food5.jpg'/>

</a>

</li>



<li>


etc...


<li><a href='photos/soccer/'>Para futboler@s</a>

<ul>

<li>

<a href='.../soccer1.jpg' rel='lightbox[soccer1]' title='Soccer Picture 1'>

<img alt='Soccer Picture 1' src='http://.../soccer1.jpg'/>



</a>

</li>

<li>

<a href='http://.../soccer2.jpg' rel='lightbox[soccer1]' title='Soccer Picture 2'>

<img alt='Soccer Picture 2' src='http://.../soccer2.jpg"'/>

</a>

</li>

<li>


etc...

</ul>

</li>

</ul>

</div> <!-- /gallery -->

Y se terminó por hoy...