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

Aucun commentaire

Répondre

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

*

deux × 2 =

CONTACT

We're not around right now. But you can send us an email and we'll get back to you, asap.

Envoi en cours...

©[current-year] WebCSSDesign

Se connecter

Oubli de mot de passe ?