Shadowbox con JQuery

A pesar de que me gustaba bastante utilizar lightbox, un plugin de JQuery eh de reconocer que desde que descubri Shadowbox en el blog de aNieto2k eh cambiado a utilizar Shadowbox para todo, desde las galerias de imagenes hasta para reproducir video flash, el uso de Shadowbox es extremadamente sencillo, basca con cargar los js y un css se puede utilizar en tantas cosas como uno quiera, desde mostrar imagenes, como mostrar video flash, Quicktime, Windows Media Player, ningun otro “box” tiene tanta facilidad de uso.

Aquí les enseño un pequeño tutorial para su uso con JQuery

Primero cargamos los archivos de Shadowbox

<link type="text/css" rel="stylesheet" href=".shadowbox.css"/>
<script type="text/javascript" src="jquery_con.js"></script>
<script type="text/javascript" src="shadowbox.js"></script>

Despues de cargar los archivos hay que activar shadowbox

<script type="text/javascript">
$(document).ready(function() {
var option = {
var option = {
resizeLgImages: true,
displayNav: true,
handleUnsupported : 'remove',
keysClose: ['c', 27]
};

Shadowbox.init(option);
});
</script>

Hay que tomar en cuenta la variable option el cual tiene varios parametros para configurar shadowbox, los parametro completos puedes checarlos aquí

Ahora simplemente tienes que indicarle a shadowbox que elementos son los que se mostraran en el box.

Para una imagen

<a href="imagen.jpg" title="imagen de muestra" rel="shadowbox"><img src="imagen.jpg" border="0" alt=""></a>

Para un video de YouTube

<a href="http://www.youtube.com/v/wbzLpteC8ng&autoplay=1" title="David Beckham" class="option" rel="shadowbox;width=405;height=340">YouTube</a>

Asi de sencillo funciona Shadowbox, simpremente agregando el tag rel=”shadowbox” uno puede indicar que elemento funcionará con shadowbox.

[Pagina oficial]

About these ads

11 comentarios to “Shadowbox con JQuery”

  1. Supirole Says:

    Hola, yo tmb estoy usando Shadow box, pero tengo un problea tal vez me puedas ayudar.

    Quiero que el shadow box abra una imagen en cuanto cargue la pàgina…. tienes idea de como hacerlo?

  2. LordNemutagk Says:

    Que tal Supirole, al parecer Shadobox no está preparado para manejar eventos, sin embargo, tendrías que desarrollar una función que al cargar la pagina se lanzara un evento para abrir la ventana, ahora, sin embargo, no se cual es la necesidad de hacer esto, pero estas cayendo en los mismos problemas que en su momento causaron los pop-up, los cuales son que se ejecuta sin autorización del navegante y sobre todo, que le oculta la información del sitio, pienso yo, que antes de pensar en una solución antes de pretender “meter” ese evento a la fuerza al navegante….

  3. Prado Says:

    Hola.

    Estoy intentando que el shadowbox me funcione llamándolo desde un mapa de imágenes, desde un área, igual que ne el ejemplo del a web oficial, pero no lo consigo. No sé qué me falla. ¿Podrías, si lo sabes, facilitarme las instrucciones exactas o el código de un ejemplo que tú hayas hecho?
    Y otra pregunta: puede ser ya? es que me urge mucho mucho muuuuuucho 0:)
    Muchísimas gracias de antemano.

  4. ChampiVolador Says:

    Hola que tal, yo uso lightbox, pero quisiera utilizar shadow box unica y exclusivamente para mostrar swf. El lightbox sería solo para jpg y el shadowbox solo para swf. ¿sepuede hacer esto?.
    Muchisimas gracias de antemano.

  5. LordNemutagk Says:

    que tal ChampiVolador, la verdad es que no he utilizado lightbox, y desde que comence a utilizar shadowbox no eh buscado siquiera algun nuevo script ya que a mi parecer es muuy completo, posiblemente si puedas utilizar los dos… pero creo que eso no es lo mejor el utilizar 2 scrips simplemente para utilizar uno con imagenes y otro con swf siendo que por ejemplo shadowbox funciona perfectamente con los dos (no tengo idea si el ligthbox sea igual), mas que nada para evitar que se tengan que descargar 2 scripts. y asi ahorarte unos cuantos kilobytes y tiempo en cargar tu pagina

  6. ChampiVolador Says:

    Hola LordNemutagk, muchas gracias por tu aclaración, la verdad es que pienso igual que tu sobre lo de utilizar solo shadowbox pq es un scrip muy completo (mucho mas que light box), el problema que tengo es el siguiente, hemos desarrollado un CMS para crear webs de una manera sencilla, rapida y fiable que se denomina Blobic (tipo joomla, wordpress y similares) (http://www.blobic.com) , lo actualizamos y depuramos periodicamente, por lo que la herramienta está en una fase muy muy avanzada.
    Esta herramienta incorpora de “serie”un script unico para visualizar imagenes (lightBox), lo más facil sería cambiar el script lightbox por el shadowbox, pero tambén se nos cambiaría la manera de visualizar imagenes en las más de 300 webs y portales que hemos creado de momento, puesto que de momento solo existe esta posibilidad.
    Mi investigación en este problema recae en mi web personal (http://www.sergiomontesinos.com), la cual está creada con blobic (tardé 10 minutos en hacerla), y estoy buscando la manera de intentar desactivar solo para mi web el script de lightbox, y cargar soloel de shadowbox, o por el contrario, utilizar los dos como he comentado antes, uno para las imagenes y otro para los swf. De momento estoy rompiendome el coco y no le veo solución, ¿que solución me recomendais desde aquí? ya que no soy programador, si no diseñador gráfico.

    Muchas gracias de antemano, cualquier sugerencia será adoptada como agua de mayo.

  7. LordNemutagk Says:

    Que tal ChampiVolador

    Bueno, antes que nada, el desarrollo de un CMS tal cual debe ser antes que nada considerado para la manipulacion de codigo modular, asi como la creación de “mods” o plugins para dicho CMS, si tu problema es que el sistema es cerrado (necesitas tocar muchos archivos solo para cambiar lightbox por shadowbox) creo que el problema que les presentara mas adelante el desarrollo del CMS va a ser grande, y poco apoyado por la creación de herramientas para su CMS, ahora si tu problema es como comentas, de que no eres programador si no diseñador grafico, tal ves es hora de que en tu grupo de desarrollo platiquen el problema que se te esta presentando, no se si su CMS va a ser de código cerrado para su posterior venta, o de código abierto para su distribución lubre y/o gratuita, lo que si es que deben afrontar antes que nada esta situacion para hacer aun mas amigable su CMS

  8. antonio Says:

    Hola a todos.
    He probado el Shadowbox y me parece bueno, pero tengo una duda sobre el tamaño o las dimensiones del box.
    Para abrir un box que contenga html hay que señalar sus dimensiones en el atributo rel de la siguiente manera:

    rel=”shadowbox;width=600;height=400″

    Mi pregunta es la siguiente: ¿Es posible indicar este parámetros en otro lugar que no sea en el atributo rel?

    Muchas gracias

  9. david Says:

    Buenas quiesiera un tip quiero usar el shadowbox yademas usar la funcion :
    jQuery.ajax({ ***** })

    obviamente de jquery pero cuando hago eso la paginaq carga le quiero dar el mismo efecto.. del shadow box le pego el mismo codigo q se pone en el lugar de las imagenes y no me carga.. estasegunda ves…

    PD: La unika libreria de galeriasq me funciona de esa manera es el lightbox pero te carga scriptaculus , prototype , lightbox y tdo eso me pesa como 150 kb.. algun consejo para q funcione entonces??

    Pd2 : e probado con greybox , lightwindows, y unas mas q no recuerdo ..grrr.

  10. JC Says:

    Hola tengo una duda con shadow box, lo he utilizado como plugin de worpress, para visualizar imagenes es super automatico y tambien lo es para galerias, pero no puedo visualizar un html de manera automatica, shadow box puede visualizar una pagina web e inclusive con medidas ya antes lo he hecho pero editando el codigo en html, pero desearia encontrar la manera de que haga lo mismo en wordpress de forma automatica o con simplemente llenar uno de los formularios del administrador, si alguien sabe como lograr esto se lo agradecere de verdad, o tambien si conocen de otra aplicacion que pueda hacer algo parecido a lo de shadow box pero de una vez en wordpress, pues quienes actualizan el sitio que realizo no conocen el codigo y necesitan que sea lo mas sencillo posible.

    Gracias de antemano.

    http://jc-w-d-sign.deviantart.com/

  11. sermillonario Says:

    shadowbox es mas completo que lightbox,,, en shadowbox se pueden de casi todo y el lightbox solo fotos..

    Saludos..


Deja un comentario

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

Seguir

Recibe cada nueva publicación en tu buzón de correo electrónico.

%d personas les gusta esto: