QUELQUES  SOLUTIONS  POUR  MONTRER  DES  IMAGES  ET  CONSTRUIRE  UNE GALERIE  DANS  UN  ARTICLE

Utilisation du plugin  "Simple Image Gallery Pro" pour créer une petite galerie de photos.

Voici un exemple créé avec ce plugin

_______________

1 - Installation :

- Pour installer ce plugin utiliser la procédure standard de Joomla.

-  créer un répertoire pour y mettre vos images( exemple :  images/stories/remorquage ) ensuite dans votre article il suffit d'écrire la formule suivante Vous pouvez également utiliser un sous-répertoire  ( exemple :  images/stories/remorquage/nom_du_sous_repertoire ) dans ce cas vous remplacerez dans la formule le mot "remorquage" par "remorquage/nom_du_sous_repertoire" . Noter que Gallery Pro accepte autant de galeries que vous le souhaitez dans le même article, mais attention aux performances et à la durée d'affichage qui peut devenir trop longue!

3 - Gestion des paramètres du plugin :

Root folder for image galleries : Chemin de la racine des répertoires et sous_ répertoires d'images (recommandation; garder images/stories)

Popup engine for imge galleries : Vous pouvez choisir divers types de présentation pour le modèle de fenêtre popup.

Layout template for image galleries :   Vous pouvez choisir diverses présentation pour les petites vignettes de la galerie.

Thumbnail viewport width :  Largeur de la fenêtre de présentation des vignettes.

Thumbnail viewport height : Hauteur de la fenêtre de présentation des vignettes.

Fit thumbnail to available viewport ? :  Dimensionner la vignette pour correspondre à la taille  disponible de la fenêtre de présentation.

Thumbnail image quality : Qualité de la vignette.  60 à 75 % est un bon choix et permet un affichage assez rapide.

Display mode : Au lieu de présenter toutes les vignettes de la galerie, il est possible de présenter qu'une seule vignette, en revanche toutes les images seront disponibles dans la fenêtre popup.

Ordre :  Choix de l'ordre de présentation des vignettes.

Default captation (label) handling : Possibilité d'ajouter un titre et des commentaires - nous reviendrons sur cette option.

Enable original image download link in the popup : Autoriser la possibilité de télécharger l'image d'origine dans la fenêtre popup.

Thumbnail cache expiration time : Les vignettes ne sont pas générées à chaque ouverture de la page mais au bout d'un intervalle correspondant au temps indiqué en minutes  dans cette case. Lors des essais de mise au point  vous pouvez indiquer zéro "0" ainsi  les vignettes seront recréées à chaque ouverture de la page ( revenir à 120 ensuite ).

4 - Utilisation avancée :

• Les pompiers en action. Les pompiers en action.
• Les pompiers en action. Les pompiers en action.
• Les pompiers en action. Les pompiers en action.
• Les pompiers en action. Les pompiers en action.
•  

- Simple Image Gallery permet de présenter dans le même article ou le même site plusieurs galeries.En revanche toutes les galeries seront présentées de la même façon en fonction des paramètres définies ci-dessus dans le plugin. 

- Pour palier à cet inconvénient 4 paramètres sont disponibles pour personnaliser chaque galerie. "thumbs_width (largeur de la vignette)"   "thumbs_height (hauteur de la vignette)"    "display_mode (mode de présentation)" qui peut prendre deux valeurs, "0" indique le mode normal où toutes les vignettes sont affichées, "1" indique l'affichage d'une seule vignette. "captation_mode (mode d'affichage des titres et des commentaires) qui peut prendre trois valeurs, "0" pas de titre ni de commentaires, "1" Utilisation du message générique, "2" Utilisation des données du fichier labels.txt que vous personnalisez en indiquant un titre et des commentaires pour chacune de vos images.

Comment les utiliser?

Je souhaite montrer des images contenues dans un répertoire "incendie" avec des vignettes de 250 x 180 pixels en utilisant le mode une seule vignette  et préciser pour chaque image un titre et des commentaires. (c'est l'exemple présenté ci-dessus.) Voici le libellé de l'instruction à insérer dans votre article.

Les quatre données ne sont pas indispensables. Si vous souhaitez changer uniquement la taille des vignettes et garder les autres  paramètres génériques; indiquer  incendie:250:180 - pour modifier uniquement la hauteur incendie::182 .Si vous souhaitez  utiliser le mode d'affichage avec une vignette indiquer  incendie:::1  

Comment ajouter un titre et des commentaires à vos images?

- Simple Image Gallery génère automatiquement un fichier labels.txt dans le répertoire qui contient vos images. Il suffit de le récupérer  avec Filezilla et  dans un éditeur comme  Notepad ^* vous faites les modifications que vous souhaitez. Notez la possibilité d'ajouter du code HTML.   (Vous pouvez par exemple présenter une image typique d'un diaporama ou d'une vidéo,  permettre le téléchargement d'un .exe et faire un lien vers une page qui joue la vidéo.)

5 - Quelques astuces

1 - Dans notepad afin de conserver l'accentuation vous devez aller dans l'onglet ENCODAGE et sélectionner  Encoder en UTF-8 (sans BOM).

2 - Si vous souhaitez traduire le texte présenté en utilisant l'option générique, récupérer avec FileZilla le fichier,    /administrator/language/en-GB/en-GB.plg_content_jw_sigpro.ini  et franciser les messages. 

3 - Par défaut lorsque vous utiliser l'option de présenter une seule vignette (cas de l'exemple ci-dessus) SIG l'affiche à gauche et vous permet de mettre du texte à droite. Pour mettre la vignette à droite et le texte à gauche éditer le fichier template.css    chemin  /plugins/content/jw_sigpro/templates/Sleek et modifier float: left par float:right

C'est tout !!!!

________________________________________________________________________________________________________

Utilisation de "ImageSlideShow" issu du module de mod_briask

Voici un exemple créé avec ce module, disponible dans la rubrique "TELECHARGER" ou sur le site de l'auteur.

Vous pouvez utiliser ce module pour faire la bannière de votre site avec plusieurs images qui défilent comme un diaporama.

_______________

Gestion des paramètres du module

  1 - Répertoire des images "Image Directory" : Définir  l'emplacement sur votre site web où les images que vous souhaitez montrer sont situées.  ISS utilisera toutes les images (BMP, GIF, JPG et PNG) qui se trouvent à l'emplacement spécifié ( exemple :  images/stories/bandeau/) .

2 - Hauteur en pixels "Height in pixels" : Définit la hauteur  qu' ISS tentera d'utiliser pour afficher les images.

3 - Largeur en pixels "Width in pixels" : Définit la largeur  qu' ISS tentera d'utiliser pour afficher les images.

4 - Transition Delay :  Fixe un délai, en millisecondes, de transition entre deux images consécutives.  Une  valeur faible permet d'accélérer la transition, une valeur plus élevée va ralentir la transition,

5 - Next Image Delay :  Définit le temps d'affichage de l'image  en millisecondes,

6 - Titre du diaporama "Slideshow title" : Définit le marqueur «alt» sur l'image afin qu'il s'affiche  lorsque le curseur "passe" sur l'image.

7 - Adresse (URL) : Définit l'URL à laquelle le navigateur ira si l'image est cliquée. Fonctionne en tandem avec "Enable Link?"  (Une seule adresse est possible pour l'ensemble du diaporama)

8 - Séquence d 'affichage "Display Sequence?" : Détermine les séquences  d'affichage des images.  "Désactiver" affiche les images dans l'ordre  du répertoire source.  "Shuffle" va charger les images et les placer ensuite dans un ordre pseudo-aléatoire pour les afficher. Le même cycle se répétera ensuite. “ Sorted ” les images sont triées par nom de fichier' exemple "img1.jpg" est suivi par "img2.jpg ) Le même cycle se répétera ensuite."Totally Random" les images sont affichées de façon aléatoire.

1colibri-diffusion - association loi 1901 - SIREN 512 551 615