jQuery »Desarrollo» Javascript »Internet» Graphics & Design »CSS» Ajax

Luz de Bibliotecas: Slimbox por un Shadowbox, galerías en Javascript

Miércoles, 13 de febrero 2008

Algunos podrían decir - y con razón - ¡Basta! Librerías Javascript (discreto - no intrusiva o parcialmente) para gestionar las imágenes y galerías, en realidad hay muchos. De todos modos aquí está la lista, con los pros y los contras, la mejor que he probado.

Slimbox 1:41

Extremadamente mínima, 7K (versión 1.41), requiere mootools a trabajar. Como se indica en la página principal es un auténtico clon gráfico de la mesa de luz, que se verá más adelante. Francamente, aparte de la compacidad extrema de la biblioteca, nada de particular. En el mismo sitio, sin embargo, usted también puede encontrar un script para generar la reflexión en tiempo de ejecución ... Este límite puede ser útil ;)

Rating: - 6 - Top Slimbox, Home Reflection.js para MooTools

Lightbox2

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

Texto sin formato
HTML:
  1. "images/image-1.jpg" rel = "lightbox" title = "my caption" > image #1 </a> href <a = "images/image-1.jpg" rel = "lightbox" title = "my caption"> imagen # 1 </ a>

Al igual que el de otras bibliotecas que vamos a ver, soporta el modo de pase de diapositivas, mediante la inserción de soportes de cualquier identificador de una serie de enlace / imagen:

Texto sin formato
HTML:
  1. "images/image-1.jpg" rel = "lightbox[roadtrip]" > image #1 </a> href <a = "images/image-1.jpg" rel = "lightbox[roadtrip]"> imagen # 1 </ a>
  2. "images/image-2.jpg" rel = "lightbox[roadtrip]" > image #2 </a> href <a = "images/image-2.jpg" rel = "lightbox[roadtrip]"> imagen # 2 </ a>
  3. "images/image-3.jpg" rel = "lightbox[roadtrip]" > image #3 </a> href <a = "images/image-3.jpg" rel = "lightbox[roadtrip]"> imagen # 3 </ a>

Puntuación: 6 - Página de inicio Lightbox2

LightWindow 2,0

LightWindow 2,0 Esto es también bastante generalizada! Después de todo, la manera de entender lo que es el más utilizado? ;) . Sin embargo, es muy completa y versátil. En el sitio se encuentra una petición de donaciones para la compra de un Mac. .. un poco invasivo y presionando ... De todos modos, como el anterior, para su funcionamiento, requiere la presencia de Prototipo y Scriptaculous. A diferencia de los anteriores, sin embargo, esto le permite ver moltisiimi tipos de archivos de imágenes, películas QuickTime, películas Flash, páginas HTML y PDF externas. Por el contrario, utiliza varios atributos, algunos opcionales author, caption y title otros class y params - para establecer el comportamiento de la biblioteca). Por ejemplo, para ver una galería o presentación de diapositivas con el rel

Texto sin formato
HTML:
  1. "gallery/0-sushi.jpg" class = "lightwindow" rel = "[Sushi]" title = "Left Behind" caption = "Look's super tasty!" author = "Unknown" > image #1 </a> href <a = "gallery/0-sushi.jpg" class = "lightwindow" rel = "[Sushi]" title = "Left Behind" caption = "Look's super tasty!" autor = "Unknown"> imagen # 1 </ a>
  2. "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> <a href = "gallery/1-sushi.jpg" class = "LightWindow" rel = "[Sushi]" title = "Guardaos de los warewolves ..." caption = "Yo no debería estar haciendo esto cuando tengo hambre" autor = "Unknown"> image # 2 </ a>
  3. "gallery/2-sushi.jpg" class = "lightwindow" rel = "[Sushi]" title = "That was good!" caption = "Take that sushi!" author = "Unknown" > image #3 </a> href <a = "gallery/2-sushi.jpg" class = "lightwindow" rel = "[Sushi]" title = "That fue good!" caption = "Take que sushi!" autor = "Unknown"> image # 3 </ a>

Puntuación: 8 - Home Page LightWindow 2,0

Shadowbox 1.0B

Shadowbox Aunque la versión 1.0 beta, esta es quizá la colección más completa, tanto desde el punto de vista funcional es para las bibliotecas de apoyo. Para su funcionamiento, de hecho, puede elegir entre una serie de marcos, a través de los archivos de "adaptador" especialmente hecho y suministrados por el autor:

El efecto visual (configurable a través de la piel / CSS), entonces, a diferencia de los demás, es ciertamente más atractiva. Los atributos utilizados son sólo el rel donde, en su interior, encontrar un espacio todos los parámetros de configuración. Por ejemplo, para crear una galería, simplemente usa:

Texto sin formato
HTML:
  1. "beach.jpg" rel = "shadowbox[Vacation]" > The Beach </a> href <a = "beach.jpg" rel = "shadowbox[Vacation]"> La Playa </ a>
  2. "pier.jpg" rel = "shadowbox[Vacation]" > The Pier </a> href <a = "pier.jpg" rel = "shadowbox[Vacation]"> El Muelle </ a>

Si desea configurar algunas opciones (véase el sitio web para la lista completa), sólo tiene que utilizar la siguiente sintaxis:

Texto sin formato
HTML:
  1. "myimage.jpg" rel = "shadowbox;options={overlayOpacity: 0.5, resize: false}" > My Image </a> href <a = "myimage.jpg" rel = "shadowbox;options={overlayOpacity: 0.5, resize: false}"> Mi imagen </ a>

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

Calificación: 9 - Top Shadowbox 1.0B

Post relacionados

Fue útil esta información?: Per nientePocoAbbastanzaMoltoMoltissimo
Loading ... Cargando ...

Etiquetas:

14 comentarios a "Luz de Bibliotecas: Slimbox por un Shadowbox, galerías en Javascript"

  1. getAvatar 1,0
    22 de abril 2008 Stefmar84:

    Excelente colección!
    muy útil y bien detallado.
    Felicidades

    Responder Compartir
  2. getAvatar 1,0
    26 de abril 2008 Lucio:

    ¡Bravo!
    Clara y útil.

    Responder Compartir
  3. getAvatar 1,0
    21 de octubre 2008 Cristian:

    Estoy tratando de usar Shadowbox para reemplazar la mesa de luz 2, que en mi Joomla 1.0.15 de 'los problemas con Internet Explo (d) er, pero desgraciadamente sin éxito.

    Ciertamente no entiendo algo. El sitio web habla de dos módulos, y slimbox.js Slimbox-Core.js, pero la construcción que genera sólo una que no funciona. He intentado tanto una independiente para Mootools (que me he descargado y activado, por supuesto), pero el resultado no cambia.

    ¿Puede dar algún apoyo, por favor?

    Responder Compartir
  4. getAvatar 1,0
    21 de octubre 2008 Giovambattista Fazioli:

    @ Cristian: ¿por qué hablar de los módulos y slimbox.js Slimbox-Core.js? Que yo sepa, son Shadowbox ...

    Responder Compartir
  5. getAvatar 1,0
    21 de octubre 2008 Cristian:

    @ Giovambattista Fazioli: eh, y fue un desliz. Es evidente que tiene como objetivo Shadowbox :)

    Responder Compartir
  6. getAvatar 1,0
    21 de octubre 2008 Giovambattista Fazioli:

    @ Cristian: ¿qué código se utilizan? Shadowbox para trabajar necesita dos tipos de inicialización. Eso no es suficiente con incluir el guión y, como con otras bibliotecas similares. Ponme el código que ves todo lo que está mal ...

    Responder Compartir
  7. getAvatar 1,0
    22 de octubre 2008 Cristian:

    Aquí está la información que usted me pregunta :)
    En el sitio de Shadowbox, en la sección Descargas, traté de hacer es construir la versión independiente de que para Mootools. Mootools fue claramente instalado y cargado.
    El procedimiento me construye una sesión * sólo * archivo, shadowbox.js, que he cargado en la cabecera de la página con:

    Texto sin formato
    HTML:
    1. "text/javascript" src = "http://www.miosito/templates/sogema_theme/js/shadowbox.js" >< / script> <script "text/javascript" type = src = "http://www.miosito/templates/sogema_theme/js/shadowbox.js"> </ script>

    No funciona (
    He intentado también para cargar una piel hipotética (que cmq non ho, fue sólo para darle una oportunidad ...) con

    Texto sin formato
    HTML:
    1. "text/javascript" > Shadowbox.loadSkin('classic', 'http://miosito/templates/sogema_theme/js/skin') </script> Tipo de <script = "text/javascript"> Shadowbox.loadSkin ( 'classic', 'http://miosito/templates/sogema_theme/js/skin') </ script>

    Pero, de nuevo sin suerte.

    Otros lo han hecho, y de hecho no funciona :)

    Responder Compartir
  8. getAvatar 1,0
    22 de octubre 2008 Giovambattista Fazioli:

    @ Cristian: ok, lo que falta - creo - es inicializar la biblioteca. Todos los pasos que los hechos son sustancialmente correcta. Usted tiene que hacer es llamar a este código cuando se carga la página:

    Texto sin formato
    JavaScript:
    1. ; Shadowbox. Init ();

    Usted puede colocar el proceso de carga de página o explotar document.ready () frameword su preferencia:

    Texto sin formato
    HTML:
    1. "Shadowbox.init()" > onload <body = "Shadowbox.init()">

    Además, si usted elige utilizar con mootools Shoadowbox, por ejemplo, también debe cargar el adaptador en el siguiente orden:

    Texto sin formato
    HTML:
    1. <! - En primer lugar debe cargar la biblioteca: mootools, prototype, jQuery, ec ... ->
    2. "text/javascript" src = "mootools.js" >< / script> <script "text/javascript" type = src = "mootools.js"> </ script>
    3. <! - Entonces, el adaptador ->
    4. "text/javascript" src = "shadowbox-mootools.js" >< / script> <script "text/javascript" type = src = "shadowbox-mootools.js"> </ script>
    5. <! - Y finalmente Shadowbox ->
    6. "text/javascript" src = "shadowbox.js" >< / script> <script "text/javascript" type = src = "shadowbox.js"> </ script>

    Responder Compartir
  9. getAvatar 1,0
    22 de octubre 2008 Cristian:

    @ Giovambattista Fazioli: algo que todavía se me escapa. Lo primero que no sé dónde encontrar el adaptador. Hacer la construcción del sitio que recibe un único archivo, que me imagino es la correcta Shadowbox. Pero esto no es "un gran problema, porque" yo también podría utilizar el independiente (y luego no entiendo por qué 'para crear un adaptador si las funciones son accesibles también de independientes).

    En vez de ser "virgen" en términos de Java pido una última cosa: yo inicializar el código de incrustación de Shadowwbox.init () dentro de un <script type=javascript> etc? Que puedo hacer, a la derecha en la cabecera de la página para asegurarse de que se carga en cada página?

    Responder Compartir
  10. getAvatar 1,0
    22 de octubre 2008 Cristian:

    He hecho algunos cambios, cargar archivos que he obtenido haciendo clic en el botón "Descargar" Código en la sección de Descargas del sitio. Pero aún funciona :)

    Texto sin formato
    HTML:
    1. <! - Shadowbox ->
    2. "text/javascript" src = "http://miosito/sogema_theme/js/shadowbox-base.js" >< / script> <script "text/javascript" type = src = "http://miosito/sogema_theme/js/shadowbox-base.js"> </ script>
    3. "text/javascript" src = "http://miosito/templates/sogema_theme/js/shadowbox.js" >< / script> <script "text/javascript" type = src = "http://miosito/templates/sogema_theme/js/shadowbox.js"> </ script>
    4. "text/javascript" > Tipo de <script = "text/javascript">
    5. Shadowbox.loadLanguage ( 'en', 'http://miosito/templates/sogema_theme/js/lang');
    6. window.onload = Shadowbox.init;

    Responder Compartir
  11. getAvatar 1,0
    22 de octubre 2008 Giovambattista Fazioli:

    @ Cristian: tranquilo, desde este punto de vista Shoadowbox no es muy intuitivo! : D Sin embargo, primero tienes que descargar el paquete completo que siempre está en la página de descarga: por debajo de dos enlaces: Descargar completo, para descargar el paquete incluye ejemplos, documentación y descargas de código y adaptadores, que contiene los códigos, los adaptadores y pieles . Download it.
    Además, creo que intedessi "virgen" de JavaScript y Java, que son dos cosas "suficiente" diferente : D
    Luego, cuando se utiliza un código JavaScript en una página HTML, siempre debe encerrar en

    Responder Compartir
  12. getAvatar 1,0
    22 de octubre 2008 Cristian:

    ¡Uy, el código que he publicado es «un error en la ruta de acceso trascrittura. Caminos que están claramente establecidas en el mismo sitio

    Responder Compartir
  13. getAvatar 1,0
    05 de febrero 2009, Federico

    Hola a todos,
    Me di cuenta de que todos estos métodos para la visualización de imágenes / pages / flash, etc .. no funciona con Internet Explorer 8 Beta.
    Espero que sea sólo un problema de la versión pre-lanzamiento de este mítico navegador.
    Este comportamiento se ve a él también?
    Gracias
    Fe

    Responder Compartir
  14. getAvatar 1,0
    15 de febrero 2009 Gianni

    Hola a todos,

    He descargado el paquete de Shadowbox, pero ya que ignora el código Javascript
    No tengo idea de cómo ejecutarlo en una página HTML.

    ¿Debo incluir enlaces a la página nell'head js que se encuentran en los paquetes. Pero, ¿qué archivos exactamente? Y ¿cómo puedo inicializar la biblioteca?

    Alguien puede mostrar el código que debo utilizar?

    Gracias, gracias, gracias.

    Responder Compartir

Deja tu comentario

TAG XHTML RESTRICCIONES: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> código de inserción: 
 <pre></pre>         // blocco generico [code][/code]       // blocco generico [as][/as]           // Actionscript [css][/css]         // CSS Style Sheet [html][/html]       // HTML [js][/js]           // Javascript [objc][/objc]       // Objective-C [php][/php]         // PHP [sql][/sql]         // SQL