août/091
[jQuery] Le plugin « Spacegallery »
Spacegallery
Juste un petit billet en coup de vent pour vous faire partager un plugin jQuery que je viens de découvrir. Il s'agit de "Spacegallery".
L'effet semble simple, le plugin aussi, mais il faut bien avouer que ca rend plutôt pas mal. Voyez par vous même la petite démo ici.
Les images sont présentées avec un jolie effet "fade-out".
Le plugin est disponible en téléchargement ici, avec le script JS, le CSS, des images, et des pages d'exemples.
Pour l'utiliser :
Implémentation (dans le "head") dans cet ordre :
[sourcecode language="html"]
<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>
[/sourcecode]
L'invocation, pour ca, il faut avant tout créer l'événement en js dans lequel la ligne suivant doit apparaître :
[sourcecode language="js"]
$('#myGallery').spacegallery({loadingClass: 'loading'});
[/sourcecode]
Mon événement :
[sourcecode language="html"]
$(document).ready( function ()
{
$('#myGallery').spacegallery({loadingClass: 'loading'});
});
[/sourcecode]
Les différentes options :
border
duration
perspective
minScale
loadingClass
before
after function
Exemple :
[sourcecode language="html"]
$(document).ready( function ()
{
$('#myGallery').spacegallery({loadingClass: 'loading', perspective:'300'});
});
[/sourcecode]
Il faut créer une div dans laquelle on mettra les images pour la galerie.
Bon, un exemple serait le mieux je pense :
(le css est direct dans la page pour une meilleur compréhension)
[sourcecode language="html"]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<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="text/javascript">
$(document).ready( function ()
{
$('#myGallery').spacegallery({loadingClass: 'loading', perspective:'300'});
});
</script>
<style>
.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);
}
/* bloc contenant la galerie */
#myGallery {
width: 800px;
height: 650px;
}
#myGallery img {
border: 2px solid #52697E;
}
a.loading {
background: #fff url(./images/ajax_small.gif) no-repeat center;
}
</style>
</head>
<body>
<!-- Le bloc div dans lequel on va mettre toutes les photos !-->
<div id="myGallery" class="spacegallery">
<img src="images/bw3.jpg" alt="" />
<img src="images/lights3.jpg" alt="" />
<img src="images/bw2.jpg" alt="" />
<img src="images/lights2.jpg" alt="" />
<img src="images/bw1.jpg" alt="" />
<img src="images/lights1.jpg" alt="" />
</div>
</body>
</html>
[/sourcecode]
Bonne Prog !
@+
Content de cet article?
Aucun trackbacks pour l'instant
If you think there's a maniacal psycho-geek in the
basement:
1) Don't give him a chance to hit you on the
head with an axe!
2) Flee the premises... even if you're in your
underwear.
3) Warn the neighbors and call the police.
But whatever else you do... DON'T GO DOWN IN THE DAMN BASEMENT!"
-- Saturday Night Live meets Friday the 13th
14 septembre 2009
un grannnd merci pour le détail d’implement! je restais bloquer sans ça!