Tutorial galeria thumbnail

Joisi me pregunta como hice para poner el efecto en la galeria que tengo pues este se llama thumbnail estas es que pones una imagen en miniatura y al dar click tome sus dimensiones verdaderas

Esta galeria pertenece a Dynamic Drive y alli ahi un tutorial también (aunque esta en ingles) http://www.dynamicdrive.com/dynamicindex4/thumbnail.htm

Para tener nuestra galeria haremos esto:

1.Necesitamos copiar este código que va a ir antes de el código head de tu plantilla.

<br /> <link href='http://bloggerhosting.appspot.com/serve/dutchboy78.googlepages.com/thumbnailviewer.css' rel='stylesheet' type='text/css'/><br /> <br /> <script src='http://bloggerhosting.appspot.com/serve/dutchboy78.googlepages.com/thumbnailviewer.js' type='text/javascript'> /*********************************************** * Image Thumbnail Viewer Script- © Dynamic Drive (www.dynamicdrive.com) * This notice must stay intact for legal use. * Visit http://www.dynamicdrive.com/ for full source code ***********************************************/ </script><br />

los link los saque de esta página http://closetopieterpictures.blogspot.com/ ya que no tenia ni idea de donde alojar los .css y .js (pero eso es otro cuento)

2. El siguiente codigo pueden pegarlo en cualquier parte del body para distinguirlo pueden poner este titulo
/* thumb ---------------------- */
y seguido pegan el codigo:

<br /> #thumbBox{ /*Outermost DIV for thumbnail viewer*/<br /> position: absolute;<br /> left: 0;<br /> top: 0;<br /> width: auto;<br /> padding: 10px;<br /> padding-bottom: 0;<br /> background: #313131;<br /> visibility: hidden;<br /> z-index: 10;<br /> cursor: hand;<br /> cursor: pointer;<br /> }<br /> <br /> #thumbBox .footerbar{ /*Footer DIV of thumbbox that contains "close" link */<br /> font: bold 16px Tahoma;<br /> letter-spacing: 5px;<br /> line-height: 1.1em;<br /> color: white;<br /> padding: 5px 0;<br /> text-align: right;<br /> }<br /> <br /> #thumbBox #thumbImage{ /*DIV within thumbbox that holds the enlarged image */<br /> background-color: white;<br /> }<br /> <br /> #thumbLoading{ /*DIV for showing "loading" status while thumbbox is being generated*/<br /> position: absolute;<br /> visibility: hidden;<br /> border: 1px solid black;<br /> background-color: #EFEFEF;<br /> padding: 5px;<br /> z-index: 5;<br /> }<br />

Para lo anterior deben ir a diseño -- Edición de HTML

3. El siguiente codigo es para publicar nuestra(s) imagen(es) en un post, ya que esto no se aplicara a todas las imagenes solo a las que les pongamos la propiedad

<br /> <a href="Url de tu imagen" rel="thumbnail"><img src="Url de tu imagen" style="height: 100px; width: 100px;" /></a>

En width y height puedes cambiar el tamaño de la miniatura ^-^.
Espero que este bien explicado *--* y que lo puedan poner beshitos :)

PD: en los codigos pueden borrar los br/ que salen no son necesarios aunque tampoco afectan nada xD, solo que no puedo quitarlos y bueno.. jeje