Chez Papinou - Skins GuppY 5

 
   S'il n'y a pas de solution, c'est qu'il n'y a pas de problème. Devise Shadok   
   Utilisateur de GuppY, je suis membre de l' Asso freeGuppY ... et vous ? ? ?   
Vous êtes ici :   Accueil » Fotorama : Un diaporama simple
 
Prévisualiser...  Imprimer...  Imprimer la page...
Prévisualiser...  Imprimer...  Imprimer la section...
rss Cet article est disponible en format standard RSS pour publication sur votre site web :
https://www.papinou.fr/data/fr-articles.xml

Un diaporama facile avec Fotorama

 

Ma préférence va à Fotorama car il est responsive design et la taille s'adapte à tous les écrans.
Pour l'installation, rien à faire, Fotorama est utilisé par les galeries photos de GuppY 5 depuis la version 5.0.3
Tous les fichiers sont en place, vous n'avez qu'à mettre le bon code pour l'utiliser sans souci, la GuppY Team suit l'évolution de Fotorama.

Dans ce tutoriel, vous allez trouver plusieurs exemples d'utilisation de Fotorama avec pour chaque exemple le code et la configuration pour avoir une affichage correct.

Un exemple de code à coller  en mode source dans une boite libre:

<div style="text-align:center;margin: 0 auto;">
<div class="fotorama" data-autoplay="true" data-ratio="800/600" data-transition="crossfade" data-width="100%">
<!-- ↑ The same as data-ratio="4/3" or data-ratio="1.3333333333". -->
<img src="photo/fotorama01/maphoto01.jpg" />
<img src="photo/fotorama01/maphoto02.jpg" />
<img src="photo/fotorama01/maphoto03.jpg" />
<img src="photo/ffotorama01/maphoto05.jpg" />
<img src="photo/fotorama01/maphoto06.jpg" />
<img src="photo/fotorama01/maphoto07.jpg" />
<img src="photo/fotorama01/maphoto08.jpg" />
<img src="photo/fotorama01/maphoto09.jpg" />
<img src="photo/fotorama01/maphoto10.jpg" />
<img src="photo/fotorama01/maphoto11.jpg" />
<img src="photo/fotorama01/maphoto12.jpg" />
</div>
</div>

 
Bien sur vous remplacez "photo/fotorama01/maphoto12.jpg" par le chemin relatif vers vos photos.
 

Commentaires :

 - en premier lieu, vous devez redimensionner vos photos et les sauvegarder dans un répertoire. 900px en largeur est un maximum,  mettre plus grand ne sert à rien, le navigateur redimensionnera les photos, et ceci va ralentir l'affichage de la page de votre site.

 - dans le répertoire photo, j'ai créé un répertoire fotorama01 pour sauvegarder mes photos redimensionnées.

 - pour le code, la première ligne sert à centrer la photo sur la page, la seconde ligne contient la configuration du diaporama: data-autoplay="true" pour le démarrage automatique, data-ratio="800/600" pour les photos en 4/3, data-transition="crossfade" pour activer le fondu entre les photos, data-width="100%" pour la largeur en pourcentage pour le responsive design.

Ensuite le code pour chaque photo du répertoire, à noter : pas d'accent, pas d'espace, pas de majuscules, et jpg en minuscule.
En procédant de cette façon, vous gagnerez du temps et eviterez les problèmes.

La solution de la boite libre me parait la plus simple, ensuite il suffit de réserver cette boite au groupe privé de ton choix.
 

Pour une adaptation totale à votre skin, vous ajoutez à la fin de votre fichier style.css ceci:
 

.FB450 { /* boîte fotorama */
color: inherit;
background: transparent;
}

FB450, 450 correspond à l'ID de la boite libre, donc vous remplacez 450 par l'ID de votre boite.
 

Si vous voulez l'afficher dans les boites du haut de la page, n'oubliez pas le § devant le titre de la boite pour ne pas l'afficher.
Enfin vous pouvez mettre 20%, 30% ou plus pour la largeur. Attention, la hauteur sera proportionnelle à la largeur déclarée.
 

A chaque emplacement choisi, la boite libre avec le diaporama s'affichera suivant la largeur de boite que vous aurez choisi.
Je ne vois pas l'intérêt d'afficher la boite à 100% en plein écran par exemple en 1980x1080, vous allez faire fuir les visiteurs par la lenteur de l'affichage.
 

Un exemple de code à coller dans un article sans boite latérale, en pleine largeur :

<div style="text-align:center;margin: 0 auto;">
<div class="fotorama" data-autoplay="true" data-ratio="800/600" data-transition="crossfade" data-width="100%">
<!-- ↑ The same as data-ratio="4/3" or data-ratio="1.3333333333". -->
<img src="photo/fotorama01/maphoto01.jpg" />
<img src="photo/fotorama01/maphoto02.jpg" />
<img src="photo/fotorama01/maphoto03.jpg" />
<img src="photo/ffotorama01/maphoto05.jpg" />
<img src="photo/fotorama01/maphoto06.jpg" />
<img src="photo/fotorama01/maphoto07.jpg" />
<img src="photo/fotorama01/maphoto08.jpg" />
<img src="photo/fotorama01/maphoto09.jpg" />
<img src="photo/fotorama01/maphoto10.jpg" />
<img src="photo/fotorama01/maphoto11.jpg" />
<img src="photo/fotorama01/maphoto12.jpg" />
</div>
</div>

 
Bien sur vous remplacez "photo/fotorama01/maphoto12.jpg" par le chemin relatif vers vos photos.

Le code n'est pas différent, la configuration est la même mais vous pouvez la changer.
Les commentaires aussi, à l'exception des emplacements puis que le diaporama est dans un article.

Pour l'afficher vous pouvez sélectionner une boite menu lors de la création de l'article ou le laisser hors menu et l'afficher par un lien sur un mot, un groupe de mots ou un lien sur une miniature.
 

Vous aurez un lien de ce genre pour un mot, un groupe de mots:

<a href="articles.php?lng=fr&amp;pg=473&amp;tconfig=0">Diaporama</a>
 

Celui-ci pour une miniature:

<a href="articles.php?lng=fr&amp;pg=473&amp;tconfig=0"><img alt="mini.png" src="img/mini.png" style="border-width: 0px; border-style: solid; width: 96px; height: 96px; margin: 10px; float: right;" /></a>

Dans ces deux liens pg=473, 473 correpond à l'ID de l'article.

La totalité des paramètres de configuration se trouve sur cette page (en anglais), ne testez pas sur un site en production.
 

Important !

Ne remplacez pas la version incluse dans GuppY par une version téléchargée sur le site de Fotorama, des modifications ont été faites notamment dans les feuilles de style CSS pour obtenir la validation W3C.

à suivre


Date de création : 27/07/2015 @ 10:24
Catégorie : Astuces GuppY 5 - GuppY 5
Page lue 6160 fois

Vous êtes ici :   Accueil » Fotorama : Un diaporama simple
 
Prévisualiser...  Imprimer...  Imprimer la page...
Prévisualiser...  Imprimer...  Imprimer la section...
Préférences

Se reconnecter :
Votre nom (ou pseudo) :
Votre mot de passe
Captcha reload
Recopier le code :


  4386056 visiteurs
  9 visiteurs en ligne

Connectés :
( personne )
Snif !!!
Nouveautés du site
(depuis 30 jours)
Licence

Cette création est mise à disposition des visiteurs selon les termes de la
Toute citation doit comporter un lien direct vers la page d'origine.
 
Chez Papinou est en ligne depuis le 26.03.2006
 
Lire les mentions légales