Les bibliothèques JavaScript, telles que MooTools, peuvent vous faire gagner beaucoup de temps lors du développement d'un site. Dans ce tutoriel, je vais vous montrer comment combiner de nombreuses fonctions de MooTools pour créer une belle galerie de photos..

Étape 1 - Configurez votre HTML, CSS et MooTools

Avant de commencer, jetez un œil à la démo. Il sera plus facile de comprendre le but de chaque étape si vous connaissez le but.

Commencez par créer un fichier HTML simple, puis ajoutez un lien vers la feuille de style (main.css) et vers deux fichiers JavaScript (mootools.js et main.js). Créez ces fichiers dans le même répertoire. Ensuite, accédez à MooTools Core Builder. Sélectionnez tous les composants, puis cliquez sur Télécharger. Cela téléchargera mootools-1.2-core.js. Copiez le contenu de ce fichier dans le fichier mootools.js. Ensuite, accédez à MooTools More Builder, sélectionnez tous les composants et cliquez sur Télécharger. Copiez le contenu à nouveau et collez-les au bas de mootools.js.

(Remarque: la plupart des sites, y compris cette galerie de photos, n'ont pas besoin de tous les composants. Toutefois, si vous les utilisez tous au début, puis que vous supprimez ceux dont vous n'avez pas besoin, cela facilite grandement le développement. Au milieu d’un projet et s’est rendu compte que vous souhaitiez inclure une fonction différente dans l’un des composants que vous n’avez pas téléchargé, vous devrez le télécharger à nouveau avant de continuer, ce qui vous évitera de le télécharger à nouveau une fois que vous aurez terminé.)

Étape 2 - Créer la mise en page

Nous devons maintenant créer la mise en page de notre galerie de photos en utilisant HTML et CSS. Ajoutez le code suivant dans les balises body de votre fichier HTML.

 
Galerie de photos
 
 
      
 
 
 
Défiler vers le haut
 
Défiler vers le bas
 
 
 
La gauche
 
Droite
 
 

Cela crée un conteneur pour entourer tout le code du site, un titre, une section pour les images et des contrôles pour le site. Pourquoi toutes les balises img vides? Dans le CSS ci-dessous, nous leur donnons des tailles et une couleur de fond différente, ce qui nous permet de tester la galerie sans avoir à ajouter ni redimensionner les images réelles. Maintenant, nous ajoutons le CSS au fichier main.css.

* marge: 0; rembourrage: 0; contour: aucun;  .hide display: none;  body background: # 000; couleur: #fff; rembourrage: 30px; font-family: Arial, Helvetica, sans serif;  #container width: 596px; hauteur: 400px; arrière-plan: # 111; débordement caché; bordure: 1px solide # 333;  h1 background: # 222; largeur: 592px; hauteur: 29px; padding-left: 7px; bordure inférieure: solide 1px # 333; taille de police: 18px; hauteur de ligne: 29px; poids de police: normal;  #picture_section padding: 7px 0 7px 7px; largeur: 590px; hauteur: 332px; débordement caché;  #inside width: 590px; hauteur: 332px;  #picture_section img border: 0; hauteur: 57px; largeur: 111px; float: gauche; arrière-plan: # 333; marge inférieure: 7px; marge droite: 7px; curseur: pointeur;  #controls_vert background: # 222; largeur: 600px; hauteur: 23px; border-top: 1px solid # 333;  #controls_horz background: # 222; largeur: 600px; hauteur: 23px; border-top: 1px solid # 333;  #up height: 10px; largeur: 10px; marge droite: 7px; fond: url (up.jpg) no-repeat; retrait du texte: -9999px; float: gauche; marge: 7px; marge inférieure: 6px; curseur: pointeur;  #down height: 10px; largeur: 10px; fond: url (down.jpg) no-repeat; retrait du texte: -9999px; float: gauche; marge: 7px; marge gauche: 0; marge inférieure: 6px; curseur: pointeur;  #left height: 10px; largeur: 10px; fond: url (left.jpg) no-repeat; retrait du texte: -9999px; float: gauche; marge: 7px; marge inférieure: 6px; curseur: pointeur;  #right height: 10px; largeur: 10px; fond: url (right.jpg) no-repeat; retrait du texte: -9999px; float: gauche; marge: 7px; marge gauche: 0; marge inférieure: 6px; curseur: pointeur;  div # up.deactivated opacity: 0.2; filtre: alpha (opacité = 20); curseur: par défaut;  div # down.deactivated opacity: 0.2; filtre: alpha (opacité = 20); curseur: par défaut;  div # right.deactivated opacity: 0.2; filtre: alpha (opacité = 20); curseur: par défaut;  div # left.deactivated opacity: 0.2; filtre: alpha (opacité = 20); curseur: par défaut; 

Voici à quoi il ressemble avec celui appliqué.

Comme la galerie commence en haut, la flèche vers le haut est automatiquement désactivée. De plus, les flèches gauche et droite sont automatiquement masquées, car elles ne seront affichées que lorsque la grande image est agrandie. De plus, seuls les sommets des images de la sixième ligne sont affichés, pour que l'utilisateur sache qu'il y en a d'autres ci-dessous..

Ajoutons maintenant la superposition qui montrera les grandes images. Tout d’abord, ajoutez le code suivant juste avant la balise body de fermeture dans votre fichier HTML.

 
Cliquez sur l'image pour revenir à la galerie.
 
une

Ajoutez ce qui suit à la fin de votre fichier CSS pour que les div apparaissent en superposition sur les vignettes.

#display_picture_container position: absolute; en haut: 0; gauche: 0; largeur: 700px; hauteur: 400px; rembourrage en haut: 16px;  #display_picture position: absolute; en haut: 61px; à gauche: 31px; largeur: 596px; hauteur: 330px; arrière-plan: # 000; opacité: 0,8; filtre: alpha (opacité = 80); text-align: center; taille de police: 11px; rembourrage en haut: 16px;  #display_picture_img position: absolute; en haut: 108px; à gauche: 65px; hauteur: 272px; largeur: 530px; curseur: pointeur; 

Cela crée cet effet:

La grande image apparaîtrait où le div (maintenant invisible) display_picture_img est (sous le Cliquez sur l'image pour revenir au texte de la galerie).

Étape 3 - Recueillez et redimensionnez vos images

C'est un bon moment pour collecter toutes vos photos et les redimensionner. Tout d’abord, créez un dossier "images" et un dossier "pouces". Ajoutez toutes vos images dans le dossier images et nommez-les 1.jpg, 2.jpg, 3.jpg, etc. Redimensionnez-les toutes à la taille de display_picture_img div: 530 pixels de large et 272 pixels de hauteur. Copiez ensuite ces fichiers dans le répertoire thumbs et redimensionnez ces copies à une largeur de 111 pixels sur une hauteur de 57 pixels. Peu importe le nombre de photos que vous avez. Cependant, je recommanderais d’utiliser plus de 26 pour ce tutoriel afin que vous puissiez utiliser le défilement vertical..

Étape 4 - Ajouter des fonctionnalités avec MooTools

La première chose à faire est de supprimer tous les balises dans le fichier HTML. Ce n'étaient que des espaces réservés; nous ajouterons les fichiers réels avec JavaScript ultérieurement. Maintenant, nous allons faire disparaître la superposition lors du chargement de la page. Ajoutez le code suivant au fichier main.js

var number_of_pictures = 32; function show_pictures () var while_pictures = 1; tandis que (while_pictures <= number_of_pictures)  var new_image = new Element('img',  'src': 'thumbs/' + while_pictures + '.jpg', 'id': 'image_' + while_pictures, 'events':  'click': function() $('display_picture_img').innerHTML = ""; $ ('display_picture_container'). fade (1); $ ('big_picture'). fade (.999999); $ ('controls_vert'). setStyle ('display', 'none'); if (this.id .replace ('image _', ") == 1) $ ('gauche'). set ('classe', 'désactivée'); $ ('right'). erase ('class');  else if (this.id.replace ('image _', ") == number_of_pictures) $ ('left'). erase ('classe'); $ ('right'). set ('classe', 'désactivé '); else $ (' gauche '). set (' classe ',' activé '); $ (' droite '). erase (' classe '); $ (' controls_horz '). setStyle (' display ',' block '); $ (' left '). tween (' margin-left ',' 286px ');)) new_image.inject ($ (' inside ')); // précharge tous les images var preload_image = new Element ('img', 'src': 'images /' + while_pictures + '.jpg', 'class': 'hide'); preload_image.inject ($ ('conteneur')); // NOTE: je n'ai pas créé d'attribut alt, car personne ne l'aura vu ici. While_pictures ++; window.addEvent ('domready', function () show_pictures (); $ ('display_picture_container') .fade ('hide'););

Voici à quoi cela ressemble:

Pour expliquer cela, commençons par le bas. Dans MooTools, le code window.addEvent exécute le code qu'il contient lorsque le DOM est prêt à restituer des éléments. Le $ ('display_picture_container'). Fade ('hide'); masque la div display_picture_container et tout son contenu. J'ai utilisé la méthode de fondu ('masquer') car nous le ferons plus tard. Nous ne créons pas d'affichage: aucun; déclaration dans notre fichier CSS ou laisser JavaScript le cacher de cette façon; il doit être caché par la fonction que nous allons utiliser pour le montrer plus tard (fondu).

Passons maintenant à la fonction show_pictures. Tout d'abord, nous définissons la variable number_of_pictures. Cela indique à la fonction d'ajouter des vignettes à partir du dossier thumbs en utilisant chaque entier compris entre 1 et le nombre donné. Pour ajouter plus d'images à ce diaporama, il vous suffit de les ajouter aux dossiers, de les redimensionner et d'augmenter la valeur number_of_pictures. J'ai utilisé 32.

La partie suivante concerne le fonctionnement interne de show_pictures. Comme son nom l’indique, cela montre toutes les images. Il précharge également les grandes images en arrière-plan. Dans la fonction, while_pictures est défini sur 1. Il s’agit de la variable que nous allons utiliser comme point de départ pour l’affichage de toutes les images. L'instruction while suivante montre que le code qu'il contient sera exécuté une fois pour chaque image, en commençant par une et allant jusqu'au nombre total d'images (number_of_pictures). Notez que while_pictures ++; est à la fin de la boucle while, pour qu’elle augmente d’une unité chaque fois que la boucle se répète.

Ensuite, nous créons une instance d'élément pour un élément img. Nous pouvons ajouter src, id, classe, événement et autres attributs. Cependant, nous avons seulement besoin de src, id et d'événements. En utilisant 'src': 'thumbs /' + while_pictures + '.jpg', nous déclarons que nous voulons que le src de l'image soit le numéro actuel ou dans le dossier thumbs. Les identifiants pour toutes nos vignettes seront image_1, image_2, etc..

Maintenant, nous voulons qu'une grande image apparaisse après avoir cliqué sur une vignette, nous créons donc un événement de clic. La première ligne en dessous de cette valeur fait que display_picture_img div contian la grande image avec l’id id de big_picture et une classe de l’id de la vignette (image_1, image_2, etc.). Rappelez-vous que, pour le moment, la div display_picture_img est cachée.

Maintenant, utilisez la méthode .fade (1) pour ouvrir en fondu le div display_picture_container et tout son contenu. Le 1 représente le niveau d'opacité (1 = 100%, 0.5 = 50%, etc.). Cependant, cela cause un bogue dans tous les navigateurs, tels que Firefox 3 et Safari, à l'exception des plus récents. Ils s’affichent correctement, mais les autres apparaissent dans l’image et atténuent la zone plus sombre qui l’entoure. Après de nombreuses expérimentations, j'ai découvert que si vous avez la grande image (qui a big_picture comme identifiant) fondue avec sa propre méthode de fondu, cela fonctionne, mais seulement si le fondu n'est pas défini à 1. Cependant, nous voulons l'image être à 100% d'opacité. Par conséquent, je l'ai mis à .999999, qui n'a pas de transparence notable.

Alors maintenant, la grande image est sur l'écran. Cependant, nous souhaitons également que les commandes se déplacent au centre et deviennent des flèches gauche et droite, au lieu de flèches haut et bas. Tout d'abord, nous masquons les contrôles verticaux (controls_vert). Nous pouvons utiliser display: none; pour cela, parce que nous n'allons pas le faire disparaître. Nous utilisons ensuite une déclaration if, if else et else pour déterminer si l'image sur laquelle l'utilisateur a cliqué est la première ou la dernière de notre galerie. Si c'était le premier, nous ne voulons pas qu'il puisse aller à gauche, car aucun précédent n'existe. La même chose est nécessaire à droite. Plus tard, quand nous aurons utilisé les flèches gauche et droite, nous le ferons détecter s'il a ou non une classe désactivée. Cela déterminera si l'événement click fonctionnera pour lui. (Consultez également le CSS. Il définit l'image de la flèche sur 20%. Cela évite d'avoir 8 images de flèche directionnelle au lieu de 4).

Ensuite, nous affichons les contrôles horizontaux en définissant son style d’affichage à bloquer. Donc, en masquant les commandes verticales et en affichant les commandes horizontales, nous venons de les désactiver. Cependant, nous voulons que les contrôles horizontaux soient centrés. Pour ce faire, j'ai créé une interpolation qui augmente la marge gauche de 286 pixels, ce qui correspond au centre de la galerie..

Maintenant que nous avons créé notre nouvelle image, nous devons l'insérer dans le document. La méthode inject nous permet d’insérer le nouvel élément img dans la division interne.

Nous souhaitons également précharger chacune des images afin d'éviter tout retard lorsque les utilisateurs cliquent dessus pour les afficher en fondu. Nous créons un nouvel élément img pour chaque image en taille réelle. Cependant, il utilise la classe hide, qui, dans notre CSS, utilise display: none; cacher le contenu. Ensuite, nous injectons l'image de préchargement cachée dans le conteneur div.

Voici à quoi cela ressemble après avoir cliqué sur une vignette:

Maintenant, nous devons faire disparaître la photo lorsque nous cliquons dessus. Insérez le code suivant après le $ ('display_picture_container'). Fade ('hide'); déclaration dans main.js.

$ ('display_picture_img'). addEvent ('click', function () $ ('display_picture_container'). fade (0); $ ('big_picture'). fade (0); $ ('up'). setStyle ( 'marge-gauche', '286px'); $ ('controls_horz'). setStyle ('display', 'none'); $ ('controls_vert'). setStyle ('display', 'block'); $ (' left '). setStyle (' margin-left ',' 7px '); $ (' up '). tween (' margin-left ',' 7px '););

Cela ajoute un événement de clic à la div contenant la grande image. Lorsque vous cliquez sur ce bouton, le conteneur disparaît progressivement et, en raison du problème susmentionné, l'image elle-même passe à 0. Ensuite, nous configurons la div cachée pour qu'elle ait la même marge gauche supérieure à celle de la div gauche. Ensuite, nous basculons instantanément les commandes horizontales vers les commandes verticales, puis, après avoir réinitialisé la division gauche masquée à sa marge gauche d'origine, nous animons la marge gauche de la flèche vers le haut jusqu'à sa 7px d'origine à l'aide d'une autre interpolation. Maintenant, vous pouvez cliquer sur les vignettes pour les agrandir, puis cliquer sur la grande image pour la cacher à nouveau. Presque fini!

Maintenant, prenez le code suivant et collez-le au-dessus de la morue que vous venez d'entrer.

var vertical_moves = 0; var rows = Math.ceil (number_of_pictures / 5); if (lignes> 5) $ ('up'). addEvent ('clic', fonction (événement) if (! $ ('up'). hasClass ('désactivé')) vertical_moves--; $ (' down '). erase (' class '); $ (' inside '). tween (' margin-top ',' - '+ (64 * vertical_moves) +' px '); if (vertical_moves == 0) $ ('up'). set ('classe', 'désactivée');); $ ('down'). addEvent ('click', fonction (event) if (! $ ('down'). hasClass ('désactivé')) vertical_moves ++; $ ('up'). erase ('class' ); $ ('inside'). tween ('margin-top', '-' + (64 * vertical_moves) + 'px'); if (vertical_moves == (rangées-5)) $ ('bas') .set ('classe', 'désactivée'););  else $ ('up'). set ('classe', 'désactivé'); $ ('down'). set ('classe', 'désactivée');  var current_id = 1; $ ('left'). addEvent ('click', function () if (! $ ('left'). hasClass ('désactivé')) current_id = $ ('big_picture'). get ('class') .replace ('image_', "); current_id--; $ ('big_picture'). fade ('hide'); $ ('big_picture'). set ('src', 'pictures /' + current_id + '. jpg '); $ (' big_picture '). fade (1); $ (' big_picture '). set (' class ',' image_ '+ current_id); if (current_id == 1) $ (' left ') .set ('classe', 'désactivée'); if (current_id == (number_of_pictures-1)) $ ('right'). erase ('class');)) $ ('right') .addEvent ('click', function () if (! $ ('right'). hasClass ('désactivé'))) current_id = $ ('big_picture'). get ('classe'). replace ('image_' , "); current_id ++; $ ('big_picture'). fade ('hide'); $ ('big_picture'). set ('src', 'pictures /' + current_id + '.jpg'); $ ('big_picture ') .fade (1); $ (' big_picture '). set (' classe ',' image_ '+ identifiant actuel); if (identifiant actuel == 2) $ (' gauche '). erase (' classe ');  if (current_id == number_of_pictures) $ ('right'). set ('classe', 'désactivée'););

La première chose à faire est de configurer le défilement vertical. Tout d'abord, nous allons créer une variable appelée vertical_moves avec une valeur de 0. Cela nous indiquera le nombre de lignes qu'il a déplacées vers le bas. Ensuite, nous découvrons combien de lignes d’images nous avons, avec 5 images à la suite. La fonction Math.ceil arrondit tout nombre comportant un nombre décimal à un entier. Par exemple, j'ai 32 images. 32 divisé par 5 est 6,4, ce qui arrondirait à 6. Cependant, nous souhaitons toujours que les images supplémentaires soient montrées; Même s'il n'y a que deux images sur la dernière ligne, nous voulons qu'elle compte comme une ligne entière. Comme Math.ceil arrondit le tout, le nombre de lignes devient 7.

Ensuite, nous détectons s’il ya plus de cinq lignes. S'il n'y en a pas, nous désactivons les flèches haut et bas. Avec cinq rangées ou moins, toutes les images sont affichées sans les boutons de défilement. Cependant, s'il y en a six ou plus, nous voulons leur ajouter des événements. Pour la div de la flèche vers le haut, nous ajoutons un événement, puis nous déterminons s'il a été étiqueté comme étant désactivé ou non. S'il est désactivé, il apparaît avec seulement 20% d'opacité, et lorsque vous cliquez dessus, il ne fait rien. De plus, il n'aura plus de pointeur en tant que curseur. Cependant, s'il n'a pas cette classe, cela continue. Si vous montez, cela réduit le nombre de lignes que vous avez supprimées, donc vertical_moves diminue d’une ligne. Il efface ensuite toutes les classes de la div down. Si elle se trouve dans la rangée du bas et que la flèche vers le bas est désactivée, une fois qu’elle se déplace d’une rangée vers le haut, elle peut redescendre. Par conséquent, il empêche sa désactivation.

Ensuite, toutes les vignettes se déplacent vers le haut en détectant ce qu'est le nouveau mouvement vertical_moves, en le multipliant par 64 et en le rendant négatif. Le nombre 64 est utilisé car il s'agit de la hauteur d'une rangée de vignettes plus la marge en dessous. Il applique ensuite cette valeur au haut de la marge. Par exemple, si le haut de la marge était à l'origine de -128px, il se déplacerait vers le haut car le nouveau haut de la marge ne serait que -64px. La méthode d'interpolation le fait disparaître à sa nouvelle position. Dans le fichier main.css, la division picture_section cache son débordement. Ainsi, lorsque vous appliquez une marge supérieure négative, elle la masque au lieu de rester collée. Elle détermine ensuite si elle se trouve en haut de la galerie. Si tel est le cas, la flèche vers le haut est désactivée afin qu’elle ne puisse plus monter. La flèche vers le bas a les mêmes actions appliquées, sauf en sens inverse.

Nous allons maintenant faire fonctionner les boutons gauche et droit correctement. Tout d'abord, nous définissons current_id égal à un pour créer la variable. Cela nous aidera à déterminer quelle grande image est affichée (rappelez-vous, les boutons gauche et droit n'apparaissent que lorsqu'une grande image est affichée). Ensuite, nous ajoutons un événement de clic au div de gauche et vérifions s'il est désactivé ou non. Si ce n'est pas le cas, nous détectons la classe de img avec l'id de big_picture. Ceci a été défini plus tôt comme image_ (entrez le numéro de l'image actuelle ici). Nous utilisons la méthode get pour trouver ceci et la méthode replace pour supprimer le préfixe image_. Ensuite, on le soustrait par un, car en se déplaçant vers la gauche, on revient à une image avec un identifiant d'un moins.

Ensuite, nous masquons l'image elle-même instantanément, puis nous la changeons en image précédente. Nous fondons ensuite l'image à une opacité de 100%. Après cela, nous changeons la classe de l'image en sa nouvelle valeur, ce qui permet à un utilisateur d'aller à gauche de manière répétée. Nous détectons ensuite s'il s'agit de la toute première image. Si c'est le cas, nous ne pouvons plus aller à gauche, nous désactivons donc le bouton gauche. S'il s'agit de l'avant-dernière image après avoir cliqué à gauche, cela signifie que c'était juste sur la dernière image, où le bouton droit serait désactivé. Si tel est le cas, nous activons le bouton droit afin qu’ils puissent continuer. Presque les actions identiques sont appliquées au bouton droit, sauf encore une fois en sens inverse..

Étape 4 - Test et Optimisation

Maintenant c'est à peu près tout. La grande image apparaît en fondu lorsque vous cliquez sur une vignette. Vous pouvez aller à gauche et à droite, revenir à la galerie principale en cliquant sur la grande image, puis faire défiler de haut en bas. Mais attendez! Après avoir développé un bon navigateur tel que Firefox, vous devez le tester dans les autres navigateurs populaires tels que Safari, IE6 et IE7. Je les ai tous testés, et ils ont tous fonctionné, sauf pour-surprise! -Internet Explorer 6. Lorsque vous cliquez sur une image et que les contrôles horizontaux glissent, ils glissent beaucoup trop loin dans IE6. Pour une raison quelconque, IE6 pense que ce que tous les autres navigateurs considèrent comme 286px n’est que de 143px. Alors, changez le code suivant:

$ ('left'). tween ('margin-left', '286px');

Pour ça:

if (Browser.Engine.trident4) $ ('left'). tween ('margin-left', '143px');  else $ ('left'). tween ('margin-left', '286px'); 

Browser.Engine.trident4 renvoie true si le navigateur est IE6. Sinon, il renvoie false et exécute le code d'origine. Et le code suivant:

$ ('up'). setStyle ('margin-left', '286px');

Pour ça:

if (Browser.Engine.trident4) $ ('up'). setStyle ('margin-left', '143px');  else $ ('up'). setStyle ('margin-left', '286px'); 

Maintenant, cela fonctionne sur tous les navigateurs. À ce stade, vous pouvez également accéder au site MooTools et sélectionner uniquement les composants que vous avez utilisés. Même si mootools.js, main.js, main.css et le fichier HTML utilisent ensemble moins de 100 Ko, vous pouvez toujours réduire la taille pour optimiser l'expérience des utilisateurs disposant d'une connexion Internet plus lente. Cependant, j'ai laissé la totalité de la bibliothèque MooTools dans le code source, pour que les personnes souhaitant modifier des éléments de la galerie puissent utiliser tous les composants..

.