jQuery plugin Space Gallery

Voici un nouveau plugin jQuery du nom de Space Gallery.  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/
3 commentaires
  1. Mike Leonard 9 années ago

    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 😉

  2. Auteur
    Admin 9 années ago

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

  3. Mrhifi 7 années ago

    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épondre

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

*

17 − 5 =

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

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 ?