Table des matieres (X)

Chut, ca charge ...
« Fucking bi(t)che !
Sélection des sites Flash du moment (édition 2) »

Tutoriel Mootools, framework Javascript gratuit


logo mootools

Bon les noobs, aujourd'hui nous allons voir un ptit tutoriel sur Mootools, le framework Javascript qui va te permettre de faire plein de trucs de fous et grâce auquel tu va bientôt pouvoir te la péter auprès de tes amis geeks )

Oui parce que en ce moment c'est la mode les frameworks (=bibliothèque de classes spécialisées orientées objet, eh oui je t'explique tout ami noob) et il est important que tu sois au top niveau.

Je te tutoie parce que, par défaut, tu es mon ami, allez sois sympa quoi ) Mais ne t'inquiète pas , je ne le ferais pas souvent ;) Allez trêve de plaisanterie, c'est parti !

Ce tutoriel est basé sur la version 0.83 de Mootools, il se peut donc que certaines choses ne fonctionnent pas avec la version 1.0 . D'autres tutoriels sur Mootools sont disponibles.

Pourquoi Mootools ?

Pour comprendre ce choix, regardons rapidement ce qui existe en ce moment (cette liste n'est pas exhaustive, c'est juste un aperçu):

  • Dojo
    J'ai pas vraiment eu le temps de tester mais l'ayant déjà vu en action dans une appli d'un pote , je sais qu'elle est très puissante mais je ne saurais t'en dire plus. Si tu as des infos ,hésite pas les commentaires sont là pour ça )
  • Yahoo! UI Library
    Le framework de Yahoo, j'ai testé rapidement , c'est très bien documenté comme d'habitude, c'est clair avec plein d'exemples (à condition de lire de l'anglais ) )
    Le seul défaut que j'ai pu trouver, c'est le poids, pour faire des effets de base ça me parait trop 50ko.
    Sur ce blog, tu pourras voir des exemples très impressionnants de ce qu'il est possible de faire avec le framework de Yahoo!. En particulier cet exemple d'intégration de commentaire qui déboite est très bien faite.
  • script.aculo.us
    Un des premiers framework que j'ai utilisé, très puissant, un peu trop lourd niveau poids, de belles démos sur le site, mais une documentation pas suffisament claire à mon goût.
  • ByteFX
    Ce n'est pas réellement un framework , plutôt une petite librairie vraiment orienté effets visuels simples. Une documentation et un site vraiment léger, comme le poids de cette librairie
  • Moo.fx
    Toute petite librairie comme ByteFX. Orientée effets visuels également. Mootools se base sur cette librairie.

Toutes ces frameworks sont très bien mais puisqu'il fallait en choisir un, que je venais justement de tester Mootools, qu'il me paraissait vraiment prometteur, puissant, souvent mis à jour avec une belle communauté derrière, je me suis dit qu'il fallait que je vous en fasse profiter.

Oui, je sais, je suis trop bon.

Présentation de Mootools

Je suppose que tu as déjà ouvert le site de Mootools dans un autre onglet de ton tout nouveau Firefox 2.0 , si ce n'est pas le cas , c'est le moment ou jamais ) Je te conseille même d'installer Firebug, ca te sera utile.

Tu remarqueras qu'il y a plein de blabla écrit en tout petit et en anglais, je suppose que tu ne l'a pas lu c'est pourquoi je vais t'en faire un petit resumé :

Mootools c'est un framework javascript orienté objet, très modulaire et léger. Il est compatible avec une grande majorité de navigateurs et un choix parmi plus de 15 scripts, plugins, addons est disponible.(Effets, Ajax,Drag and Drop, liste organisable, gestion de cookie et bien plus encore !)
Tres modulaire car il est possible de télécharger une version de Mootools qui correspond exactement à vos besoin avec l'outil dédié spécifique.

Alors pour bien comprendre ce que peut faire Mootools, on peut déjà avoir un aperçu des nombreuses démos disponibles sur le site . Il y en a d'autres sympas,là , ici, là et relà .

On peut voir également quelques projets plus aboutis comme :

Il suffit de regarder les sources de ces exemples pour voir la relative simplicité d'utilisation de Mootools.

Bon il est temps de s'y mettre...

Télécharger Mootools :

Pour commencer il nous faut télécharger Mootools.

interface de téléchargement de Mootools

Voila comment se présente l'outil de téléchargement de Mootools dans lequel on peut choisir quels sont les scripts que nous voulons.

Il y a 4 catégories :

  • Main Lib : La librairie indispensable
  • Native Scripts : composé de 4 scripts afin de gérer les fonctions, les tableaux, les chaines et les éléments
  • Addons : Fx.js permet de gérer les effets de base, Dom.js les éléments DOM, Ajax.js pour pouvoir faire le malin avec des chargements de données sans rechargement de page et enfin Drag.js pour gérer les Drag d'un objet.
  • Plugins : Windows.js pour avoir des infos sur la fenêtre, Cookie.js pour gérer tres facilement les Cookies, Json.js pour la syntaxe Json mais je connais pas trop alors je ne préfere pas trop m'étendre, Sortables pour pouvoir organiser des listes par exemple, FxPack, FxUtils et Fxtransitions pour des effets graphiques plus avancées, Tips.js pour les infobulles et Accordion.js permet les affichages en accordéons.

Il est à noter que certains addons ou plugins dépendent d'autres scripts qui seront alors automatiquement cochés.
Pour tester une première fois je vous conseille de tout cocher.

Une fois les choix effectués il est possible de récupérer le fichier Javascript en version plus ou moins compressée. Plus on compresse, plus le fichier Javascript généré devient illisible par un éditeur. On ne va pas avoir besoin de modifier le fichier alors autant compresser au maximum. (version non compressée : 90ko , compressée : 24ko)

Utilisation de Mootools par la pratique : Création d'une galerie

Pour comprendre comment utiliser Mootools , mettons nous en situation )

Nous allons faire une jolie galerie avec au programme : un effet accordéon, un peu d'ajax, des infobulles,du slimbox avec une petite pincée de CSS et de HTML. Voila le résultat final qu'on va devrait obtenir :

voir le resultat final galerie mootools

J'ai mis des bonnasses pour ce tutoriel mais vous êtes pas obligé de faire tout comme moi . Disons que c'est plus motivant pour travailler )

Allez c'est parti pour 7 étapes de folies !

Etape 1 : On définit notre menu accordéon en HTML

Alors pour commencer on va créer un fichier tutoriel_mootools.html dans lequel on va inclure notre fichier Javascript fraichement téléchargé. (je suppose que les 2 fichiers sont dans le même répertoire, on va faire au plus simple)

VOIR LA VERSION TEXTE
HTML:
  1. <!-- inclusion du fichier Mootools-->
  2.  
  3. <script src="mootools.release.83.js" type="text/javascript"></script>

On y ajoute le code de base HTML pour notre menu de navigation (je suppose que tu sais au moins les bases, sinon tu peux toujours aller voir chez là pour rattraper ton retard).

VOIR LA VERSION TEXTE
HTML:
  1. <!-- ici notre barre de navigation en accordeon-->
  2. <p id="barre_navigation">&nbsp;</p>
  3.  
  4. <h4 class="toggler"><a href="#cat_blonde">Blonde (3)</a></h4>
  5. <p class="accordeon">&nbsp;</p>
  6.  
  8.     <li><a href="javascript:afficher('pamela');">Pamela</a></li>
  9.     <li><a href="javascript:afficher('jordan');">Jordan</a></li>
  10.     <li><a href="javascript:afficher('ophelie');">Ophélie</a></li>
  11. </ul>
  12. <h4 class="toggler"><a href="#cat_brune">Brune (2)</a></h4>
  13. <p class="accordeon">&nbsp;</p>
  14.  
  16.     <li><a href="javascript:afficher('jessica');">Jessica</a></li>
  17.     <li><a href="javascript:afficher('jennifer');">Jennifer</a></li>
  18. </ul>
  19. <h4 class="toggler"><a href="#cat_rousse">Rousse (1)</a></h4>
  20. <p class="accordeon">&nbsp;</p>
  21.  
  23.     <li><a href="javascript:afficher('julia');">Julia</a></li>
  24. </ul>
  25. <!-- ici notre conteu mis a jour en ajax-->
  26. <p id="contenu">&nbsp;</p>

On obtient donc ce résultat pour l'étape 1. N'hésite pas à regarder les sources (clic droit -> voir source).

Pour l'instant la fonction afficher() n'est pas encore définie ni les classes CSS. Les classes serviront pour les CSS mais également pour l'effet accordéons que nous verrons dans l'étape 3 . Le div contenu servira pour l'étape 4.

Etape 2 : Rendons le menu un peu moins moche )

On ajoute un petit peu de CSS :

VOIR LA VERSION TEXTE
CSS:
  1. /* rendons notre barre de nav un peu plus belle*/
  2. /* rendons notre barre de nav un peu plus belle*/
  3. #barre_navigation {
  4. width : 200px;
  5. padding: 0 ;
  6. margin : 0;
  7. float : left ;
  8. }
  9.  
  10. #barre_navigation h4{
  11. padding: 4px 10px ;
  12. font-size: 12px;
  13. font-weight: normal;
  14. text-transform: uppercase;
  15. color: #FFF;
  16. background: #3399ff;
  17. cursor: pointer;
  18. margin : 0 0 1px 0 ;
  19. }
  20.  
  21. #barre_navigation a{
  22. text-decoration : none;
  23. }
  24.  
  25. #barre_navigation ul{
  26. padding: 4px 2px 4px 10px;;
  27. font-size: 11px;
  28. color: #FFF;
  29.  
  30. }
  31.  
  32. #barre_navigation ul li{
  33. list-style-type : none;
  34. padding : 2px 0 2px 0;
  35. margin : 0;
  36. }
  37.  
  38. #barre_navigation ul li a {
  39. text-decoration: none;
  40. color: #FFF;
  41. }
  42.  
  43. #barre_navigation ul li a:hover {
  44. text-decoration: none;
  45. color: #FFF;
  46. background-color: #FF3366;
  47. }

On obtient ce résultat pour l'étape 2.

Etape 3 : On ajoute du Javascript, ca bouge !

On rentre enfin dans le vif du sujet . Donc là nous allons ajouter le code Javascript nécessaire pour la mise en place de l'effet accordeon pour notre menu. J'ai placé ce code à la fin du fichier.

VOIR LA VERSION TEXTE
JavaScript:
  1. //pour commencer avec les elements fermés au départs
  2. var stretchers = $$('div.accordeon');
  3. stretchers.each(function(item){
  4. item.setStyles({'height': '0', 'overflow': 'hidden'});
  5. });
  6.  
  7. //au chargement de la page
  8. window.onload = function(){
  9.  
  10. var togglers = $$('h4.toggler'); //on met dans la variable togglers tous les div H4 de la page appartenant a la classe toggler. C'est la syntaxe $$ de element de Mootools qui permet cela très facilement
  11.  
  12. var bgFx = []; //variable pour la gestion des couleurs de fond
  13.  
  14. togglers.each(function(toggler, i){
  15. toggler.defaultColor = toggler.getStyle('background-color');
  16.  
  17. //fx creation
  18. bgFx[i] = new Fx.Color(toggler, 'background-color', {wait: false});
  19. });
  20.  
  21. // creation de l'effet accordeon
  22. //syntaxe : new Fx.Accordion(quel_div_visible, quel_div_a_afficher, {options eventuelles});
  23. var myAccordion = new Fx.Accordion(togglers, stretchers, { opacity: false, start: false, transition: Fx.Transitions.quadOut,
  24.  
  25. onActive: function(toggler, i){
  26. bgFx[i].toColor('#FF3366'); //quand un element est actif
  27. toggler.getFirst().setStyle('color', '#fff');
  28. },
  29.  
  30. onBackground: function(toggler, i){
  31. bgFx[i].clearTimer(); //quand un element n'est actif
  32. toggler.setStyle('background-color', toggler.defaultColor);
  33. toggler.getFirst().setStyle('color', '#222');
  34. }
  35. });
  36.  
  37. //permet de reouvrir directement le bon element
  38. //grace à l'url test.html#cat_a_ouvrir
  39. function checkHash(){
  40. var found = false;
  41. $$('h4.toggler a').each(function(link, i){
  42. if (window.location.hash.test(link.hash)){
  43. myAccordion.showThisHideOpen(i);
  44. found = true;
  45. }
  46. });
  47. return found;
  48. }
  49.  
  50. if (!checkHash()) myAccordion.showThisHideOpen(0);
  51.  
  52. };

On obtient le résultat de l'étape 3.

info J'ai commenté brievement le code afin que tu puisses bien tout comprendre mais sans le surcharger. Je détaillerais certains points au fur et à mesure des étapes. Examinons certaines lignes importantes :

VOIR LA VERSION TEXTE
JavaScript:
  1. var stretchers = $$('div.accordeon');
  2. var togglers = $$('h4.toggler');

Cette syntaxe vraiment puissante permet grâce à la classe Element de Mootools de pouvoir accéder à n'importe quel élément(div,a,b,h1,span...) de la page, peu importe le navigateur utilisé.

Il existe de nombreux moyens d'accéder à un élement comme par exemple :

VOIR LA VERSION TEXTE
JavaScript:
  1. $S('a') //renvoie un tableau de tous les élements &lt;a&gt; de la page
  2. $S('a', 'b') //renvoie un tableau de tous les élements &lt;a&gt; et &lt;strong&gt;
  3. $S('#monElement') //tableau de tous les éléments avec un id='monElement'
  4. $S('#monElement a.maClasse') //tableau avec tous les éléments &lt;a class="maClasse"&gt; contenus dans l'element avec un id='monElement'
  5. $E('a', 'monElement') //renvoie le Premier élement &lt;a&gt; de l'élement avec un id='monElement'

Cette liste est loin d'être exhaustive mais elle vous permet de voir la puissance de Mootools pour la sélection des éléments. N'hésitez pas à regarder la documentation de Mootools très bien faite.(en anglais)

Etape 4 : Ajoutons un peu d'ajax

Maintenant que notre menu est fonctionnel , il est temps de faire apparaitre nos images. Un repertoire /images contiendra nos images en version miniature et le repertoire /images_big celle en taille normale. Ces deux dossier étant dans le même répertoire que notre fichier tutoriel_mootools.html .

Tout d'abord nous allons créer notre fichier PHP (recuperer_photo.php) qui va récuperer les images que nous souhaitons :

VOIR LA VERSION TEXTE
PHP:
  1. //petit script PHP qui permet de récuper l'image selon le parametre prenom entré
  2. $repertoire = opendir("./images");
  3. //on parcourt le dossier images
  4. while ($entree = readdir($repertoire)) {
  5. if ($entree != "." &amp;&amp; $entree != ".." &amp;&amp; strstr($entree,$_POST['prenom'])) //si le nom du fichier contient le prenom
  6. $tFichiers[] = filemtime("./images/".$entree)."+".$entree;
  7. }
  8. //on ferme le repertoire
  9. closedir($repertoire);
  10. //on les range pr le fun )
  11. rsort($tFichiers);
  12.  
  13. //on les affiche
  14. for ($cpt = 0; $cpt &lt;sizeof($tFichiers); $cpt++) {
  15. $tVals = explode("+", $tFichiers[$cpt]);
  16. echo "<a href="http://fardeen.biz/wp-admin/images_big/" rel="lightbox" title="Image : "><img src="http://fardeen.biz/wp-admin/images/$tVals%5B1%5D" /></a>";
  17. }

Ceci étant fait, nous allons ajouter encore un peu de code javascript pour afficher les images lorsqu'on cliquera sur un des éléments du menu.

VOIR LA VERSION TEXTE
JavaScript:
  1. //fonction qui va afficher les photo
  2. function afficher(prenom) {
  3. //syntaxe : ajax(quel_fichier, {options})
  4. //postBody est le parametre envoyé au fichier PHP
  5. new ajax('recuperer_photo.php',{postBody:'prenom='+prenom, onComplete: photoFinished, update: 'contenu',method: 'post'}).request();
  6. }
  7. //fonction appelée à la fin de la requete ajax de la fonction afficher()
  8. function photoFinished(request){
  9. alert('chargement photo fini ) ');
  10. }

Nous obtenons ce résultat pour l'étape 4.

On peut voir que la fonction Ajax est très facile à utiliser.

Etape 5 : Affichage des photos un peu plus esthétique

On ajoute un peu de CSS :

VOIR LA VERSION TEXTE
CSS:
  1. #contenu {
  2. background-color: black;
  3. }
  4.  
  5. #contenu img{
  6. padding : 1px ;
  7. border : 1px solid #FF3366;
  8. margin: 0px 10px 0px 10px;
  9. }

Et on remplace la fonction alert par un petit effet de clignotement :

VOIR LA VERSION TEXTE
JavaScript:
  1. //on definit un effet de couleur pour la couleur de fond du div contenu
  2. var effetCouleur = new Fx.Color('contenu', 'background-color');

et on remplace la fonction photoFinished() :

VOIR LA VERSION TEXTE
JavaScript:
  1. function photoFinished(request){
  2. //on lance un effet de changement couleur lorsque chargement est terminé
  3. //il est important de bien affecté une valeur de départ au div contenu
  4. effetCouleur.fromColor('#ff3366');
  5. //alert('chargement photo fini ) ');
  6. }

On obtient ce résultat pour l'étape 5. On a bientôt fini , courage )

Etape 6 : Des ptites infobulles pour le plaisir

Pour ajouter des infobulles , il nous suffit d'ajouter ce code à la fonction photoFinished() . Ce code n'est pas placé dans la fonction par hasard, lorsque toutes les liens des images sont chargés on applique ensuite les infobulles.

VOIR LA VERSION TEXTE
JavaScript:
  1. //pour les infobulles
  2. //syntaxe new Tips(quelElement,{options})
  3. //on place ici la fonction pour l'appliquer quand toutes les images sont chargées
  4. var myTips = new Tips($ES('a','contenu'), {
  5. maxTitleChars: 50, //des titres avec une longueur max de 50
  6. maxOpacity: .85, //un peu de transparence
  7. className: 'infobulle' //quel classe CSS pour notre petite infobulle
  8. });

On ajoute la CSS correspondante pour notre infobulle :

VOIR LA VERSION TEXTE
CSS:
  1. .infobulle{
  2. background-color: #FF3366;
  3. padding : 6px;
  4. border : 1px solid #000;
  5. font: lighter 10px/1.3 Verdana,Arial,sans-serif;
  6. text-decoration: none;
  7. text-align: center;
  8. }

Et voila le résultat pour cette étape 6.

La fonction pour l'affichage des infobulles est aussi extremement facile à mettre en place.

Etape 7 : La touche finale : Slimbox

Quand on clique sur une des images, on quitte la gallerie. C'est ergonomiquement intolérable !

Pour remédier à cela nous allons ajouter Slimbox très facilement. Tout d'abord il suffit de télécharger ce script basé sur Mootools sur le site de son auteur ou directement ici. (script de 7 Ko, très léger) Puis on va le décompresser à la racine de notre dossier de travail.

On inclus les fichiers nécessaires :

VOIR LA VERSION TEXTE
HTML:
  1. <script src="js/slimbox.js" type="text/javascript"></script>
  2. <link href="css/slimbox.css" rel="stylesheet" type="text/css" media="screen" />

On ajoute le code Javascript pour l'affichage avec Slimbox :

VOIR LA VERSION TEXTE
JavaScript:
  1. //affiche une image avec l'effet lightbox de slimbox
  2. function montrer_image(image,titre) {
  3. Lightbox.show(image, titre);
  4. }

Et enfin on va changer légerement notre fichier PHP pour qu'un clic sur une image appelle notre fonction Javascript montrer_image();

VOIR LA VERSION TEXTE
PHP:
  1. echo "<a href="http://fardeen.biz/wp-admin/%5C%22javascript:montrer_image%28%27images_big/%22.$tVals%5B1%5D.%22%27,%27%22.$tVals%5B1%5D.%22%27%29;%5C%22" rel="lightbox[photo]" title="Image : "><img src="http://fardeen.biz/wp-admin/images/$tVals%5B1%5D" /></a>";

Nous obtenons enfin notre résultat final .

Conclusion

Comme vous avez pu le constatez grâce à Mootools il est assez facile d'obtenir des applications riches sans trop d'efforts.

L'objectif n'étant pas la réalisation de la galerie (il en existe déjà tellement) mais plutôt l'apprentissage de Mootools, il reste evidemment de nombreuses améliorations possibles à apporter à cette galerie comme des effets graphiques avancés, une gestion de drag and drop et même eventuellement une gestion des cookies pour sauvegarder un caddie d'image par exemple. Je viendrais peut-être ajouter ces améliorations à ce tutoriel si il est apprécié et peut-être qu'ensemble, on fera LA galerie du web 4.0 D

Edit : la suite est disponible !

D'ailleurs si vous avez apprécié ou pas ce tutoriel, je vous remercierai de m'en faire part par le biais des commentaires. Ca me motivera en refaire d'autre parcque bordel c'était long . Vous pouvez telecharger toutes les sources de ce tutoriel . (l'archive contient egalement les fichiers de la suite de ce tuto)

PS : Si j'ai fais des erreurs , des oublis , n'hésitez pas également à commenter pour améliorer ce tutorial.

Bises à tous )

Un nouveau tutoriel d'une application Google Map réalisée avec PHP et Mootools existe maintenant , il reprend en partie ce tutoriel mais dans le cadre d'une application avec Google Map.
Il existe maintenant la suite de ce tutoriel qui aborde le drag and drop et la gestion d'un caddie grâce au cookie.

Il faut décompresser après :)

Billets en relation


Cet article a été publié le Vendredi 10 novembre 2006 à 17:28 et est classé dans Technique, Tutoriel. Vous pouvez suivre les réponses reçues par cet article grâce au fil RSS 2.0. Vous pouvez laisser un commentaire, ou faire un trackback depuis votre site.

126 réponses à “Tutoriel Mootools, framework Javascript gratuit”

Tutoriel Galerie Ajax avec Mootools, framework Javascript gratuit...

Tutoriel en 7 tapes pour dcouvrir la puissance de Mootools .Apprentissage par la pratique : ralisation d'une galerie avec menu effet accordon, effets graphiques, requte AJAX, effet lightbox ... C'est du bon ;)...

Anonyme le 11 novembre 2006 16:20 |

Tu es trop fort, une sorte d'alien de l'ajax, des tuts comme celui-ci on en redemande... allez hop, au boulot !

infofiltrage le 11 novembre 2006 21:42 |

lol merci pour le compliment ;)

Fardeen le 11 novembre 2006 23:19 |

Bonjour,

Le tutorial est sympa mais il sera utile de spécifier que le bon javascript est le javascript non obtrusif: rendre le contenu accessible aux navigateurs dans lesquels javascript est désactivé doit être une priorité. Ici je veux principalement parler des "liens ajax" qui devraient pointer vers des pages contenant les miniatures des photos, liens dont le comportement par défaut serait modifié par javascript afin de charger les miniatures via ajax.

Christophe Beyls le 13 novembre 2006 0:49 |

Tu as raison Christophe mais comme je le précisais , ce tuto n'a pour vocation que de présenter les fonctionnalités de Mootools.

La galerie en elle même n'est la que pour illustrer , elle n'est pas destinée a être mis en application en condition réelle . Elle pourrait l'être mais après avoir ajouté de nombreuses modifications, dont notamment celle que tu mentionnes.

Merci pour ton commentaire en tout cas , ca fait plaisir )

Fardeen le 13 novembre 2006 10:57 |

Tu aurais pu mettre des photos de Myriam dans ton exemple de galerie.
Bravo fardeen pour l'article. Viens signer ton contrat, je t'embauches !! Lol

frnx le 16 novembre 2006 8:54 |

Merci mec D T'a pas les moyens de m'embaucher par contre, j'suis trop cher :p

Fardeen le 16 novembre 2006 11:19 |

merci !! très utile . J'ai mis ton lien sur le site de Modxcms que j'utilise
http://modxcms.com/forums/inde.....board=56.0

lasiate le 18 novembre 2006 1:28 |

Merci bcp pr le lien )

Fardeen le 18 novembre 2006 10:23 |

bonjour ,
merci pour ce tuto tres sympa ,
j ai un petit soucis pour afficher les photos . dans quel repertoire faut il les mettre .
j ai mis a la racine , mais pas d affichage .
merci

amocco le 19 novembre 2006 10:07 |

"Un repertoire /images contiendra nos images en version miniature et le repertoire /images_big celle en taille normale. Ces deux dossier étant dans le même répertoire que notre fichier tutoriel_mootools.html ."

Je ne pense pas pouvoir être plus explicite )

Fardeen le 19 novembre 2006 12:03 |

Merci pour ce super tuto. Je voudrais savoir comment pourrais-t-on ajouter un lien externe(vers un site) à chaque photos dynamiquement (petite base de données peut-être).

Merci d'avance

Octave Z le 19 novembre 2006 16:23 |

merci pour le tuto!

le choix des photos pour la gallerie est excelent D

jer666 le 19 novembre 2006 16:32 |

Oui en effet le mieux ce serait avec une base de données qui contiendrait la liste des catégorie , et toutes les images. Chaque image appartenant à une catégorie.

On a donc 2 tables (MySQL) : CATEGORIE et IMAGE.

dans IMAGE on aurait id_image,libelle_image,lien_image,description_image par exemple.

Je ne sais pas si je répond à ta question mais je n'ai pas abordé volontairement le coté base de donnée et administration dans ce tuto pour ne pas le surcharger.

Je le ferais dans un prochain tuto prochainement. Pourquoi pas lié avec cette galerie pour rester dans la continuité )

Fardeen le 19 novembre 2006 16:36 |

Merci pour ta réponse je pense que je vais faire comme ça, je vous tiens au courant des avancements.

Octave Z le 19 novembre 2006 17:10 |

tres bon tuto par contre la 3eme photo de Jennifer Love Hewith est un fake !

GaKaTaN le 19 novembre 2006 17:17 |

Merci et nan ce n'est pas un fake . Faut pas croire c'est une coquine la Jennifer D

Fardeen le 19 novembre 2006 19:17 |

Je viens de remarquer un petit problème avec l'utilisation du javascript dans le lien vers l'image en effet on perd la classification par catégorie que l'on à mis dans la balise rel=lightbox[categorie] je ne sais pas à quoi c'est dû mais c'est un peu embêtant...

Octave Z le 21 novembre 2006 15:01 |

Bonne remarque , mais en fait le rel=lightbox permet de se passer de l'appelle a la fonction montrer_image normalement. Dans l'exemple que j'ai mis , j'ai du oublier de l'enlever car il ne sert a rien . Seul l'appel a la fonction montrer_image sert.

Le problème est que la slimbox est faite pour fonctionner avec des images déjà sur la page. Pour notre besoin spécifique , c'est à dire des images chargées apres le chargement initial de la page, j'ai donc utilisé la fonction montrer_image pour contourner ce problème. L'interêt normalement de rel=lightbox[cat] et de pouvoir afficher des suites d'images (avec bouton next, prec). On perd cet avantage avec la fonction montrer_image() mais bon comme je le précisais l'objectif de ce tuto n'était pas d'obtenir une galerie finalisée, mais vraiment de comprendre le fonctionnement de Mootools et sa mise en application.

Pour ton problème, ouvre le fichier slimbox et regarde comment il fonctionne dans le détail et adapte le a tes besoin.

Fardeen le 21 novemb