Artículos con la etiqueta 'Presentación'

Shadowbox 3.0 beta

Fue lanzado en este momento (gracias a la alerta del autor Michael Jackson JI ) versión 3.0 beta Shadowbox.js . Además de los nuevo diseño del sitio aquí es el cambio más importante que antes de esta versión:

Continuación ...

Shadowbox assetURL: establecer la ruta de la imagen

Cuando Shadowbox abre su ventana para mostrar el contenido (imágenes, iframes, películas, etc ...), muestra, a la espera, un gif animado que viene en el paquete. Si la página está utilizando Shadowbox se encuentra en el mismo nivel de la carpeta de imágenes, todo funciona bien. Por defecto, de hecho, busque el siguiente gif animado Shadowbox images / loading.gif - o las imágenes / carga light.gif-si elige estilos de luz (shadowbox-light.css). De lo contrario, se corre el riesgo, ya menudo no accorgesene incluso, si estamos en un árbol diferente, se genera un código de buena 404 - página no la viga, no en nuestro expediente encontrado!

Para resolver este problema basta con iniciar Shadowbox con un parámetro adecuado que indica la ruta completa de la carpeta de imágenes: undolog.com de, por ejemplo, puse el gif animado de carga directamente en la carpeta de imágenes en la raíz (como millones de otros sitios :) . Para que la carpeta accesible a Shadowbox, independientemente de la ruta, pongo semplicemenete:

1
2
/ / Inicializa shadowbox assetURL con el parámetro
assetURL : 'http://www.undolog.com/' } ) ; Shadowbox Init ({assetURL: "http://www.undolog.com/ '}).;

Continuación ...

Todos los clones de la mesa de luz en una matriz dinámica

Planetozh ha creado un hermoso paisaje de una herramienta dinámica que hacer una lista de todas las bibliotecas de Javascript como la mesa de luz.

imagen

imagen El uso de un panel (ver foto a la izquierda) con una serie de "tics" (casilla), que indican las distintas funciones de las bibliotecas, puede ejecutar un filtro, para obtener la lista de una o más bibliotecas que hacen el trabajo. Esperamos que el autor mantiene actualizada esta gran página, muy útil para sacar a una de las bibliotecas de numerosos y poderosos de este tipo.

Continuación ...

Luz galería: 2.0.0_rc1 Lightview

Lightview . Esta es otra biblioteca recién liberados discreto JavaScript para galerías de imágenes y más Lightview en 2.0.0_rc1 liberación , también se agrega las funciones de "abrir" la ventana con el contenido que va más allá de la simple imagen: películas Flash, QuickTime , Forma y IFRAME! En comparación con la versión anterior (1.1.0 - que sólo se ocupa de las imágenes), entonces, esta versión candidata es características mejoradas también están presentes en otras bibliotecas . . Los instrumentos necesarios Lighview que funciona muy bien conocidos son el prototipo 1.6.0.2 y Scriptaculous 1.8.1 . Gliattributi biblioteca se utilizan para administrar la class y rel .

Un aspecto interesante de esta biblioteca es el extremo cuidado con que el gráfico aparece.

Puntuación: 9 - Inicio Lightview

Continuación ...

Biblioteca de la luz: Slimbox por un Shadowbox, galerías en Javascript

Algunos podrían decir - y con razón - lo suficiente! Bibliotecas de JavaScript (discreto - no intrusiva o en parte) para gestionar imágenes y galerías que hay tantos. De todos modos aquí está la lista, con los pros y los contras, lo mejor que he probado.

Slimbox 01:41

Extremadamente mínimo, 7K (versión 1.41), requiere mootools para trabajar. Como se indica en la página principal es un clon gráfico real mesa de luz , veremos más adelante. Sinceramente, aparte de la compacidad extrema de la biblioteca hace peculiares características no posee. En el mismo sitio, sin embargo, también se puede encontrar un script para generar reflexiones en tiempo de ejecución ... es posible que desee limitar este ;)

Nota: -6 - Slimbox Inicio, Reflection.js caseros para MooTools

Lightbox2

Lightbox2 Uno de los más conocidos y sencillos. Administra las imágenes de esta versión son (por lo que no funciona con QuickTime, Flash, o de otro tipo). Para operar, requiere de Prototype y Scriptaculous . Utilice el atributo rel para identificar los vínculos de las imágenes a procesar:

1
"images/image-1.jpg" rel = "lightbox" title = "my caption" > image #1 < / a > < un href = "images/image-1.jpg" rel = "lightbox" title = "my caption"> de la imagen # 1 </ un >

Al igual que las otras bibliotecas que vamos a ver, compatible con el modo de diapositivas, introducir cualquier identificador entre corchetes en una serie de enlace / imagen:

1
2
3
"images/image-1.jpg" rel = "lightbox[roadtrip]" > image #1 < / a > < un href = "images/image-1.jpg" rel = "lightbox [roadtrip]"> de la imagen # 1 </ un >
"images/image-2.jpg" rel = "lightbox[roadtrip]" > image #2 < / a > < un href = "images/image-2.jpg" rel = "lightbox [roadtrip]"> de la imagen # 2 </ un >
"images/image-3.jpg" rel = "lightbox[roadtrip]" > image #3 < / a > < un href = "images/image-3.jpg" rel = "lightbox [roadtrip]"> de la imagen # 3 </ un >

Puntuación: 6 - Lightbox2 Arriba

LIGHTWINDOW 2.0

LightWindow 2.0 Esto también es muy común! Después de todo ¿cómo puede saber que uno está acostumbrado? ;) . Sin embargo, es muy completo y versátil. En el sitio se encuentra la solicitud de donaciones para la compra de un Mac ... y presionar un poco invasivo ... Sin embargo, como el anterior, pero para su funcionamiento, requiere la presencia de Prototype y Scriptaculous . A diferencia de su predecesor, sin embargo, esto le permite ver los tipos de archivos moltisiimi: a partir de las imágenes, películas QuickTime, películas Flash, páginas externas HTML y PDF. ) altri obbligatori ( class e params - per impostare il comportamento della libreria). Por el contrario, utiliza varios atributos, algunos opcionales ( author, caption y title ) que no obligatoria ( class y params - para establecer el comportamiento de la biblioteca). Por ejemplo, para ver una galería o presentación de diapositivas con el atributo rel :

1
2
3
"gallery/0-sushi.jpg" class = "lightwindow" rel = "[Sushi]" title = "Left Behind" caption = "Look's super tasty!" author = "Unknown" > image #1 < / a > < un href = "gallery/0-sushi.jpg" class = "lightwindow" rel = "[Sushi]" title = "Left Behind" caption = "Mira es súper sabroso!" title = "Desconocido"> de la imagen # 1 </ uno >
"gallery/1-sushi.jpg" class = "lightwindow" rel = "[Sushi]" title = "Beware of warewolves..." caption = "I shouldn't be doing this when I am hungry" author = "Unknown" > image #2 < / a > < un href = "gallery/1-sushi.jpg" class = "lightwindow" rel = "[Sushi]" title = "Cuidado con warewolves ..." caption = "Yo no debería estar haciendo esto cuando tengo hambre" imagen author = "Desconocido"> # 2 </ un >
"gallery/2-sushi.jpg" class = "lightwindow" rel = "[Sushi]" title = "That was good!" caption = "Take that sushi!" author = "Unknown" > image #3 < / a > < un href = "gallery/2-sushi.jpg" class = "lightwindow" rel = "[Sushi]" title = "Eso estuvo bien!" caption = "Tome ese sushi!" title = "Desconocido"> de la imagen # 3 </ un >

Puntuación: 8 - Inicio LightWindow 2.0

Shadowbox 1.0b

Entrenarse con un adversario imaginario Aunque la versión 1.0 beta, esta es quizás la biblioteca más completa, tanto desde el punto de vista funcional, con el apoyo de las bibliotecas. Para su funcionamiento, de hecho, se puede elegir entre una variedad de marcos, con el archivo de "adaptador" especialmente fabricados y suministrados por el autor:

El efecto visual (configurable a través de la piel / css), entonces, a diferencia de los otros, es definitivamente más atractivo. Los atributos que se utilizan son sólo rel donde, en su espacio interior son todos los demás parámetros de configuración. Por ejemplo, para crear una galería, sólo tiene que utilizar:

1
2
"beach.jpg" rel = "shadowbox[Vacation]" > The Beach < / a > < un href = "beach.jpg" rel = "shadowbox [de vacaciones]"> La Playa </ un >
"pier.jpg" rel = "shadowbox[Vacation]" > The Pier < / a > < un href = "pier.jpg" rel = "shadowbox [de vacaciones]"> The Pier </ un >

Si desea configurar algunas opciones ( ver página web para la lista completa ) sólo tiene que utilizar la siguiente sintaxis:

1
"myimage.jpg" rel = "shadowbox;options={overlayOpacity: 0.5, resize: false}" > My Image < / a > < un href = "myimage.jpg" rel = "shadowbox; opciones = {overlayOpacity: 0.5, tamaño: false}"> Mi imagen </ un >

En Internet se pueden encontrar, tales como JS Highslide . De hecho, si usted desea reportar alguna otra biblioteca ... En fin, personalmente, prefiero Shadowbox por simplicidad, escalabilidad y la cruz-marco.

Puntuación: 9 - Arriba 1.0b Shadowbox

Continuación ...