Avant toute chose je vais présenter le package proposé en téléchargement (TELECHARGER ICI)
L'archive contient 3 dossiers :
  • /elems/ qui contient une CSS et une image... (pour les exemples)
  • /example/ qui contient les fichiers d'exemple en HTML + un repertoire photo
  • /lib/ qui contient les librairies !
Oublions un instant les 2 premiers repertoire et concentrons nous sur /lib/ Le repertoire /lib/ contient 4 fichiers :
  • simple.js qui est la base nécessaire au fonctionnement de tous les effets, il permet a lui seul de générer pas mal d'effets !!!
  • simpleslish.js, c'est un pluggin, c'est a dire un fichier supplémentaire qui s'associe avec simpleJS pour faire fonctionner une galerie photos
  • simpleajax.js, un autre pluggin dont je connais pas encore l'utilité (:s)
  • simpleacco.js, le pluggin qui permet de gérer les effets de slide
Voila! Le tour du package est fini... A bientôt !

Hey non je plaisante, :p je vais quand même vous montrer des exemple (^^)

Je vais commencer par expliquer comment ca marche:
Pour les effets de base on appel le fichiers de base uniquement, pour les effets supplementaire, on appel les fichiers pluggin correspondant...
Pour ne pas se compliquer la vie (le but ici et de voir comment ca marche et non pas comment on l'optimise) on va appeler tous les fichiers...
Mettez le code suivant entre <head> et </head>

<script src="js/simple.js" type="text/javascript"></script>
<script src="js/simpleslish.js" type="text/javascript"></script>
<script src="js/simpleacco.js" type="text/javascript"></script>

Notez que mes fichiers sont placé dans un dossier nommé /js/ !!

Et on attaque par les effets de base ...


Une fois les fichiers .js ajouter a l'entente de votre site, il ne vous reste plus qu'a ajouter l'attribut : onclick avec son paramètre par exemple :
  • onclick="$pulsate(this.id,5,400); return false"
  • onclick="$opacity(this.id, 100, 20, 600); return false"
<div id="hlel_1" class="hihltest" onclick="$pulsate(this.id,5,400); return false">$pulsate</div>


<div id="hlel_2" class="hihltest" onclick="$opacity(this.id, 100, 20, 600); return false">$opacity</div>

<div id="hlel_3" class="hihltest" style="filter:Alpha(opacity=1,finishopacity=0,style=2);


 -moz-opacity:100; opacity:100;" onclick="$shiftOpacity(this.id,400); return false">$shiftOpacity</div>
  
<div id="hlel_4" class="hihltest" onclick="$highlight(this.id); return false">$highlight</div>


<div id="hlel_5" class="hihltest" onclick="$textColor(this.id, '#00FF66','#666666',700); return false">


$textColor</div>
<div id="hlel_6" class="hihltest" onclick="$morphColor(this.id, '#FFFFFF', '#666666', '#FF6600', '#FFFFFF',


 '#FFCC00', '#CCCCCC', 600);


 return false">$morphColor</div>



Pour plus de facilité consultez la démo et affichez la source (CTRL+U sous firefox ou affichage> source sous IE )

Visualisez la démo des effet de base
Voyons ensuite les effets de slide (accordéon)

Commencez par initialiser les éléments qui seront concerné par les effets

Exemple :
<script>
$AccoInit('acco0;acco1;acco2;acco3;');
</script>



Puis insérez l'effet :

Par exemple :
onclick="$accopush(0); return false"     ou 
onclick="$accopush(0,true); return false"

En ajoutant true l'effet change
<a href="#" onclick="$accopush(0); return false">$accopush(0)</a> or <a href="#" onclick="$accopush(0,true); 


return false">$accopush(0,true)</a></div>
<div id="acco0" class="accotexte">


<div class="myborder">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec adipiscing fermentum mi. 


Vestibulum volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; 


Proin massa enim, sollicitudin et, adipiscing a, lobortis vel, nisi. Donec ut dolor. Nullam vel orci. 


Nam sem sem, rhoncus sit amet, faucibus et, venenatis vel, ligula. Vestibulum ante 


ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse 


potenti. Etiam tincidunt enim in tellus. Integer in felis. Cras vestibulum, ante in adipiscing tempor, 


tortor nisi gravida purus, varius convallis tellus sem eget ante. Aenean sit amet urna non nisl sagittis 


condimentum. Maecenas non nunc non felis elementum consequat. Donec et felis.</div>




Visualisez la démo des effet d'accordéons
Pour plus de facilité consultez la démo et affichez la source (CTRL+U sous firefox ou affichage> source sous IE )


Il ne reste plus que la galerie photos a essayer (^^)

La encore il va falloir initialiser  la fonction, comme tout a l'heure en listant les photo (atention aux adresses !!! Si les photos se trouvent dans un dossier, il faudra le signifier ex: photo/image1.jpg ...)

<script>
$slish('maphoto',"photos/manga1.jpg;photos/manga2.jpg;photos/manga3.jpg;photos/manga4.jpg;photos/manga5.jpg;",900);
</script>
Une fois les photos initialisée on va placé la galerie :
Vous pourrez utiliser les fonction suivantes :

<script type="javascript">
$slishToNum(1); //Aller a image 1
$slishPREV(); $slishNEXT(); // Aller a l'iamge suivante ou precedente.
$slishPLAY(3000); $slishSTOP(); //Arreter  ou lancer le diaporama
</script>

Puis


<img src="image1.jpg" name="mypicture" width="200" height="200" id="mypicture" />

Ca ressemble a un affichage d'image tout bete, le id="maphoto" va s'occuper de tout !

Ensuite on va afficher les images en miniature avec un lien cliquable pour voir les photos en grand:
<a href="#" onclick="$slishToNum(1); return false"><img src="photos/manga1.jpg" 
class="miniphotos" width="32" height="32"></a>
<a href="#" onclick="$slishToNum(2); return false"><img src="photos/manga2.jpg" 
class="miniphotos" width="32" height="32"></a>

<a href="#" onclick="$slishToNum(3); return false"><img src="photos/manga3.jpg" 
class="miniphotos" width="32" height="32"></a>
<a href="#" onclick="$slishToNum(4); return false"><img src="photos/manga4.jpg" 
class="miniphotos" width="32" height="32"></a>
<a href="#" onclick="$slishToNum(5); return false"><img src="photos/manga5.jpg" 
class="miniphotos" width="32" height="32"></a>
Pour améliorer votre galerie vous pouvez ajouter des boutons de navigation (suivant precedent) 
<img id="btnprev" class="diabutton"  src="photos/btn_prev.gif" onclick="$slishPREV();" alt="prv">
<img id="btnnext" src="photos/btn_next.gif" alt="next"  onclick="$slishNEXT();" class="diabutton">
et ajouter aussi les boutons pour démarrer ou arreter le diaporama

<a href="#" class="linktest"  onclick="$slishPLAY(3000); return false">play</a> 
<a href="#" onclick="$slishSTOP(); return false" class="linktest" >pause</a>



Visualisez la démo des effet d'accordéons
Pour plus de facilité consultez la démo et affichez la source (CTRL+U sous firefox ou affichage> source sous IE )

Voila !

Vous pouvez consulter le site officiel ou attendre que je finisse de développer un site pour voir l'application de ces effets qui sont tous compatible entre eux