jQuery plugin Space Gallery

Voici un nouveau du nom de Space .  Comme son nom l’indiques il permet de présenter des galeries d’images en perspective.

Intégration: (dans la partie head)

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/eye.js"></script>
<script type="text/javascript" src="js/utils.js"></script>
<script type="text/javascript" src="js/spacegallery.js"></script>
<script type="application/javascript">(function($){
	var initLayout = function() {
		$('#myGallery').spacegallery({loadingClass: 'loading'});
	};
	EYE.register(initLayout, 'init');
})(jQuery)</script>

Pour le CSS :

.spacegallery {
 position: relative;
 overflow: hidden;
}
.spacegallery img {
 position: absolute;
 left: 50%;
}
.spacegallery a {
 position: absolute;
 z-index: 1000;
 display: block;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background: url(images/blank.gif);
}
#myGallery {
 width: 100%;
 height: 300px;
}
#myGallery img {
 border: 2px solid #52697E;
}
a.loading {
 background: #fff url(../images/ajax_small.gif) no-repeat center;
}

et dans la partie body

<div id="myGallery" class="spacegallery">
   <img src="images/img1.jpg" alt="" />
   <img src="images/img2.jpg" alt="" />
   <img src="images/img3" alt="" />
   <img src="images/img4.jpg" alt="" />
</div>


Le script est bien sur à adapter mais intéressant.
Page du plugin avec démo et téléchargement: http://www.eyecon.ro/spacegallery/

A voir aussi

  • http://bike-stunt.com/tuning Mike Leonard

    Salut, pas de CSS dans ton explication , nul part tu n’as aligné ces 3 lettres, alors comment cela peut-il fonctionner, Help car en te suivant, je ne peux le faire fonctionner. Merci ;)

  • Admin

    Effectivement le CSS est dans la démo à télécharger, je le rajouterais au post

  • http://aidelettre.free.fr/index.html Mrhifi

    bonjour,
    très bien ce tuto,
    avec des images qui ont le meme fond que le background ca peut aussi faire un effet sympa, par contre surtout avec une auto rotation… auriez des pistes pour m’aider a mettre en place une autorisation de spacegallery ?

Réseau

Sites