Chez Papinou - Skins GuppY

 
Vous êtes ici :   Accueil » Fotorama : Un diaporama simple
    Imprimer la page...
Texte à méditer :   GuppY 6 ???   Il y a moins bon mais c'est plus cher ! ! !   
Texte à méditer :   S'il n'y a pas de solution, c'est qu'il n'y a pas de problème. Devise Shadok   
Texte à méditer :   Utilisateur de GuppY, je suis membre de l' asso freeGuppY ... et vous ? ? ?   
Texte à méditer :   Pourquoi vouloir compliquer ?  Essayez GuppY 6  tout simplement  !!!   
Texte à méditer :   N'oubliez pas de protéger l'accès à  l'admin de GuppY 6.   
Texte à méditer :   Votre premier réflexe après le téléchargement de GuppY 6 ?   Lire la documentation  ! ! !   

Contact

Fotorama : Un diaporama simple

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, Fotorama n'est plus utilisé par les galeries photos de GuppY 6.

Vous devez le télécharger sur ce lien et le réinstaller avec la fonction Installer de GuppY, c'est la version qui était intégrée à GuppY. Il n'y a pas eu de nouvelle version depuis cette date.
 

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/fotorama01/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>


Vous pouvez copier/coller le code pour le réutiliser sur votre site
Bien sur vous remplacez chaque lien relatif "photo/fotorama01/maphoto01.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 éviterez 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 styleplus.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 1920x1080, 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/fotorama01/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 chaque lien relatif  "photo/fotorama01/maphoto01.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; 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 le zip 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.


 


Date de création : 27/07/2015 @ 10:24
Dernière modification : 08/07/2019 @ 07:44
Catégorie : Astuces GuppY - GuppY 5
Page lue 15208 fois