Zoomy.js otra atractiva para generar lightbox. Pesa tan solo 4k y depende de Prototype Javascript Framework y Scriptaculous (effect.js , dragdrop.js) para funcionar. El efecto realizado por Zoomy.js es el de los tradicionales lightbox, hacer un zoom al dar click sobre las imágenes, solo que con la ventaja que al cargar las imágenes de antemano, no hay retraso cuando se produce el Zoom. Además de forma opcional podremos mostrar un titulo o añadir la opción de cerrar las ventanas de forma manual.
Ver Mi demo - Descarga Demo - Web Oficial Zoomy - Fuente Anieto2k
Opciones :
- ppearDuration: Permite determinar cuantos segundos deseamos estén muestras ventanas abiertas una vez realizado el zoom. (valor por defecto: 0,5 segundos).
- closeButton: Mostrar o no el botón cerrar (valor por defecto: false).
- draggable: Arrastrar y mostrar el botón Cerrar (valor por defecto: false).
- hideCaption: (default value: false).
Uso
<script src="dragdrop.js" type="text/javascript"></script>
<script src="effects.js" type="text/javascript"></script>
<script src="scriptaculous.js" type="text/javascript"></script>
<script src="zoomy.js" type="text/javascript"></script>
<script type="text/javascript">
Event.observe(window,"load",function() {
$$("ul.zoomy a").each(function(element){
new Zoomy(element, { hideCaption: true });
});
$$("ul.zoomy2 a").each(function(element){
new Zoomy(element, { draggable: true });
});
});
</script>
Un poco de CSS
.zoomy li, .zoomy2 li { list-style:none; float:left; display:inline; margin-right:5px; margin-bottom:5px; width:150px; height:100px; }
.zoomy a, .zoomy2 a {outline:none; border:2px solid #372919; text-decoration:none; background-position:left top; text-indent:-9999px; display:block; width:150px; height:100px; }
#zoomy { position:absolute; border:1px solid #B3BEAD; background:#000000; padding:5px; color:#fff; line-height:100%; }
#zoomy p { margin:0; padding:5px 5px 10px 5px; position:relative; }
#close { position:absolute; right:5px; width:12px; height:12px; background:url(close.gif) no-repeat; cursor:pointer;}
contenido
<ul class="zoomy">
<li><a href="#" style="background-image: url(fotito.jpg)" title="Demo Website Xyberneticos">Xyberneticos</a></li>
<li><a href="#" style="background-image: url(fotito.jpg)" title="Demo Website Xyberneticos">Xyberneticos</a></li>
<li><a href="#" style="background-image: url(fotito.jpg)" ttitle="Demo Website Xyberneticos">Xyberneticos</a></li>
<li><a href="#" style="background-image: url(fotito.jpg)" title="Demo Website Xyberneticos">Xyberneticos</a></li>
</ul>
<h3>Efecto Zoomy Draggable</h3>
<ul class="zoomy2">
<li><a href="http://www.xyberneticos.com/" style="background-image: url(fotito.jpg)" title="Demo Website">Xyberneticos</a></li>
<li><a href="http://www.xyberneticos.com/" style="background-image: url(fotito.jpg)" title="Demo Website">Xyberneticos</a></li>
<li><a href="http://www.xyberneticos.com/" style="background-image: url(fotito.jpg)" title="Demo Website">Xyberneticos</a></li>
<li><a href="http://www.xyberneticos.com/" style="background-image: url(fotito.jpg)" title="Demo Website">Xyberneticos</a></li>
</ul>
Loading ...
hackmlx
03-11-2008
Permalink
hey muchas garcias por esto pero una pregunta.."
como hago para ke salga en el medio"
jairo
03-11-2008
Permalink
Muchas gracias pero lo que decia el anterior compañero es verdad. Como lo pongo en el medio?
Antony
03-11-2008
Permalink
Yo he usado LigthBox, pero este me parece un poco más liviano... Saludos!
Ruy (Don Tutula)
03-11-2008
Permalink
Muy interesante cuando mire el post lo confundí con el efecto que se logra con
zoomi el cual conocí por esta misma pagina. Me parece muy interesante este efecto Zoomy voy hacer un par de pruebas a ver q tal nos funciona..
Gracias como siempre muy buenos aportes aqui en xyberneticos
web69.es “La actualidad del web 2.0″ » Blog Archive » Zoomy.js - Otra alternativa para generar tus lightbox
03-11-2008
Permalink
[...] Fuente y más información en: http://xyberneticos.com/ [...]