JMiur [E]

Esto de los scripts para mostrar imágenes en ventanas exóticas o diferentes da para mucho, hay una gran cantidad de variaciones del mismo tema, cada una tiene sus particularidades y, a la hora de elegir cuál usar deberíamos tener en cuenta su tamaño y su flexibilidad.

Lightbox v2.0 es una de las más utilizadas. Requiere las librerías prototype y scriptaculous. Hay muchas variantes de la misma:
Y muchas otras que utilizan el framework prototype:
También hay versiones para la librería jQuery que permiten ver tanto imágenes como cualquier otro tipo de contenido web, incluyendo páginas externas:
Alguna posibilidades para el framekork mootools:
Y hay más:
Suckerfish Hover Lighbox y Hoverlightbox Redux son un poco diferente a las anteriores.

iBox soporta imágenes y html. Una de las más mejores versiones.

YUI PhotoViewer utiliza la librería YUI (Yahoo User Interface Library) y tiene un sin fin de opciones.

34 comentarios:

Jabba  

Muy interesante crack. Como siempre. Aunque el tema de los scrips y yo no nos acabamos de llevar bien :D.

Aprovecho para consultarte una cosilla. ¿Recuerdas cuando escribiste aquello de como ocultar la fecha de un post? Bien, pues en la plantilla que uso en elblogdejabba.blogspot.com (un nuevo blog que inauguré hace poco tiempo y que intento compaginar con Extrañas Normalidades) no encuentro la parte h2 class='date-header' donde tengo que introducir expr:id='"fecha-" + data:post.id'.

Hay partes del código que presumo que puedan ser equivalentes a esa, pero como no estoy seguro y no quiero liarla, te pido a ver si me puedes echar una mano con esto (otra vez).

Un saludo artista.

Responder
Jabba  

Otra cosa, y esperando no abusar de tu tiempo. ¿Cómo se hace para poner un enlace a un comentario en concreto de un artículo? He visto que algunas veces lo haces como aquí:
http://vagabundia.blogspot.com/2007
/08/otro-formulario-de-contacto.html
#comment-946880405534403337

y por lo que veo y presupongo, tienes que saber el númerito ese tan largo asociado a ese comentario (como ocurría con los posts a la hora de ocultar las fechas). Ahora bien, ¿de donde saco ese numerito de UN comentario en concreto?

Un saludete Hutt.

PD. Siento haber suprimido el comentario de antes, que no se veía con claridad toda la URL del enlace.

Responder
JMiur  

Ese es el problema con estas nuevas plantillas, son copias de plantilas de WP y no estandarizan los nombres de los elementos lo que lo hace más complicado.

Online no puedo decirte donde está exactamente pero deberías nombres similares a estos:
... class="titulotop"
... class="titulo"
... class="nivel2"
<span class="date-header"> ...
... class="post hentry uncustomized-post-template"
...
<h2 class="post-title entry-title">

Cualquier cosa, la semana que viene me envías la plantilla por coreo, me explicas qué quieres hacer y lo vemos con detalle.

Lo del enlace a los comentarios es más sencillo, fijate en una página de tu blog que tenga comentarios, por ejemplo ESTA.

Abajo del comentario, aparece la fecha:
7 de noviembre de 2007 22:34
que es un enlace y ese enlace es la dirección:
http://elblogdejabba.blogspot.com/2007/11/
linux-no-tiene-precio.html
#comment-4182377075016813084

Responder
Jabba  

Que bien y sencillas se ven las cosas cuando te las muestra quien ya las ha visto ;). Lo de los comentarios listo, y lo de la fecha me pondré a ello y ya te cuento. Muchas gracias!

Responder
JMiur  

Esa parte será engorrosa pero, es posible de hacer: SUERTE :)

Responder
Jabba  

Desisto con lo de la fecha. De todos modos tampoco queda tan feo dentro del recuadro en el que sale el título del post.

De todas maneras, y si la semana que viene como dices te va bien te mando mi plantilla a ver si la puedes destripar y encuentras como hacerlo.

Por cierto tu manual en 5 pasos de "Malditas Tablas" junto a mi "curioseo" en el código fuente de Vagabundia me está haciendo aprender cantidad con las tablas en HTML.

Te dije que antes o despúes me acabaría poniendo con el HTML y el CSS ;).

Saludos!

Responder
JMiur  

Me alegro que te sea útil y sí, como te dije, envíame la plantilla y la vemos :)

Responder
Turko  

Saludos, myu bueno tu blog, tengo una pregunta, cual ventana usas para lograr ver los videos de youtube?
se ve mucho mejor ke el tipico embbed jeje

Responder
JMiur  

Puede ver la explicación y los códigos necesario ACÁ

Responder
Turko  

JMiur Muchas Gracias, fue de mucha ayuda tu post :)

Responder
Tony  

Chequea ahora este:

http://webeaters.blogspot.com/2008/02/lightboxxl-for-prototypejs.html

Y su mejor ejemplo:

http://www.antcut.com

Exactamente como lightbox JS mas de una pelicula en un set. Lightbox++ solo te permite una y su extension debe ser .swf. LightboxXL no...


saludos

Responder
JMiur  

¡Que buen buscador antcut!!!

Gracias, Tony, muy interesante.

Responder
Tony  

He cambiado la interfaz, espero que te guste... si tienes algo que comentar me encantaría saberlo. Necesito de buenas ideas para mejorarlo.

Saludos

Mi blog: http://webeaters.blogspot.com

Responder
JMiur  

Lo miraré con gusto, Tony.

Responder
Juan Manuel Aguiar  

Hola JMiur.

Como yo se que tu eres un duro en esto de las ventanas modales y quiero implementar varios elementos en jquery en mi blog de blogger estuve investigando y encontré una ventana modal en jquery llamada colorbox http://colorpowered.com/colorbox/, pero no tengo ni idea de como implementarlo en mi blog. Chequealo y explícame como funciona por favor! para guardar los scripts prueba con dropbox que tiene 2GB, yo lo uso y me funciona perfectamente!!!

Mi blog: http://www.parabolastecnologicas.com.ve/

Responder
JMiur  

No uso JQuery. Es incompatible con Prototype y por lo tanto, no tengo ningna forma dencilla de probarlo. Veremeos que puedo entender.

Responder
[ :: WwW.FloWKaletA.CoM :: ]  

hola, sabes si el ligtbox esta fallando? utilice ese script ayer para algunas fotos y se me abria en otra ventana las imagenes y no con el efecto ligthbox, pense que era el servidor dende se alojaban mis archivos .js y .css y nada, busque por otros lados y vi que tampoco funciona en otros blogs, saber cual puede ser el problema? gracias

Responder
JMiur  

No veo un ejemplo en tu blog. Estas cosas no dejan de funcionar en cadena. Lo más probable es que, por algún motivo, no se esté cargando el script.

Responder
[ :: WwW.FloWKaletA.CoM :: ]  

hola otra vez, puedes ver el ejemplo en el post "Avatar 2, cameron da las primeras pistas" la imagen que se muestra trendia que cargarce con el lightbox, pero lo que hace es como si no cargase el script, puedes probarlo si no es mucho pedir en tu blog de pruebas porque el lightbox lo obtube desde la web huddletogether.com/projects/lightbox2/

Responder
JMiur  

Lo que veo es que estás cargando prototype tres veces; dos de manera directa:

http://flowkaleta.iespana.es/litebox1/js/prototype.lite.js

http://flowkaleta.webcindario.com/js/prototype.js

y además, otra con las APIs de Google.

Deberías, antes que nada, cargar eso sólo una vez. Hay que recordar, por ejemplo que deben cargarse antes de Lightbox y no después.

Responder
[ :: WwW.FloWKaletA.CoM :: ]  

hola denuevo, tenias razon tenia varios prototype.js, pero ya los corregi y me sigue saliendo el problema, eso de que deberia cargar antes de lightbox y no despues a que te refieres? esta mal ubicado el codigo? o porque el efecto lightbox ya me no funciona? algun consejo o soluucion porfa... muchas gracias

Responder
JMiur  

El oren ahora está bien. Pero veo que usas Prototype y JQuery; eso no puede hacerse ya que son incompatibles. Tampoco veo ningún script de lightbox.

Responder
[ :: WwW.FloWKaletA.CoM :: ]  

gracias por als respuestas y x seguir interrumpiendo tu tiempo :( , pero como que no encuentras el script de lightbox? tengo el

lightbox.css
prototype.js
scriptaculous.js
lightbox.js

que son los archivos que estan alojados en un servidor externo.

nose en que esta fallando o que script falta? xk el tutorial lo saque desde aqui:

huddletogether.com/projects/lightbox2/
(si te tomarias la molestia de revisarlo y provarlo para ver si a ud si le funciona se lo agradeceria)

Muchas gracias otra vez

Responder
JMiur  

Pues, en el código fuente del sitio, no estan, no hay ningún script lightbox.js ni hoja de estilo lightbox.css

prototype y scriptaculous se cargan bien via Google.

Responder
Bilosony2™  

De todas la ventanas modales cual recomendarias como la mejor?? Porque quiero instalar alguna y no medecido por cual sera la mejor para su uso...

Responder
JMiur  

Esa es una decisión personal. Cada una tiene sus pros y contras.

Responder
Bilosony2™  

Se eso es savido lamentablemente nunca aparece algo perfecto :( jeje pero tu personalmente cual usarias?? o crees que es el mas eficas a la hora de usarlo?? ;)

Responder
bettyboopz  

Hola! Tengo un blog de juegos y quiero saber quien me puede ayudar areglar mi platilla para que los comentarios tengan numero y agregarle iconos animados debajo, asi como aqui. Ya que yo he intentado por todos los medios sin éxito:(

Espero me puedan ayudar y felicidades el blog esta muy bien.

Responder
JMiur  

No hay una respuesta para eso. Vas a tener que ir viendo las diferentes explicaciones para cada cosa e irlas probando una por una.

Responder
quiensonora  

Hola JMiur, me encanta vuestro blog, y le felicito por tanto que hace para ayudar a quien lo necesita.

No se si se pueda pero me interesa mucho implementar un popup de imagenes en mi blog de juegos que estoy haciendo y en especial me interesa el que se encuentra en bigfishgames.es
Le dejo unas imagenes para que vea mas o menos a lo que me refiero pero si gusta puede pasar directamente a una pagina de muestra como esta: http://www.bigfishgames.es/juegos-de-descarga/13378/princesa-isabella-el-retorno-de-la-maldicion/index.html

Las imagenes aqui:
http://imagengratis.org/images/2011082122460.jpg
http://imagengratis.org/images/2011082122452.jpg

No se si esto se catalogue como spam pero en verdad necesito mucho de vuestra ayuda.

Muchisimas gracias por todo y espero me pueda ayudar.

Saludos sinceros de su amigo Alberto.

Responder
JMiur  

quiensonora:
Ese sitio debe usar alguna clase de ventana modal personal, no es una librería que puedas usar pero, si l oque que quieres es mostrar imágenes, cualquier otra es similar y funcionará perfectamente.

Responder
quiensonora  

Hola JMiur, gracias por contestar. Alguna que sea muy similar y que me recomiende.

Esa me gusto porque carga muy rápido la imagen, por el fondo que se oscurece y por las imagenes en miniatura junto con la imagen grande.

Aquí hay otra ventana modal casi igual a la que quiero, http://www.zylom.com/mx/juegos-descargar/world-s-greatest-places-mahjong-deluxe/?dsgid=8785
A lo mejor esta si se puede implementar en mi blog.

¿Habra alguna manera de adaptar una ventana modal a algo parecido?

Saludos y felicidades por tan magnifico blog.

Responder
JMiur  

Lo mismo que el caso anterior, en ese usa la librería jQuery pero el script es personal.

Recomendar no recomiendo ninguna en especial, esas son decisiones subjetivas. Todas funcionan.

Responder
quiensonora  

Bueno gracias de nuevo por su tiempo.

Saludos y mucho éxito.

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