zoomy.jpg

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

PLAIN TEXT
JavaScript:
<script src="prototype.js" type="text/javascript"></script>
<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

PLAIN TEXT
CSS:
.zoomy, .zoomy2 { float:left; width:100%; }
.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

PLAIN TEXT
HTML:
<h3>Efecto Zoomy Simple</h3> 

<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>