:: CP - Recursos Web ::

Zoom Slide

Zoom Slice

EJEMPLO

Por un tema de una mejor visualización del ejemplo, este será en una pagina externa a esta. La cual es administrada exclusivamente por nosotros.

CLICK AQUI PARA VER EJEMPLO

[ SABER MÁS DE ESTO? ]

INFORMACIÓN

Nombre: Zoom Slice

Fecha: 2012-11-02

Creditos: Desconocido

Tipo de recurso: JQuery

Garantia: Si?

Descripción:

Zoom Slice es una fantástica forma de exhibir tus imágenes, el usuario solo dará click en la imagen y ella se ampliara para poder verla de mejor forma y muy bien presentada.

- Codigo 01: Por encima de la pagina o extra "HEAD"

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" ></script>
<script>$(function(){
var enl=$('[galeria]');
var fnd=$('div#fondoGaleria');
enl.click(function(e){var gl=$(this).attr('galeria');abreF();abreI();
if(this.tagName=='A'){e.preventDefault();if(gl==""){cargaImagen(this.href);return;}}
else if(this.tagName=='IMG'){if(gl==""){cargaImagen(this.src);return;}}
cargaImagen(gl);});
function cargaImagen(src){ var img=new Image();img.src=src;
$('div#centraGaleria img').attr('src',src);
img.onload=function(){
if(window.innerHeight>img.height){ $('div#centraGaleria').css({'top':(window.innerHeight/2-(img.height/2)),'position':'fixed'});}else{$('div#centraGaleria').css({'top':'0px','position':'absolute'});}
$('div#centraGaleria img').animate({'width':img.width,'height':img.height},300);}}
$('div#centraGaleria img').error(function(){cierraF();cierraI();});
function abreI(){$('div#centraGaleria').css('display','block');}
function cierraI(){ $('div#centraGaleria img').animate({'width':'80px','height':'80px'},300,function(){$('div#centraGaleria').css({'display':'none','top':'34%'});});}
$('div#fondoGaleria,div#centraGaleria').click(function(){cierraF();cierraI();}).mouseover(function(){window.status="Click para cerrar";});
function abreF(){fnd.css('display','block').animate({'opacity':1},300);}
function cierraF(){fnd.animate({'opacity':0},300,function(){$(this).css('display','none');});}
});</script>
<div id="fondoGaleria" title="Click para cerrar" style="display:none;opacity:0;z-index:99;background:rgba(10, 6, 6, 0.7216);position:fixed;top:0px;left:0px;width:300%;height:300%;"></div>

Copiar codigo

- Codigo 02: Donde quieras que aparezca

Copiar codigo

ENLAZANOS

URL DIRECTA

LINK'S HTML

URL CORTA

Descarga

Ahora puedes descargar nuestros recursos, (No en todos los recursos esta disponible esta opcion, disfrutalo)

Descarga no disponible

[ CLICK PARA VER TUTORIAL ]

NOTAS:
Puedes agregar todas las imágenes que quieras solo repitiendo el segundo código.
- Este código lleva en la segunda linea lleva JQUERY integrado, si ya tienes es código en tu web, no es necesario colocarlo nuevamente.
- Para cualquier consulta visita nuestro Foro de soporte.

Ya lo han visto 208 visitantesGracias por tu visita!

Recomendamos:

| CERRAR