En Development Blog publicaron una galería de imágenes con efecto zoom. Está esa implementada con el plugin jQuery jPhotoGrid y el resultado final es un vistoso efecto que es muy sencillo de implementar.
Implementación
El código HTML que muestra las imágenes en miniatura es un lista con una estructura como la del siguiente ejemplo:
<ul> <li> <img src="source.jpg" alt="" /> <p>Caption Here</p> </li> <ul>
Luego se necesitamos unos estilos en CSS como los siguientes:
#pg { position: relative; height: 585px; background: #000; }
#pg li { position: relative; list-style: none; width: 175px; height: 117px; overflow: hidden; float: left; z-index: 2; opacity: .3; }
#pg li.active { opacity: 1; }
#pg li.selected { opacity: 1; z-index: 99; -moz-box-shadow: 0px 0px 10px #fff; -webkit-box-shadow: 0px 0px 10px #fff; }
#pg li img { display: block; width: 100%; }
#pg li p { color: white; margin: 10px 0; font-size: 12px; }Por último, un código Javascript:
$('#pg').jphotogrid({
baseCSS: {
width: '175px',
height: '117px',
padding: '0px'
},
selectedCSS: {
top: '50px',
left: '100px',
width: '500px',
height: '360px',
padding: '10px'
}
});Además necesitamos enlazar los siguientes archivos en la sección HEAD del HTML de la página:
<link href="style.css" rel="stylesheet" type="text/css" media="all" /> <link href="jphotogrid.css" rel="stylesheet" type="text/css" media="screen" /> <!--[if IE]> <link href="jphotogrid.ie.css" rel="stylesheet" type="text/css" media="screen" /> <![endif]--> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script src="jphotogrid.js"></script> <script src="jflickrfeed.js"></script> <script src="setup.js"></script>
Conclusión
La implementación de jPhotoGrid Plugin jQuery es muy sencilla, en el tutorial (en inglés), están los enlaces para una demostración online y también, para descargar un ejemplo funcional que se puede correr sin necesidad de montarlo en un servidor web.
jPhotoGrid Plugin jQuery
Visitar: www.newmediacampaigns.com/page/zoomable-jquery-image-gallery-jphotogrid
