JMiur [E]

En ajaxorized.com hay una pequeña librería que utiliza prototype y script.aculo.us para incluir transiciones en las imágenes de manera muy simple.

En este momento, el script posee nueve transiciones diferentes que funcionan tanto en Firefox como en Internet Explorer.

Primero que nada, descargamos el ZIP que nos proveen y que contiene un demo y todas las librerías necesarias

Si no las tenemos incluidas, agregamos las librerías a la plantilla, antes de </head>:
<script src="URL/prototype.js" type="text/javascript">
<script src="URL/scriptaculous.js?load=effects" type='text/javascript">
Si ya las tenemos en la plantilla, sólo debemos alojar el script transition.js en un servidor y lo cargamos agregándolo debajo de las anteriores:
<script src="URL/transition.js" type="text/javascript">
Eso es todo, ahora, ya podemos usarla agregando el atributo rel a cualquier enlace e indicando el tipo de transición; por ejemplo, podemos poner una lista de imágenes, o una tabla:
<ul>
<li><a href="URL_image1" rel="transition[switchoff]">ENLACE 1</a></li>
<li><a href="URL_image2" rel="transition[slidedown]">ENLACE 2</a></li>
<li><a href="URL_image3" rel="transition[blinddown]">ENLACE 3</a></li>
<li><a href="URL_image4" rel="transition[slideright]">ENLACE 4</a></li>
<li><a href="URL_image5" rel="transition[appear]">ENLACE 5</a></li>
<li><a href="URL_image6" rel="transition[switch]">ENLACE 6</a></li>
<li><a href="URL_image7" rel="transition[blinddown]">ENLACE 7</a></li>
<li><a href="URL_image8" rel="transition[grow]">ENLACE 8</a></li>
<li><a href="URL_image9" rel="transition[shrink]">ENLACE 9</a></li>
</ul>>
Luego, donde deseamos que se muestre, creamos un bloque DIV que será el contenedor donde se verán las imágenes, que tendrá las propiedades CSS que nos gusten y donde, por defecto veremos la primera imagen de la serie:
<div id="nombre" style="propiedades">
<img src="URL_imagenInicial" />
</div>
Por último, debajo del DIV agregamos el script para crear la transición donde sólo necesitamos indicar el ID del DIV y la imagen inicial:
<script type="text/javascript">
laTransicion = new Transition('nombre','URL_imagenInicial');
</script>
Podemos agregar tantas galerías con transiciones como deseemos y serán independientes ya que a cada una de ellas la creamos indicando un ID diferente.

Lo que conviene es precargar las imágenes con anterioridad para evitar demoras (más información). Esto, lo hacemos agregando lo siguiente:
<script type="text/javascript">
var nombrePIC=new Array();
nombrePIC[0]=new Image(ancho,alto);
nombrePIC[0].src="direccion_URL_imagen_1";
nombrePIC[1]=new Image(ancho,alto);
nombrePIC[1].src="direccion_URL_imagen_2";
.............
</script>

25 comentarios:

Aleix  

Anda, parece que los scriptaculous nunca se acaban... Muy interesante, por cierto.

Por mi parte, recomiendo a todos PicLens. Es un plugin increíble que va con varios navegadores.

www.piclens.com

Ejemplo-info

Probadlo, es espectacular (y gratis).

Responder
Gem@  

Habría que hacer una campaña "Ponga Scriptaculous en su vida" hay que ver la de posibilidades que ofrece ¿son infinitas?
Gracias J.Miur ;)

Responder
JMiur  

No sé si son infinitas pero casi casi :D

Esta me ha gustado porque es muy sencilla de usar y no hace falta agregar el script en la plantilla, puede ponerse en el post donde lo vamos a usar.

Responder
Anónimo  

Qué belleza de trabajo!
Manos a la obra para probarlo.

JMur una pregunta al margen del caos que ha sido blogger desde antes del fin de semana, ahora tengo un problema con la imágenes.

¿Por qué de repente las que están alojadas en IS o Photob, ya no me salen con el borde que indiqué en la plantilla, deseo tengan?

Y si las subo con blogger... pues me sale el borde cuando él lo desea...

Hay manera de solucionarlo? Es un problema repentino de mi plantilla?

(Sobre fondo blanco la imágenes sin recuadro no son de mi gusto a menos que juguemos con fundir figuras)

Bueno, un saludo

Responder
JMiur  

Mar:

Tendría que ver exactamente donde notas esas diferencias pero, en tu blog, las imágenes que se colocan en los posts tienen definidas estas propiedades en la plantilla:

.post p img {
border:1px solid #CCCCCC;
padding:4px;
}

Así que si colocas:

<p ....>
<img src="...." />
</p>

La imagen tiene un borde alrededor.

Ahora bien, por ejemplo en ESTE POST, las imágenes no tienen ese borde porque no están dentro de una etiqueta P sino dentro de una etiqueta DIV:

<div ....>
<img src="...." />
</div>

Así que, lo que podrías hacer es agregar esa posibilidad:

.post p img, .post div img {
border:1px solid #CCCCCC;
padding:4px;
}

o bien cambiar las etiquetas DIV por etiquetas P.

Responder
Anónimo  

Hola, venía a buscar archivos tuyos que me faltan llevar para aprender -y van a la carpeta Vagabundia- que lo sepas :-)

La imágenes que señalaste ya habían sido subidas... (ya sabés que estoy reconstruyendo esos blogs).
Los archivos los tengo guardados en word... y he utilizado el mismo código xD!
Antes tenían borde y ahora de repente no!

Además me di cuenta, en los distintos blogs o subpáginas de artes, me han salido bordes como no...

Esto ya escapa a todo lo que me está pasando hace unos días.

Bien, me llevo tu respuesta.
Muchas gracias por la deferencia de ver el problemilla.

(que para mí no lo es)

Mis saludos.

Responder
Anónimo  

Bueno lo solucioné
con el primer código que me brindaste

-No lo puedo repetir me rechaza el comentario-

(re-edité una entrada en Ars Poética y funcionó perfecto)

Porque si modifico el CSS, me desconfigura el pie de la entrada del post, tal como está diseñada en esa plantilla y escapa a mi conocimiento arreglarlo.

Además me enmarca hasta la flechita de ir arriba en cada post.

Ahora resta probar qué sucede cada vez que subo imágenes... o sea TODO EL TIEMPO....

Muchas gracias

Ah...... he probado lo de los PDF y me encantó! ;-)

Responder
JMiur  

Mar:
Con las imágenes nuevas no creo que tengas problemas si te fijas que estén entre etiquetas P. Corregir las entradas anteriores es trabajoso :)

Responder
Anónimo  

Este post me quita el sueño...
No puedo contigo!

Responder
JMiur  

Paciencia, Mar :D

Responder
Uno mas del monton  

Hola que tal, antes que nada te aviso que no entiendo mucho...

Intenté hacerlo y no me salió, y me sería bastante útil..
Te cuento lo que hice..
1-Subí los archivos Js a Skydrive
2-cuando los iba a agregar antes del /head vi que los dos primeros ya estaban agreagos asi
script src='http://wiki.script.aculo.us/javascripts/prototype.js' type='text/javascript'/

script src='http://wiki.script.aculo.us/javascripts/scriptaculous.js?load=effects' type='text/javascript'/

Asi que agregué el tercero
script src='http://o2kxpg.bay.livefilestore.com/y1p7XlXV-V1uPqLAo1ICdNy9KUqnFVf5xAL8XwcHNXoaELjvcRaJUIh8Dbba4VAyzjN0ZhDAl1hDlg/transition.js' type='text/javascript'/

3- y aca vienen las duadas.. La estructura nose bien como sera intenté de varias formas... puse como vos decias

el Ul con los li y las imagenes
despues abajo el div con la primera imagen
y abajo el script tambien con la primera imagen

Al div y al script le deje como nombre "nombre" ¿puede que este sea el error?

Me parece q no pero tu sabrás mejor, eso espero
intenté visualizar el código de la transición de ejemplo en esta web pero se me hizo un lio, si no me podes ayudar no importa se que tendria que esforzarme mas en averiguar como es :$, aunque espero que me ayudes :D

Responder
JMiur  

¿Hay algún ejemplo online donde pueda verse?

Responder
Uno mas del monton  

Volví ahora me voy a tratar de explicar mejor, lo volvi a intentar esta vez dejo ejemplos,
Primero agregue los 4 archivos a skydrive

Enlace:
http://cid-dad57150d296d863.skydrive.live.com/browse.aspx/Cosas%20de%20los%20blogs/Archivos%20Java

Despues los agregué a la plantilla antes del /head, Donde me saltó un error, en la entrada donde esta ESto:

script src="URL/scriptaculous.js?load=effects" type='text/javascript"
aca al final hay un problema de comillas son dos distintas, lo arreglé y quedo asi

Foto:
http://o2kypg.bay.livefilestore.com/y1p3J4smw4j9Z89tbthkPIxi94kkCzLv1RD0hDoD1OXPwXzHPyG4FhOu7Jadn6iuIsmgikjr10K0gbu6qBpT5xDGw/ejemplo1.PNG


Después aprete Ctrl+U para ver el código fuente de la pag. busque donde aparecía el ejemplo y copié y pegué y despues intenté hacerlo como dijiste, no salió, te dejo el código que puse en la entrada en un txt:

Codigo entrada:
http://o2kypg.bay.livefilestore.com/y1p3J4smw4j9Z8wiJ0VZZN3nj_fRpk5ng6UgzKLWq7zgDGMbjlzYbBDAkzNjt8dQFyqp9oQRkhmVoL4Z_O6kZQiVg/ejemplo2.txt


El ejemplo se ve aca:
http://probandoplantillasss.blogspot.com/

Desde ya espero que me salga Gracias, a y una cosa que acabo de notar, las imagenes tienen que ser todas del mismo tamaño?

:) Saludos :D

Responder
JMiur  

Un detalle importante es el orden en que se cargan las librerías que debe ser este:

<script src="URL/prototype.js" type="text/javascript" />
<script src="URL/scriptaculous.js?load=effects" type='text/javascript" />
<script src="URL/transition.js" type="text/javascript" />

En el código fuente del sitio veo que están invertidos.

Una segunda dificultad que puede presentarse a veces es el alojamiento Scriptaculous de en SkyDrive. Eso podrías verlo en este post.

También se llama dos veces a transition.js; desde el head y desde el post. con una sola vez es suficiente.

Responder
Uno mas del monton  

GRacias :D!! no sabia lo del orden ahi lo hice andar, voy aprendiendo sobre la marcha :P. ahora solamente si no es mucho pedir quisiera algun consejo para mejorar la tabla con numeros, ah y una pregunta importante se puede hacer que entren imagenes grandes? o deberian ser mejor todas del mismo tamaño, esto ultimo tambien lo pregunto por el arreglo que carga las imágenes.


http://probandoplantillasss.blogspot.com/

Responder
JMiur  

Por suerto, todos losdias aprendemos algo nuevo, sino, sería muy aburrido :D

Del tema estético mucho no puedo decirte porque no se cual es yu idea. Por ejemplo,podrías cambair la fuente de los enlaces agrebando una definición con valores a tu gusto:

#demoTablaTrans td a { aqui color .... fuentes ... tamaños }

Lo del tamaño de las imágenes. Mira, el array no importa, acepta cualquier cosa pero como es algo fijo en la página, lo ideal es que todas las imágenes sean iguales para que el efecto sea agradable.

Responder
Nicar  

Hola JMiur.
Desde que me llego el correo ,de googlepages, diciendo que se acababa el tiempo de alojamiento, me puse a colocar los scripts en la plantilla.De momento los tengo puestos en elementos html en el header , en el footer; en la plantilla antes de </head>,en... (me faltan,todavía, más de una docena)je,je. Cuando tenga que buscar algo y no funcione el encontrar (ctrl+f) me voy a volver "majara".
Tengo estas transiciones puestas en 2 entradas. Funcionan bien cuando están separadas, pero al ponerlas con la misma etiqueta ocurre que una hace de monitor de la otra. Tengo los ID con diferente nombre y ya intente varias "cosas". No se me ocurre nada. Lo puedes ver en la nube con PRUEBA.
Saludos y muchas gracias por todo.

Responder
JMiur  

NKR: Aunque no puedo probarlo, me da la impresión que el problema no es sólo que debes cambair el ID cosa que es correcta sino tambien el nombre de la transicion:

oTransition = new Transition( 'blancoynegro', .........

A una llámala oTransition y a la otra oTransition2 o cualquier nombre, eso es sólo un nombre y deberían ser diferentes.

Responder
Nicar  

Hola JMiur.
Cambié el nombre de la transición y sigue ocurriendo lo mismo.Te dejo las dos entradas y la url del script para que le des un vistazo,si tienes tiempo y te apetece.
El archivo está en
http://sites.google.com/site/karbonera/kk1/ENTRADASTRANSITION.txt
Una manera fácil de resolver el problema es cambiarle la etiqueta y asegurarse que no coincidan en la misma página, así que... no te molestes mucho.
Un saludo.

Responder
JMiur  

OK, tu solución no es mala :D De todas formas, miraré el código y haré la prueba. Cualquier cosa, te aviso.

Responder
JMiur  

Ahhhh viendo rápidamente el código hay algo más que podría intentarse. Si te fijas, todas las imágenes son un array:
var transPIC=new Array();transPIC[0] ............

Eso tambien debería ser diferente en ambas:
var transPIC=new Array();transPIC[0] ............

var transPICOTRO=new Array();transPICOTRO[0] ............

Porque sino, siempre estás usando las mismas.

Responder
Nicar  

Hola JMiur.
Cambié lo que me dijiste y el resultado es el mismo. Hice una prueba en orto blog invirtiendo las entradas cronologicamente.Ocurre que la primera que publiqué es la que hace de monitor de la segunda.Igual que en el blog pero las entradas cambiadas.
¿Alguna idea para un último intento?
Gracias por aguantar este "toston".

Responder
JMiur  

Sí; es tal como dices. Es probable que no tenga solución y que sea siempre la primera la que actua algo así como master. Por ahora, no tengo respuestas y es posible que sea una limitación.

Responder
Nicar  

Gracias por contestarme. Lo arreglo cambiando las etiquetas.
Un saludo.

Responder
JMiur  

Me parece lo más razonable, NKR porque tal vez, no tenga esa posibilidad y estemos intentando hacer lo que el script no está preparado para hacer.

Responder

¿Quiere dejar un comentario?

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

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