FOXTROT
plugin
Version bêta non autorisée en l'état actuel du développement
Tout ouvrir
Chaque balise IMG devient enfant d'un élément ayant pour ID "#wrapElemID" (ID étant l'ID de l'IMG), tous ces éléments ayant pour classe, ".wrapElem", par exemple trois IMG ayant pour ID respectif, "img1", "img2", "img3", auront pour parent #wrapElemimg1, #wrapElemimg2 et #wrapElemimg3.
Utiliser ces identifiants dans les CSS pour définir leurs propriétés respectives (voir exemple de code suivant).
Le "path"(chemin) du visuel de l'IMG est défini par l'attribut "src", pour ce qui est du visuel à l'échelle 1, son "path" peut être défini de 2 façons :
1) Si seul le "path" du visuel de la vignette est précisé via l'attribut "src", le plugin ira chercher le visuel "fullsize" dans le dossier où se trouve celui de la vignette, mais avec "-fullsize", ajouté à ce dernier. Par exemple, si le visuel de la vignette se trouve dans "images/vignettes", le grand visuel se trouvera dans le dossier "images/vignettes-fullsize".
Le nom du visuel devra être identique dans les deux dossiers.
2) La seconde méthode utilise ce que l'on appelle, les "data", le plugin utilise l'attribut "data-fullsize" pour lui indiquer où se trouve le grand visuel, si on prend l'exemple pré-cité, l'IMG devra avoir l'attribut comme suit : "data-fullsize='bigsize/big_visuel.jpg', les chemins sont différents, ce qui ne posera aucun soucis.
Le nom du visuel pourra être différent dans chacun des dossiers.
L'option "w_show", w pour window, permet, lors du survol de l'IMG, d'afficher une fenêtre qui permet d'avoir un zoom correspondant au contenu de la loupe. La taille de la loupe est proportionnelle à la taille de la fenêtre définie dans les propriétés css.
La position de celle-ci est définie à partir du coin supérieur gauche de la vignette.
Les propriétés sont entièrement gérées via les css pour laisser une liberté totale aux utilisateurs tout en évitant d'avoir trop d'options dans le plugin.
l'ID de la fenêtre attachée à l'IMG est définie comme suit : foxWZoom + ID de l'IMG, exemple : l'IMG ayant l'ID "img2" aura une fenêtre de zoom avec l'ID "foxWZoomimg2".
La classe de ces fenêtres est "foxWZoom".
Le fullscreen peut être affiché de 2 façons, puisque le visuel bouge selon le mouvement de la souris, donc, soit en plein écran(zone client ou vrai plein écran via F11), soit fenêtré (exemple 9), l'apparence est gérée via les CSS.
Toutes les fenetres fullscreen auront pour classe ".foxFullscreen"
L'ID est généré comme suit : foxFullscreen + ID de l'IMG Par défaut, le fullsize épouse la zone client, le visuel peut être affiché dans un cadre positionné à partir du coté haut/gauche de la vignette, les dimensions sont définies dans les propriétés css
Dans l'exemple qui suit, le fullscreen sera affiché dans un cadre de 700x750 pixels, positionné à 505 pixels et -438 pixels à partir du coin gauche de la vignette ayant l'ID img9.
La loupe peut prendre la forme que vous désirez via les propriétés css
l'option l_square, permet, selon que sa valeur soit à true ou à false, de prendre le format de la vignette. Si la vignette est de format rectangulaire et si l'option est à true, la loupe sera de forme carrée, c'est le format par défaut du plugin. Si sa valeur est à false, la loupe prendra alors le format de la vignette.
La taille de la loupe est fonction de la valeur de l'option l_size.
L'option l_size accepte deux type d"unités, % et px, en pourcentage par rapport aux dimensions de la vignette, en pixels pour préciser la taille au pixel près. "50" ou "50%" pour des pourcentages, 50 ou "50px" pour des pixels.
Si l_size est en pixels, l_size est prioritaire sur l_square = false, le format de la loupe restera carré.
Si w_show est à true, la loupe prendra la forme (et non le format) de la fenêtre de l'aperçu du zoom, par exemple si les coins haut/gauche et bas/droit sont arrondis, la loupe aura la même géométrie.
Note:
Lors d'un chargement d'un visuel lourd, en l'occurence les visuels à l'échelle 1, un "loader" apparait, mais la loupe reste transparente afin que l'internaute ait la possibilité de parcourir le zoom au fur et à mesure de son chargement, afin de lui éviter de patienter jusqu'à son chargement total.
Il est possible d'afficher jusqu'à trois légendes, les trois légendes seront affichées simultanément.
L'utilisateur peut choisir 3 positions : top, bottom et libre, voir ces exemples
Les options du plugin pour définir une position sont : txt_top, txt_bottom et txt_free
Les ID des légendes sont définies comme suit:
foxLegend + ID de l'IMG + n° correspondant à la position de la légende, l'IMG ayant l'ID "img3" avec une légende en txt_top aura pour ID : foxLegendimg31, txt_bottom, ID : foxLegendimg32 et txt_free aura pour ID : foxLegendimg33
Si l'utilisateur vient à modifier l'option de positionnement de legende dans la définition du plugin, par exemple txt_top en txt_bottom, ne pas oublier de modifier également l'ID correspondant dans les css, foxLegendimg31 deviendrait automatiquement foxLegendimg32 et l'affichage de la légende ne serait plus conforme.
Les propriétés sont entièrement gérées via les css pour laisser une liberté totale aux utilisateurs tout en évitant d'avoir trop d'options dans le plugin.
A noter : Les légendes ne seront affichées que si l'option "l_show" ou "lens" = false, si "w_show" = true, elles s'afficheront dans la fenetre du zoom;
Si l_show = false, les légendes disparaissent lorsque la loupe s'affiche, et reviennent lorsque la loupe disparait, voir exemple 7
Une série de diapositives peut être utilisée pour la sélection d'un visuel pour une vignette particulière (voir exeple 10)
La mise en place est extrêmement simple :
Préciser l'ID de l'IMG qui va recevoir le visuel sélectionné dans la classe de chaque img de sélection, comme ceci : foxSelect + ID de l'img maitre, comme dans l'exemple sus-cité.
chemin des sélections
1) identique aux vignettes, affiche les selections à la taille des vignettes, dans ce cas, ne pas oublier de préciser la taille des sélections(width et height), comme dans l'exemple.
2) spécifique aux sélections, dans ce cas width et height ne sont pas obligatoires, ira chercher la vignette dans le même dossier que celui de la vignette maitre.
Mis à part le fait qu'il s'agit d'un plugin simulant une loupe que l'utilisateur déplace sur un visuel, celui-ci peut servir également à gérer l'affichage de "diapositives" en incluant des légendes diverses comme le montre le dernier exemple du plugin.
Ces "diapositives" peuvent aussi être utilisées comme sélection d'une image particulière vers une vignette.
Le plugin agence les élements de façon à avoir une architecture correcte et ajoute les propriétés qui lui sont utiles à cette fin.
Cependant, l'utilisateur peut passer outre en ajoutant "!important", par exemple, "width: 250px !important".
Fonctionnement du plugin
Chargement du plugin
Chaque balise IMG devient enfant d'un élément ayant pour ID "#wrapElemID" (ID étant l'ID de l'IMG), tous ces éléments ayant pour classe, ".wrapElem", par exemple trois IMG ayant pour ID respectif, "img1", "img2", "img3", auront pour parent #wrapElemimg1, #wrapElemimg2 et #wrapElemimg3.
Utiliser ces identifiants dans les CSS pour définir leurs propriétés respectives (voir exemple de code suivant).
Définir le plugin pour tous les IMG
Le visuel à l'échelle 1
Le "path"(chemin) du visuel de l'IMG est défini par l'attribut "src", pour ce qui est du visuel à l'échelle 1, son "path" peut être défini de 2 façons :
1) Si seul le "path" du visuel de la vignette est précisé via l'attribut "src", le plugin ira chercher le visuel "fullsize" dans le dossier où se trouve celui de la vignette, mais avec "-fullsize", ajouté à ce dernier. Par exemple, si le visuel de la vignette se trouve dans "images/vignettes", le grand visuel se trouvera dans le dossier "images/vignettes-fullsize".
Le nom du visuel devra être identique dans les deux dossiers.
2) La seconde méthode utilise ce que l'on appelle, les "data", le plugin utilise l'attribut "data-fullsize" pour lui indiquer où se trouve le grand visuel, si on prend l'exemple pré-cité, l'IMG devra avoir l'attribut comme suit : "data-fullsize='bigsize/big_visuel.jpg', les chemins sont différents, ce qui ne posera aucun soucis.
Le nom du visuel pourra être différent dans chacun des dossiers.
La fenêtre du zoom
L'option "w_show", w pour window, permet, lors du survol de l'IMG, d'afficher une fenêtre qui permet d'avoir un zoom correspondant au contenu de la loupe. La taille de la loupe est proportionnelle à la taille de la fenêtre définie dans les propriétés css.
La position de celle-ci est définie à partir du coin supérieur gauche de la vignette.
Les propriétés sont entièrement gérées via les css pour laisser une liberté totale aux utilisateurs tout en évitant d'avoir trop d'options dans le plugin.
l'ID de la fenêtre attachée à l'IMG est définie comme suit : foxWZoom + ID de l'IMG, exemple : l'IMG ayant l'ID "img2" aura une fenêtre de zoom avec l'ID "foxWZoomimg2".
La classe de ces fenêtres est "foxWZoom".
Le fullscreen
Le fullscreen peut être affiché de 2 façons, puisque le visuel bouge selon le mouvement de la souris, donc, soit en plein écran(zone client ou vrai plein écran via F11), soit fenêtré (exemple 9), l'apparence est gérée via les CSS.
Toutes les fenetres fullscreen auront pour classe ".foxFullscreen"
L'ID est généré comme suit : foxFullscreen + ID de l'IMG Par défaut, le fullsize épouse la zone client, le visuel peut être affiché dans un cadre positionné à partir du coté haut/gauche de la vignette, les dimensions sont définies dans les propriétés css
Dans l'exemple qui suit, le fullscreen sera affiché dans un cadre de 700x750 pixels, positionné à 505 pixels et -438 pixels à partir du coin gauche de la vignette ayant l'ID img9.
La loupe
La loupe peut prendre la forme que vous désirez via les propriétés css
l'option l_square, permet, selon que sa valeur soit à true ou à false, de prendre le format de la vignette. Si la vignette est de format rectangulaire et si l'option est à true, la loupe sera de forme carrée, c'est le format par défaut du plugin. Si sa valeur est à false, la loupe prendra alors le format de la vignette.
La taille de la loupe est fonction de la valeur de l'option l_size.
L'option l_size accepte deux type d"unités, % et px, en pourcentage par rapport aux dimensions de la vignette, en pixels pour préciser la taille au pixel près. "50" ou "50%" pour des pourcentages, 50 ou "50px" pour des pixels.
Si l_size est en pixels, l_size est prioritaire sur l_square = false, le format de la loupe restera carré.
Si w_show est à true, la loupe prendra la forme (et non le format) de la fenêtre de l'aperçu du zoom, par exemple si les coins haut/gauche et bas/droit sont arrondis, la loupe aura la même géométrie.
Note:
Lors d'un chargement d'un visuel lourd, en l'occurence les visuels à l'échelle 1, un "loader" apparait, mais la loupe reste transparente afin que l'internaute ait la possibilité de parcourir le zoom au fur et à mesure de son chargement, afin de lui éviter de patienter jusqu'à son chargement total.
Les légendes
Il est possible d'afficher jusqu'à trois légendes, les trois légendes seront affichées simultanément.
L'utilisateur peut choisir 3 positions : top, bottom et libre, voir ces exemples
Les options du plugin pour définir une position sont : txt_top, txt_bottom et txt_free
Les ID des légendes sont définies comme suit:
foxLegend + ID de l'IMG + n° correspondant à la position de la légende, l'IMG ayant l'ID "img3" avec une légende en txt_top aura pour ID : foxLegendimg31, txt_bottom, ID : foxLegendimg32 et txt_free aura pour ID : foxLegendimg33
Si l'utilisateur vient à modifier l'option de positionnement de legende dans la définition du plugin, par exemple txt_top en txt_bottom, ne pas oublier de modifier également l'ID correspondant dans les css, foxLegendimg31 deviendrait automatiquement foxLegendimg32 et l'affichage de la légende ne serait plus conforme.
Les propriétés sont entièrement gérées via les css pour laisser une liberté totale aux utilisateurs tout en évitant d'avoir trop d'options dans le plugin.
A noter : Les légendes ne seront affichées que si l'option "l_show" ou "lens" = false, si "w_show" = true, elles s'afficheront dans la fenetre du zoom;
Si l_show = false, les légendes disparaissent lorsque la loupe s'affiche, et reviennent lorsque la loupe disparait, voir exemple 7
Liste d'images pour une vignette
Une série de diapositives peut être utilisée pour la sélection d'un visuel pour une vignette particulière (voir exeple 10)
La mise en place est extrêmement simple :
Préciser l'ID de l'IMG qui va recevoir le visuel sélectionné dans la classe de chaque img de sélection, comme ceci : foxSelect + ID de l'img maitre, comme dans l'exemple sus-cité.
chemin des sélections
1) identique aux vignettes, affiche les selections à la taille des vignettes, dans ce cas, ne pas oublier de préciser la taille des sélections(width et height), comme dans l'exemple.
2) spécifique aux sélections, dans ce cas width et height ne sont pas obligatoires, ira chercher la vignette dans le même dossier que celui de la vignette maitre.
Petit + du plugin
Mis à part le fait qu'il s'agit d'un plugin simulant une loupe que l'utilisateur déplace sur un visuel, celui-ci peut servir également à gérer l'affichage de "diapositives" en incluant des légendes diverses comme le montre le dernier exemple du plugin.
Ces "diapositives" peuvent aussi être utilisées comme sélection d'une image particulière vers une vignette.
Asctuce
Le plugin agence les élements de façon à avoir une architecture correcte et ajoute les propriétés qui lui sont utiles à cette fin.
Cependant, l'utilisateur peut passer outre en ajoutant "!important", par exemple, "width: 250px !important".
-
1) Paramètres par defaut
-
2) Vignette coins arrondis, loupe personnalisée, ombrage de la vignette au survol
-
3) Vignette avec ombre, simulation d'une loupe ronde
-
4) Fenetre de zoom externe basique
-
5) Ombrage de la vignette au survol, fenetre de zoom externe avec legende personnalisée avec fade
-
6) Zoom intégré directement dans la vignette au survol, fullscreen au click sur la vignette (F11 pour le plein écran)
-
7) Curseur représentant une loupe, click sur la vignette pour faire apparaitre la loupe, légende BOTTOM avec lien cliquable
Pas de fullscreen possible, l_show étant à false
-
8) Loupe basique, click pour un affichage en fullscreen
-
9) Loupe travaillée, click pour un affichage en fenêtre avec scroll via les mouvements de la souris
Pas de légende possible, une loupe étant gérée directement au survol
-
10) Vignette avec sélection de visuels
-
11) Petit + du plugin, gestion de diapositives avec légendes
Pas de loupe dans cet exemple
- Défaut Commentaires
-
true
false, permet d'afficher les vignettes sans la gestion de la loupe, pratique pour gérer des sites d'images avec des légendes.
Voir le dernier exemple -
false
Utilisation ou pas d'une sélection de vignettes pour chnager le visuel.
Voir exemple 10 -
250
Vitesse du fade lors d'une selection de vignette.
Voir exemple 10 - "pointer" Exemple de pointeur personnalisé : cursor: "images/loupe.cur", pas de curseur : faire un .cur transparent
- "none" Pointeur vide, dans l'exemple 7, deux curseurs sont utilisés, le curseur de la loupe et le curseur vide
- false true = Affiche une vignette par defaut, false = gère le fullsize uniquement
- "images/loader.gif" Chemin pour le loader des visuels
- 0 Ombrage de la vignette lors du survol, valeurs de 0 à 100
- "#000" Couleur de l'ombrage de la vignette lors du survol, noir par défaut
- false True = affiche le visuel en fullsize dans la vignette, scroll du fullsize via les mouvements de la souris
- 300 Vitesse animation des transitions, en millisecondes
- "" Legende TOP de la vignette, n'est affichée que si elle est renseignée et l_show = false ou lens = false
- "" Legende BOTTOM de la vignette, n'est affichée que si elle est renseignée et l_show = false ou lens = false
- "" Legende position libre de la vignette, n'est affichée que si elle est renseignée et l_show = false ou lens = false
- 200 Affiche la legende avec un fade si un texte est défini, surtout utilisé quand textscroll = false, en millisecondes
- true Affiche la legende avec un scroll, false = affiche la légende directement ou suivant la valeur de textfadespeed
- 150 Vitesse du scroll de la legende, en millisecondes
- false Affiche l'image en pleine page, ne fonctionne pas si l_show = false
- 400 Vitesse d'affichage de l'image en pleine page, en millisecondes
- "" taille de la fenetre du fullsize, si non renseigné, prends la taille de la zone client, F11 pour le plein écran
- "auto" Contrairement à w_show, le fullscreen s'obtient en cliquant sur la vignette. Positionné par rapport au coin haut/gauche de la vignette, exemple : "200 100", "auto" = centre en X et Y
- 30 0 - 100 (100 = opaque) - Opacité de la loupe
- "30%" Defaut = 30%, max = 80%, En pourcentage par rapport à la largeur si l_square = true, sinon le rapport est largeur/hauteur, "50" ou "50%" = pourcentages, 50 ou "50px" = pixels
- "solid 1px #ccc" Contours de la loupe
- 0 Defaut = 0, Arrondi de la loupe, valeur = 50% de la largeur, permet de faire une loupe ronde (exemple 3), pour une loupe carrée
- true False = Prends le format de la vignette, true = force la loupe au format carré quel que soit le format de la vignette
- "#000" Défaut = noir, couleur de la lentille
- "0px 0px 7px #888" Ombre de la loupe
- true Affiche la loupe dès le survol de la vignette
- false Affiche la fenetre du zoom, configuration et position via CSS (exemple 4)