WebCssDesign

jPhotoGrid galerie jQuery Zoomable

• Accueil
• Ajax
• jPhotoGrid galerie jQuery Zoomable

Si vous avez besoin d’une petite galerie jQuery avec effet zoom alors voici jPhotoGrid

jPhotoGrid permet avec une simple liste d’images et descriptions de faire une grille de photos zoomable d’un bel effet.

Pratiquement réalisé à l’aide du CSS, en utilisant la propriété float sur les éléments.

#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; }
Présentation de la liste des images avec description
<ul>
        <li>
		<img src="source.jpg" alt="image" />
		<p>Description</p>
	</li>
	...
<ul>

Pour finir le javascript utilise la fonction animate() de jQuery sur deux objets CSS pour ouvrir et fermé le zoom.

Le plugin a besoin de connaitre la taille des miniatures ainsi que la taille et la position de l’image zoomée.

$('#pg').jphotogrid({
	baseCSS: {
		width: '175px',
		height: '117px',
		padding: '0px'
	},
	selectedCSS: {
		top: '50px',
		left: '100px',
		width: '500px',
		height: '360px',
		padding: '10px'
	}
	});

Nécessit bien sûr jQuery
Installation et démo : http://www.newmediacampaigns.com/
Licence: MIT