On décompresse l'archive de l'exemple dans ce même dossier (pas dans la librairie hein !).
Une fois l'exemple fonctionnel, on peu décortiqué le code.
On doit d'abord inclure la librairie pour pouvoir l'utilisé.
Ensuite on défini le dossier des images pour le scanner avec la fonction "scanDir".
On demande ensuite la création des miniatures de ce même dossier en donnant les bon paramètres.

createThumbnails(dossier+notre variable de boucle,dossier,la taille,le nom du dossier des miniatures,qualité des images) <?php
require '../magixcjquery/_common.php';
$dir = 'test/';
$pict = magixcjquery_files_makefiles::scanDir($dir);
foreach($pict as $d => $t){
        magixcjquery_files_makefiles::createThumbnails($dir.$t,$dir,200,'thumb/','mini_',100);
}
?>

On dois ensuite faire la mise en page, je ne la copie pas entièrement, juste la partie qui nous intéresse :

<ul class="thumb">
                                <?php
                                foreach($pict as $d => $t) echo '<li><a href="'.'test/'.$t.'"><img src="'.'test/thumb/mini_'.$t.'" alt="" /></a></li>';
                                ?>
                        </ul>

On peux apercevoir que la boucle fonctionne très bien et laisse apparaitre nos images, bon c'est moche mais on va y remédier.
On place ensuite la javascript.
J'ai pris soin de ne pas utiliser l'include de la librairie pour cet exemple.

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="magicalHover-01beta1.pack.js"></script>

On s'occupe alors de manipuler magicalHover dans PHP, on initialise jQuery avec la fonction startjQuery

<?php
echo magixcjquery_jquery_magixcjQuery::startjQuery().

On appel la fonction qui initialise magicalHover avec quelques paramètres :

plugin_magixcjquery_jquery_plugins_magicalhover::iniRollover('ul.thumb li','200','400','500').

Je vous entend dire: "dit Aurélien c'est quoi le 200,400,500 ?".
Simple,

  • le premier paramètre donne la vitesse d'apparition ou de vue pour être précis.
  • Le deuxième correspond à la vitesse ou l'animation est supprimé pour revenir à la normal.
  • Le troisième correspond à la vitesse ou le title descend en dessous de l'image (ps: j'ai pas inclus l'image de celui-ci)

On termine le script jQuery

magixcjquery_jquery_magixcjQuery::endjQuery();
?>

Important : Pour cet exemple j'ai utiliser la version du SVN de la librairie (0.1alpha 2)