JMiur [E]

Tomorrow again es el primer script de dhteumeuleu que vi y es uno de esos hallazgos de Gem@ que a muchos nos tienen entretenidos (y delirando) en estos últimos dias.

Para adaptarlo a Blogger debemos hacer algún cambio en el script original que puede verse en la página del desarrollador. En este ZIP he colocado el script adaptado, el CSS, las imágenes de ejemplo y un archivo TXT con el código HTML para ser insertardo en un post donde sólo basta cambiar los enlaces.

¿Qué se necesita hacer?

Primero que nada el script que, podemos agregarlo directamente en una entrada:
<script type='text/javascript' src='URL_tomorrowagain.js' ><script>
O podemos agregarlo a la plantilla antes de </head>:
<script type='text/javascript'>
//<![CDATA[
  ... y aquí copiamos y pegamos el contenido del archivo tomorrowagain.js ...
//]]>
</script>
Luego, el CSS con estas definiciones mínimas:
<style type='text/css'>
#screen { /* el contenedor */
margin: 0 auto;
overflow: hidden;
/* el ancho y el alto debemos calcularo en funcíon del tamaño definido en panel */
height: VALORpx;
width: VALORpx;
}

/* las imágenes */
.panel {
float: left;
margin: 5px;
overflow: hidden;
position: relative;
/* este es el ancho y el alto de cada cuadrado donde se producirá el efecto */
height: VALORpx; 
width: VALORpx;
}
.imgPanel {
border: none;
position: absolute;
text-decoration: none;
}

/* la  imagen que veremos debajo */
#imagenREAL {
display:block;
margin:0 auto;
/* si no queremos limitar el tamaño de las imágenes, eliminamos esto */
max-height: VALORpx;
max-width: VALORpx;
}
</style>
En el ejemplo a descargar hay otras propiedades agregadas, bordes, colores, sombras, efectos varios que son personales y que pueden ser definidos a gusto y piacere de cada uno.

Ahora, el HTML que, si va en un post, recuerden que siempre debe ser escrito en una sola línea lo mismo que el CSS si es también lo colocamos allí:
<div id="screen">
<img class="panel" src="URL_imagen1">
<img class="panel" src="URL_imagen2">
<!-- y seguimos agregando etiquetas IMG con todas las que se nos ocurra mostrar -->
</div>
<img id="imagenREAL" src="URL_imagen1" />
<script type="text/javascript"> window.onload= function(){panel.init();} </script>
Como se ve, sólo es un DIV donde agregamos etiquetas IMG con la clase panel. Debajo, he puesto otra imagen extra con un ID específico y es allí donde se mostrará la imagen original cuando hagamos click sobre alguna de las miniaturas.

El script final es el que ejecuta la función del efecto cuando se termina de cargar nuestra página.

El ancho y el alto del DIV screen es lo que nos permite establecer la forma en que veremos nuestra galería y lo calculamos usando aritmética elemental. Si decimos que cada panel tendrá 150x150, entrarán 3 en un ancho de 450 pixeles a lo que le sumamos el margen y padding si es que los tienen y así obtenemos un valor aproximado. Luego lo ajustamos; si vemos que la tercera se va para abajo, es que necesitamos aumentarlo. De ese modo, lograremos armar cualquier diseño.

Este es un ejemplo: 330x490 | 490x320


41 comentarios:

Bilosony2™  

Buenisimo para presentaciones!!! :D Saludos!!

Responder
Prometeo  

Tu trabajo es exelente, tu dedicación. Sin duda pienso que eres una persona muy honorable. Te agradezco tu voluntad de brindar tus conocimientos y apoyo a esta comunidad. Gracias!!!

Responder
NeoAkira  

realmente facinante

Responder
Mario  

Excelente!!! Muchas gracias!

Responder
Graciela  

Precioso, me he quedado jugando un rato :)

Responder
Anahí  

Me gustó mucho, JMiur, y lo estoy probando en el bló de pruebas, pero no me aparecen las imágenes en el cuadrado de arriba. :-|
Slds.

Responder
Cristian  

esta genial!!!!

Responder
Ricardo  

Hola a todos, soy nuevo por aquí, voy a comenzar a investigar este mundo tan fastinante, que en un principio me daba algo de rollo, ya que lo veía imposible. Pero gracia a esta pagina y a todos los que aportais vuestro granito de arena para que los menos abispaos, vallamos cogiendo el hilo, he dado el salto y espero llegar a conseguirlo.

Un saludo y gracias.

Responder
Gem@  

Es una maravilla y los marcos que añadiste a los ejemplos también :)

Responder
ONLINE  

Hola
Mi comentario no esta relacionado con el tema del post , disculpa por ello , mi consulta es que tengo un problema con el feed de feedburner (email) , cuando las personas se suscriben no aparece el link de confirmacion , para suscribirse .
Y otra preguntas mas , conoces como utilizar tags en blogger para cada post en particular estare muy agradecido por tu respuesta de antemano .
Saludos

Responder
JMiur  

Sí, creo que es ideal para presentaciones; bastante rápido.

Prometeo: Gracias por el comentario :-$

Anahí: ¿Dónde puedo ver el ejemplo?

ONLINE: Para lo de Feedburner no hay respuestas, revisa que hayas copiado el código correctamente. Como no sé cuñal es tu blog, no he podido chequearlo.
En Blogegr hay etiquetas que se agregan en cualquier posts, directamente desde el editor de entradas; no sé si te refieres a otra cosa.

Responder
La hormiguita  

Muy Lindo, pero una pregunta??? que nunca me animé hacer???
Se ve que hoy estoy valiente...:)
Ahora, el HTML que, si va en un post, recuerden que siempre debe ser escrito en una sola línea.
Esto no lo entiendo, yo los códigos así como los saco de acá los pego y funcionan, nunca entendí lo de una única linea????
Gracias

Responder
JMiur  

En los posts, cuando escribes algo en dos líneas se crea un salto automático, se agrega una etiqueta <br/> Esto, que es útil para escribir ya que nos evita tener que colocar esa etiqueta a mano, también influye en otros códigos y, de ese modo, a veces, lo que veremos son líneas o espacios de separación indeseados.

No será un problema siempre, dependerá de las propiedades que le demos a cada cosa pero, para evitar eso, es mejor que el HTML se escriba sin esas separeciones. Por ejemplo, en lugar de:

<img src="imagen1" />
<img src="imagen2" />

ponemos:

<img src="imagen1" /><img src="imagen2" />

Cuando, en un post se agregan etiquetas STYLE o etiquetas SCRIPT también debemos hacer eso ya que, si no lo hacemos, simplemente, no funcionarán.

Responder
Anahí  

JMiur, le mandé un mail con invitación porque mi bló de pruebas es privado... :$
Slds.

Responder
JMiur  

Anahí:

Ya vi el proble,ma en tu blog de pruebas. Lo que ocurre allí es que ya hay una clase CSS que tiene el mismo nombre "panel" y que usas para TABS, y se define asi:
.panel {
background-color: transparent;
clear: both;
display: none;
padding: 10px;
}
con lo cual, display: none hace que no se vean las imágenes de esta galería y además, se le agreguena lgunas propeidades que seguramente las distorsionarán.

Aunque sea temporalmente, para probar, elimina o cometa esa definición de las TABS y la galería se verá.

Responder
Anahí  

Claro, JMiur, lo probé y sí es eso (y por eso también se me habían descuajeringado las tabs...)
Así que lo que hice entonces fue cambiar en el script, el css y el html "panel" por "panelo" :-P
y ahora funcionan ambas cosas.
Muchas gracias JMiur.

Responder
La hormiguita  

ahhhh, la verdad los que hice los deja así como venian, pero gracias por la explicación, puedo tener algún problema y no saber que es por ese tema. :)

Responder
JMiur  

Perfecto Anahí :D

La hormiguita: No siempre es necesario hacer eso pero, es bueno hacerlo siempre y evitamos problemas :D

Responder
S. C. P.  

Se supone que al hacer click debe verse la foto entera en el recuadro de abajo, según entendí. Pero, carajos, no se ve. No he querido probar en mi blog, sin saber por qué no la veo en el tuyo. Será que no se ve en firefox?

saludos

Responder
JMiur  

No veo que haya ningún problema con las imñagenes en ningun navegador.

Responder
ADRIAN  

JMiur.

Excelente presentación, lo implemente en mi blog y como es uno dedicado a la música pues queda muy bien y muestra las imágenes sin ocupar demasiado espacio, http://ritmosymelodiasecuador.blogspot.com/search?updated-max=2010-06-25T17%3A32%3A00-05%3A00&max-results=5

mi pregunta es: ¿se puede mejorar la velocidad de carga?, las imagenes la alojo en FileAve.com los scripts no están en la plantilla sino externamente en dropbox, entonces; esperaré tus sugerencias.

Saludos Maestro.

Responder
JMiur  

No es mucho lo que puede hacerse al respecto. El script es lo siuficientemente pequeño como para poder agregarlo a la plantilla directamente y las imágenes, bueno, eso dependerá de cada servicio, en principio, siempre prefiero alojarlas en Blogger mismo.

Responder
Michael Graber  

I Love You JMiur!
Soy Taillard diretamente da Suiça que és tu fã gracias a Ariane y la divina Gem@!
Estoy com o perfil de mi amico!
Desejo doar uno donativo per lo prepal a tu sitio!
Tu lo mereces mi amico!

Responder
JMiur  

Gracias, Michael :D

Responder
Taillard  

Amigo como posso hacher uno menu como estes desse sitio?
http://www.macksonn.com.br/verao11/

Ablo serio quanto ao donativo amigo!
Sei mui amable!
Te amo!

Responder
Taillard  

Amigo lindo consegui!Era isso mesmo que eu havia postado como duvida!
Eu aumentei o height e diminui o width,assim posso ter um lindo efeito alias maravilhoso.
Te amoooo!!!

Responder
Taillard  

O scrypt nao funciona amore ,eu hospedei no dropox e parece que nemminha s imagens estão funcionando.
Tem que haver cuidado como o tinypic!

Responder
Taillard  

Amigo no funciona em meu blog de tesouras e cia.
www.janetesouraecia.blogspot.com
Bigaduuu

Responder
Taillard  

Amigo html/java ou html do body do blogg?
Ta durissimooo de entender querido!
I Love You!!!Tu es um geniooo!!!

Responder
Taillard  

Amigoooo!!!

Responder
JMiur  

Me confunde un poco los mensajes. Respecto del menú del que hablas, nada puedo decir, no l ohe probado así que desconozco la forma en que funciona.

Respecot a este script, l oque veo es que has colcoado esto y es un error ya que hay una etiqueta SCRIPT dentro de otra:

<script type='text/javascript'>
//<![CDATA[
<script type='text/javascript' src='http://dl.dropbox.com/u/1382744/Java%20Script%20Geral/tomorrowagainDEMO/tomorrowagain.js'><script>
//]]>
</script>

y debe ser así:

<script type='text/javascript' src='http://dl.dropbox.com/u/1382744/Java%20Script%20Geral/tomorrowagainDEMO/tomorrowagain.js'><script>

Responder
CAFFE DO LIVRO  

Amigo eu ISSO Fiz ja nao sei e estoy echando!
Ja coloquei depois da tag skin e nada,antes da head e nada,abri o texto e colei e nada.
Sinceramente nao consigo!
Ja tem 12 horas ou mas que estou tentando e nada.
Aiiiiiiiiiiiiiii amigooooo!!!|o
Simplesmente no funciona!

Responder
JMiur  

Funcionar, funciona; eso es evidente porque acá está funcionando :D

No sé qué has hecho, no sé dónde lo has colocado.

Responder
Taillard  

Ola amigo!Por favor ajude-me ainda estou tentando e nada!
Por incrivel que pareça ja tentei tambem o slider usando apenas css e não funciona,as imagens tornaram-se enormessss ,e esse seu tutorial eu não compreendo.
É para colocar o texto do arquivo direto naquele espaço indicado e mais uma url do arquico acima?
Sabe to desesperada !!!
Beijao
I love you amigo!

Responder
Taillard  

Pode borrar todos los comentarios anteriores amigo lindo!
I love youuuu!!!
Eu usei o cerebro huahuahua e usei o fireburg em seu blog e encontrei o erroooo.
O erro era não apagar o texto Y aqui... e depois apaguei e colei o texto que tu enviou no arquivo ..e magicamente funcionouuuuu!!!
Muito obrigada amigo lindo!
Beijossss

Responder
JMiur  

Lo veo funcionando en tu blog. Las imágenes se ven grandes porque estás usando imagenes grandes, una tiene 800x600.

Responder
Taillard  

Amigo porque no CROME e no SAFARI esse menu não funciona?Ou seja as imagens se desorganizam!
No IE e Firefox tudo jóia mas ...nos outros navegadores nada!

Responder
JMiur  

No sé porqué no se ve bien tu ejemplo en esos navegadores; debe ser algo del CSS pero desconozco el motivo.

Responder
Taillard  

Amigo lindo encontrei o erro!(penso...:))
Hay qui esperar 1 hora depois que posta-se o arquivo e aceita-se no blog.
Depois de tudo isso ,entao tudo funcionaaa!!!
I Love Youuu!!!
Eu soy a tica del perfil Michael Graber(huahuahuahuahua)
Gracias

Responder
Poncho  

excelente pagina.
hise como en el ejemplo y nada solo me pararecen las imagenes horizontales y estaticas en la parte de arriba d el apantalla
podrian ayudarme...
Saluods...
Poncho

JMiur  

No sé dónde esta tu ejemplo.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR