JMiur [E]

A raíz del artículo de Gem@ donde nos mostraba un script llamado Lytebox me han llegado algunas consultas que no apuntan tanto a cómo usarlo sino a si es mejor o peor que otros, en particular, LightwIndow.

En realidad, es algo que no tiene respuesta ya que el uso de ciertas herramientas es subjetivo; en todo caso, lo único que puede hacerse es evaluar qué nos conviene y elegir.

La ventaja fundamental de este script es que, a diferencia de otros, no requiere otros como Prototype y Scriptaculous lo que lo hace más liviano a la hora de cargar las páginas. Esa ventaja, es también su debilidad; es decir, sus posibilidades son menores pero, son suficientes si todo lo que necesitamos es un script para crear ventanas modales simples donde mostrar imágenes.

Si, por algún motivo, ya tenemos integrado prototype porque lo utilizamos para otra cosa, da lo mismo usar cualquiera y todo se limita a gustos personales.

Los detalles para usarlo pueden verlos en el Blog de Gem@ pero, básicamente, basta descargar el ZIP , alojar los archivos en un servidor como Google Pages e insertarlos en la plantilla, antes de </head>:
<script type="text/javascript" src="URL_lytebox.js"></script>
<link rel="stylesheet" href="URL_lytebox.css" type="text/css" />
Eventualmente, podemos copiar el contenido del archivo lytebox.css y pegarlo en la plantilla; en ese caso, no hace falta subirlo:
<style type="text/css">
  [ ... el contenido del archivo ... ]
</style>
Lo utilizamos agregando el atributo rel="lytebox" a cualquier enlace:
<a href="URL_imagen" rel="lytebox" title="Texto optativo">ENLACE o MINIATURA</a>
O grupo de imágenes:
<a href="URL_imagen1" rel="lytebox[nombre]">ENLACE o MINIATURA</a>
<a href="URL_imagen2" rel="lytebox[nombre]">ENLACE o MINIATURA</a>
O página web:
<a href="URL_pagina" rel="lyteframe" rev="width:anchopx; height:altopx; scrolling:no;">
ENLACE o MINIATURA
</a>
Lo novedoso en este script es la posibilidad de crear un slideshow con un grupo de imágenes utilizando el valor lyteshow en el atributo rel:
<a href="URL_imagen1" rel="lyteshow[nombre2]">ENLACE o MINIATURA</a>
<a href="URL_imagen2" rel="lyteshow[nombre2]">ENLACE o MINIATURA</a>

Una imagen

Una galería

Una página

Un slideshow

56 comentarios:

Fernandooo1  

También lo vi en el blog de Gema, y personalmente me gusta que se vea bastante "light", da esa impresión a que se carga rápidamente, y el "link" de Cerrar también se lo ve bastante bien... es sólo que Lightwindow me parece algo más completo (?), quizás solamente sean impresiones.

No me atreví a usarlo, pero ahora que lo has posteado aquí, ya dinos:

¿Cuál prefieres?

:D

¡Saludos!

Responder
JMiur  

Sí, coincido contigo. Es más liviano, sin duda, muchísimo más liviano justamente porque no necesita las otras librerías con scripts.

Pero, por un lado, no soporta videos, cosa que, para mi es fundamental ya que es lo que hace que las paginas sean lentas si debo insertarlos directamente.

Además, si bien prototype es "pesada", me permite usarla para otra cantidad de funciones y efectos.

Me parece muy buena librería pero su uso queda limitado para aquellos que requieran algo así para las imágenes y sólo para eso. Personalmente, me quedo con la otra porque es lo que hasta ahora cubre mis necesidades.

Responder
solrac  

Estoy de acuerdo con vosotros respecto al peso más liviano de Lytebox respecto a LightWindow, etc...

Debo añadir una función que me gusta de LightWindow y es que consigue que la imagen, vídeo, etc. quede centrada en la ventana de navegador al utilizar el scroll, cosa que otros no hacen, como por ejemplo Lytebox.

El defecto de LightWindow es que si se redimensiona la ventana del navegador no auto-centra la imagen (: . Lytebox sí lo hace :)

... propongo hacer una nueva versión que tenga todo lo que nos gusta de cada uno.

Responder
mefistum  

Estee, disculpa por el comentario 'poco técnico' pero quería agradecerte y felicitarte por el buen gusto al elegir la modelo de las imágenes.

Hay un par que no tenía :)

Saludos.

Responder
Fernandooo1  

JMiur, no sé si esto se pueda "corregir" en el CSS del archivo -ni lo intenté, te cuento- pero note que la ventanilla modal de Lytebox permanece estática, no se mueve si usamos el scrollbar del "Explorador" (no el de Lytebox).

Yo me quedo con Lightwindow, también porque soporta vídeos y otras cosas. Noté también que el "scrollbar horizontal" SIEMPRE aparece en Lytebox (aunque "transparente") aun cuando no se lo necesite.

¡Saludos!

Responder
Fernandooo1  

Ahh... ¡se me olvidaba a qué había venido! ;)

Dejé esta dudilla por el blog de Rosa, y ella me envió a ti, gran maestro :P. Me dice que no tiene mucho tiempo... así que lo "transplanto aquí".

Como sabemos, podemos poner elementos en las páginas no principales, en vez de la "Portada del blog" (por así llamarla).

Podemos quitar el mensajito de "Mostrando entradas....." cuando hacemos click en cierta etiqueta.

Y siguiendo esa línea de pensamiento, aquí mi duda:

Hay alguna forma de que al hacerlo (dar click en una etiqueta X), y por separado, se muestre digamos un mensaje/"aviso" como explicando de qué se trata la misma.

¿Se podrá, se podrá?

Espero no sea complicado, ;D

¡Saludos!

Responder
JMiur  

No es mala idea Solrac, algunas cosas como el slideshow no parecen demasiado complejos.

Mefistum:
Hay más en el álbum :)

Fernado:
Me pasa lo mismo, no he mirado mucho el CSS, lo de la barra de scroll imagino que es solucionable y que Lytebox permanezca estática es la diferencia de la que habla Solrac y tal vez sea una buena idea.

Respecto a tu pregunta. El problema es este: Blogger, parece reconocer sólo dos tipos de páginas, las páginas individuales y el resto. En ese resto se incluyen la principal, la de archivos, las e búsqueda y las de etiquetas. Eventualmente, la página de inicio es identificable pero el resto no.

Hasta hora, no he encontrado nada que permita saber, desde el código si estamos o no estamos en una página que muestra etiquetas. Sin eso, casi es imposible resolver el tema que planteas.

De cualquier manera, son muchas las preguntas que llegan sobre cosas similares. Las etiquetas de Blogger apestan; casi tanto como los comentarios. Seguiré pensando en alguna forma pero, por ahora, no se me ocurre nada razonable.

Responder
Fernandooo1  

Estaba "craneando" un poco, viendo si de alguna idea "vaga" salía algo interesante....

Y usando Scriptaculous? O sea, para que al mismo tiempo que, por ejemplo en la nube de etiquetas, se da click en un link, aparezca algún recuadrito o algo asi...

No sé, son ideas vagas de un ser que poco sabe de HTML y CSS.

¡De todas formas gracias!

Saludos,

Responder
Gem@  

Completamente de acuerdo, no es que sea más ligera, se trata de una sola librería. Siempre lo digo con LightwIndow tenemos todo en uno. Pero hay excepciones donde la utilidad sólo es para imágenes y entonces Lytebox se convierte el la ideal.

Responder
Claudio  

De acuerdo con todos, cada uno usa los recursos según sus necesidades, me gusta el Lytebox para una website que use unas galerias.
En mi opinión en un Blog me gusta seguir leyendo otras cosas mientras carga un vídeo y eso no lo permite ninguno de estos sistemas, es cuestion de gustos y ancho de banda.

Gracias por el aporte J.Muir y también a Gem@

Responder
JMiur  

Como se ve, hay para todos los gustos y casi todas las necesidades; eso es lo bueno :)

Responder
Anónimo  

Verdaderamente es liviano y vistoso, pero tiene la pega de que paraliza el explorador Opera. Es muy desagradable el efecto que provoca en este explorador (pero tampoco se puede tener todo)

Responder
mefistum  

Mi humilde aporte a la unión de nuestros pueblos.

Estoy de acuerdo con lo que dice Claudio, eso es precisamente lo que me ha frenado en la utilización de Lightwindow.
¿No hay forma de usarlo con los videos sin que al cargarse ocupe todo el ancho de la página? Si estoy preguntando una tontera no te molestes en contestar :)

Saludos y gracias por compartir tan tremendo tesoro.

Responder
JMiur  

Mefistum: tomo nota "del aporte" :D

En cuanto a lo otro, sí, es posible hacer que no ocupe todo el ancho; de hecho, yo las muestro dimensionadas al ancho del video pero, no sé si es esa la pregunta o la duda.

Lo de Claudio es cierto y es justamente el punto clave de esta y de cualquier herramienta. Lo que a él le parece "malo", a mi me parece "bueno"; es decir, tenemos necesidades, gustos o preferencias distintas en ese punto y que podamos seleccionar la herramienta que se adecue más a eso que pretendemos, es lo ideal.

Responder
< Dani.M.G>  

A mi me abre la foto en otra pagina en lugar de hacer el efecto, por que me puede suceder esto?

Responder
JMiur  

Lo que ocurre es que el script no se carga. Está alojado en un sitio que, aparentemente, no acepta el enlace directo.

Si colocas la dirección del script en el navegador, se abrirá una página web en lugar de descargarse el archivo o mostrarse como texto:
http://www.woofiles.com/dl-168473-X6yleGYn-lytebox.js

Responder
Gem@  

Con la movida de los scripts añadí el de Lytebox directamente a la plantilla, me preguntaba si hay alguna librería de Google que sustituya tanto código como tengo añadido.
Por otra parte decirte que me las ingenié para añadir los vídeos con Lytebox. Así que hoy por hoy se le puede añadir imágenes, galerías, páginas, slideshows y vídeos :) :)

Responder
JMiur  

No, Gem@, no hay. Sólo tienen las frameworks más conocidas.

¿No has probado colocarlo en un elemento HTML al inicio dee la plantilla? Cuando son muy complejas, puede haber problemas pero vale la pena probar.

Lo de los videos es genial :D

Responder
Gem@  

Si, si he probado en un HTML es lo primero que hice y en el blog de pruebas carga de gloria pero en mi plantilla se hace muy lento, de todas formas quiero probar otra vez no me conformo con tener la plantilla más extensa de Blogger :)

Responder
JMiur  

Que varie el tiemp ode carga es raro, debería ser el mismo pero no me extrañan nada estas rarezas de Blogger salvo que ... y esto puede ser, al colocarlo en un elemento HTML, algún código cambie, haya un error y de allí la demora. Esto me ha pasado con algunas cosas y no entiendo por qué.

Responder
UNAD  

para lo de la barra solo hay que cambiar en el codigo del enlace donde dice scrolling esta en no lo pones en yes y ya

Responder
moonlight  

por más que pruebo no consigo que me salga...
el archivo .css si lo puedo subir a un servidor, pero el .js no, me abre una página de descarga
¿me puedes decir como añadirlo directamente a la plantilla?
gracias!!

Responder
JMiur  

Si se abre una página de descargas, el problema es que la URL es errónea o el servidor no permite enlazarlo directamente. También puedes cambiarle la extensión, en lugar de JS, que sea TXT, tiene menos restricciones para lojarse y funcionará igual.

No he verificado si puede usarse directamente en la plantilla. Para comprobarlo, cra un elemento HTML y coloca el contenido del archivo entre etiquetas script:

<script type='text/javascript'>
............ AQUI EL CONTENIDO DEL ARCHIVO
</script>

Otra alternativa, colocar antes de </head> de este modo:

<script type='text/javascript'>
//<![CDATA[
............ AQUI EL CONTENIDO DEL ARCHIVO
//]]>
</script>

Responder
Gem@  

Yo lo tengo en la plantilla, pero la recomendación de J.Miur es la ideal :)

Responder
JMiur  

Bien, Gem@ Es bueno saber que funciona en la plantilla directamente :D

Responder
moonlight  

gracias, en cuanto tenga un rato lo pruebo
gema ya me lo dijo por mail pero no sabía como hacerlo, estuve probando varias formas pero siempre me daba error

Responder
Ginna Lucia  

Tengo un problema,estoy trabajando con lytebox para presentar en un modal texto utilizando rel="lyteframe" pero en Internet explorer 8 el modal se me cierra inmediatamente sin mostrar el contenido, cuando trabajo con compatibilidad en IE8 me funciona y ya lo he probado en firefox y también funciona alguien sabe si el problema con IE8 tiene solución?

Responder
JMiur  

Ginna Lucia:
No se me ocurre que podría ser. Deberías consultar en la página de los desarrolladores.

Responder
Manuel García  

Hola JMiur, lo he probado de todas las formas y no consigo que me haga el efecto de ventana flotante (al menos no hasta que termina de cargar la pagina completamente, que en mi caso es demasiado tiempo).
Los archivos los he cogido correctamente y de la misma página de lytebox:
http://www.dolem.com/lytebox/lytebox.js
http://www.dolem.com/lytebox/lytebox.css

A ti tampoco te sale, pero ni con lytebox ni con lightbox.
Mira prueba a darle a los botones de demo que tienes en el post pero ANTES DE QUE TERMINE DE CARGAR la pagina y veras como se te abre como si fuera un enlace normal. Tambien pasa con el boton de la ventana emergente de comentarios que tienes abajo que es lightbox.

Que puedo hacer??

Muchas gracias JMiur.

Responder
JMiur  

Sobre eso no puede hacerse nada, dependerá de la velocidad de conexión. Los scripts se ejecutan cuando son cargados, si la página tarda en abrirse y quieres ejecutarlos, no funcionarán porque aún no existen.

Responder
barcosbarcelona.com  

ESTE SERIA PERFERTO, EL PROBLEMA ES QUE NO TENGO MUCHA IDEA DE COMO HACERLO. DONDE COLOCAR EL SCRIPT, COMO DESCARGAR ETC..

NO SE SI PUEDES AYUDARME , SI NO LO ENTIENDO PERFECTAMENTE

Responder
JMiur  

Todo eso es lo que explica el post ¿Cuál es la duda concreta?

Responder
Agustin  

Hola, he estado probando el lytebox y tienen buena pinta, pero tengo un problema. No me funciona bien en el IE8 y he leido que es por compatibilidad. Mi sorpresa ha sido que cuando he pinchado en su ejemplo desde IE8 y si me ha funcionado bien. Me podrias decir cual es la diferencia??? Muchas gracias.

Responder
JMiur  

No se cuál es tu blog para ver un ejemplo pero, no veo que el script tenga problemas ni en IE7 ni en IE8.

Responder
Braulio Guido  

Hola, tengo una pregunta:
Hay alguna forma de que el Lytebox funcione con las imágenes cargadas directamente desde Blogger?, es un poco lento estar subiéndolas a un servidor externo, aparte a veces no las carga completas, etc.

Si se pudiera aplicar el código dentro del código de Blogger sería genial. Gracias de todas maneras. Saludos!

Responder
JMiur  

¿A qué imágenes te refieres? ¿A las que usa el script mismo o a las imágenes que quieres mostrar? En ambos casos, la respuesta sería si pero no entiendo bien la pregunta. Aclárame eso.

Responder
shhhhhh  

Hola buena gente, me anduvo perfecto pero quiero poner el id de un registro para que me muestre las 3 imagenes de ese registro en mysql con php como puedo hacer?
rel="lyteshow[] así no me funciona

Responder
JMiur  

Así en abstracto es imposible responder.

Responder
Admin  

Buenas, implemente esta ayuda, pero no me salen las flechas para ir pasando las imágenes ni tampoco el closet,

otra cosa es que navegando en varios blogs (este, otros y los mios), la pagina se actualiza sola, y es la 5ta vez que escribo este mensaje, sin que me deje terminarlo...

a que se debe esto?

Gracias por la ayuda...

Responder
JMiur  

Las imágenes no las ves porque debes cambair el CSS; alojarlas en alguna parte y cambiar las URLs por las tuyas.

Eso que se recarguen las páginas no es normal. No hay nada en la página misma que lo haga.

Responder
Admin  

Bueno, la verdad nose, me sigue pasando eso... yo uso el navegador de google, tendra algo que ver?

Responder
JMiur  

No veo que hayas cambaindo el CSS de Lytebox que es donde están las imágenes. Mientras no lo hagas, seguirá pasando lo mismo.

Responder
German Long  

hola JMiur, te hago una consulta... he aplicado este efecto lytebox en mi blog y me sale bien, pero tengo un problema... y es que en una entrada que tengo 3 imágenes (no seguidas, sino que hay texto entre las imágenes) la primera imagen se abre perfecto a tamaño real en la ventana deslizante, pero la segunda se abre en una ventana deslizante al mismo tamaño que la imagen miniatura, o sea, se abre la ventana deslizante, pero no se agranda a su tamaño original. ya he revisado el src, y lo veo bien, no se que puede estar mal...
te muestro un ejemplo:
http://www.deviajeporahi.com/2011/08/monumento-cristo-rei-lisboa_377.html

si miras ahi, la 1º foto se abre bien, pero la segunda se abre al mismo tamaño...

gracias...

Responder
JMiur  

No veo que ocurra eso, veo que ambas se abren normalmente, mostrando imágenes de 640x480.

Responder
Admin  

Bueno, creo que me quedo grande implementar esta función...a ver si me podes colaborar un poco...

Gracias

http://mundo-construccion.blogspot.com/2001/08/httpsmail.html

Responder
Admin  

Tampoco logre descargar los archivos..utilice los q habia subido hace ya algun tipo en mi pagina...

Responder
JMiur  

Los archivos están en la página del desarrollador.

Responder
Admin  

Gracias con algunas hora de intentar puede lograr el efecto, tal vez quieran ver como quedo http://mundo-construccion.blogspot.com/2001/08/httpsmail.html

También quisiera que por favor me ayudaran a que en mi plantilla aparezca la fecha en la cual he publicado los post, ya que no sale así marque la casilla para q salgan y fuera de eso la plantilla tiene pre diseñado un 17 April. quisiera poder cambiar eso.

De nuevo gracias.

Responder
JMiur  

En esa plantilla, al fecha se muestra con un script que dice exactamente eso, que se muestre el 17 de abril del 2009. Vas a tener que consultar con quienes la diseñaron o bien eliminar toda esa parte.

Responder
Admin  

Gracias JMiur, entonces si me gustaría eliminarla, podría indicarme como hacerlo?

y tal vez colocar la fecha así como la que utiliza ud. acá en el blog.

Gracias.

Responder
JMiur  

No puedo darte detalles porque depende del código mismo de la plantilla y es algo que no puede verse online.

En estas dos entradas hay una explciación sobre la forma de usar un script para descomponer la fecha y mostrarla de esta forma: 1 | 2

Responder
Tuky  

Gracias!! Gracias!! gracias!!! no sabés lo que luché pero lo logré!!

Responder
JMiur  

Bien hecho, Tuky :D

Responder
La Punta Producciones  

Hola JMiur, lamento traerte tan atrás, espero que veas este mensaje, por suerte encontré este post. Es que agregué el lytebox siguiendo las indicaciones de Gem@, pero tengo un problema. Gem@ explica cómo agregar un video de Youtube, pero yo quiero agregar un video subido directamente a Blogger. Los videos los agregué en una entrada que dejé como borrador esperando obtener un link que pudiera usar. Imposible, como ya has comentado en otros post, no hay link aparentemente. Puse una imagen que me llevaría al video, pero qué agrego al código??? jajaj la ventana se abre pero ...vacía. si podés fijarte, en la miniatura (en construcción) "Trailer". Gracias jMiur. saludos

JMiur  

No veo el ejemplo pero, de cualquier modo, Lytebox sólo reproduce videos de determinado formato o alojados en determinados sitios y no cualquiera. Ninguna ventana modal reproduce cualquier tipo de video y sobre todo, los subidos directamente a Blogger que son muy extraños.

Si te fijas en la página de lytebox dicen que sólo reproduce Flash, videos de YouTube, DailyMotion y QuickTime.

La Punta Producciones  

ah! bueno, chas grá JMiur

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