Informations Camera

Intégration de diaporamas Camera dans GuppY

 Sur ce site, ci-dessus, dans les menus supérieurs de modestes utilisations de Camera...

Camera est libre, gratuit, responsive design et sa taille s'adapte à tous les écrans.
C'est une création de Manuel Masia. Il n'est plus soutenu par celui-ci, mais, on peut trouver encore des informations ici : https://github.com/pixedelic/Camera

GuppY (depuis la version 5.00.03 jusqu'à la version 5.02.01) possède Fotorama, lui aussi responsive design et utilisable assez facilement.

Et depuis la version 5.02.02, un slider Unite Gallery est intégré, y compris en administration (donc un peu plus facile à mettre en oeuvre - voir sur freeGuppY.org les tutoriels dédiés-). Camera demeure malgré tout un excellent slider qui peut compléter utilement la panoplie des ressources de GuppY... et d'autres CMS.

Avantages de Camera par rapport à Fotorama :

Beaucoup de transitions différentes entre les diapos,
Possibilité de modifier l'effet de transition,
Affichage de titres et possibilité de varier l'effet d'apparition de ces titres,
Possibilité de créer un hyperlien dans les titres et/ou dans les images.

Inconvénient de Camera :

Si il est intégré « au cœur de GuppY », il peut apparaître plusieurs fois en même temps : boite libre en header, en footer ou dans une boite latérale, et dans les articles, mais il faudra prendre la précaution de numéroter l'id ( camera_wrap_1 camera_wrap_2 camera_wrap_3 etc...) le même id peut être utilisé plusieurs fois s'ils ne sont pas affichés ensemble (les articles par exemple).

Cependant, pour avoir des réglages de styles différents, il est nécessaire de ne l'utiliser que dans des articles, faute de quoi, le réglage de style du premier affiché s'appliquera à tous les autres.

Il est possible de contourner cet inconvénient en affichant Camera dans un iframe...

Toutes ces solutions, Camera « au cœur de GuppY » et/ou dans un iframe, Fotorama et Unite Gallery peuvent tout à fait cohabiter.

Mise en place des tests

à titre d'exemple : un dossier contenant quelques images test_camera à placer dans le dossier photo de GuppY (l'installer en admin avec l'installateur de GuppY ou le décompresser et installer par FTP)

Installation au cœur de GuppY (inutile entre les versions GuppY 5.01.02 et 5.02.01 qui l'ont intégré) :

Pour une version de GuppY 5.0 plus ancienne ou pour une version qui a démarré à partir de la version GuppY 5.02.02, récupérer ce zip integration_camera et l'installer en admin avec l'installateur de GuppY ou le décompresser et installer par FTP.

dans inc/csshead/
    le dossier images
    et le fichier camera.css
dans inc/jshead/
    les fichiers camera.js
    jquery.easing.1.3.js
    jquery.mobile.customized.min.js

il suffit ensuite dans le code source d'un article ou d'une boite libre de rentrer ce type de code (le copier et le coller) :

(voir en bas de cet article ce que cela rend)

<style type="text/css">
.camera_wrap { /* bordure : epaisseur, nature, couleur, arrondi */
    border: 3px solid rgb(255, 85, 0);
    border-radius: 3px;    
}
.camera_caption { /* couleur du texte */
    color: rgb(0, 0, 0);
}
.camera_caption > div { /* couleur du fond de texte et transparence */
    background: rgba(255, 255, 255, 0.8);
}
.camera_wrap .camera_pag .camera_pag_ul { /* position des boutons de pagination */
    text-align: left;
}
.fluid_container { /* reglage max en largeur et % d'occupation */
    margin: 0 auto;
    max-width: 800px; /* valeur maximum du container de Camera */
    width: 96%;
}
</style>

<script>
jQuery(function(){ /* initialisation camera_wrap_1 */
            jQuery('#camera_wrap_1').camera({
                thumbnails: false, /* true / false : présence de vignettes */
                height: '25%', /* ratio des images : H / L exprimé en % */
                pagination: true /* true / false : présence des boutons de pagination */
            });
        });
</script>

<div class="fluid_container">
<div class="camera_wrap camera_white_skin" id="camera_wrap_1">

<div data-link="https://pixabay.com/fr" data-src="photo/test_camera/Image0005.jpg" data-target="_blank">
<div class="camera_caption fadeFromLeft">une image</div>
</div>

<div data-src="photo/test_camera/Image0006.jpg">
<div class="camera_caption fadeFromRight">encore une image</div>
</div>

<div data-src="photo/test_camera/Image0007.jpg">
<div class="camera_caption fadeFromTop">toujours une image... <a href="https://pixabay.com/fr" target="_blank">Incroyable ! Ici des images libres de droits</a></div>
</div>

<div data-src="photo/test_camera/Image0008.jpg">
<div class="camera_caption fadeFromBottom">que d'images !</div>
</div>

</div>
</div>

ATTENTION : Les deux premières parties <style> </style> et <script> </script> sont à placer au début du code source.

La première partie entre les balises <style> et </style> sert à fixer la taille, la nature, la couleur de la bordure, ainsi que la couleur, le fond du texte, éventuellement la position des boutons de pagination, et le réglage maximum en largeur et le pourcentage d'occupation de Camera en largeur. Quelques uns de ces réglages existent par défaut dans camera.css et ce sont ceux-ci qui s'appliqueront si ils ne sont pas modifiés dans le code source. (ATTENTION : voir ce qui est écrit plus haut sur les limitations de ce réglage de style)

pour info, les couleurs, sont ici codées en RVB : voir ici

La seconde partie entre les balises <script> et </script> sert à démarrer Camera (C'est là qu'il faut numéroter les utilisations de Camera : #camera_wrap_1 #camera_wrap_2 #camera_wrap_3 etc...) et à lui passer certaines variables. Celles-ci sont présentes dans camera.js et si elles ne sont pas modifiées dans le code source, ce sont celles-ci qui s'appliquent.

Le site de l'auteur n'est plus en ligne.
J'ai donc repris, ici, la liste la plus détaillée possible des options 

Pour l'option easing suivre ce lien qui détaille et fait visualiser les différentes possibilités : https://api.jqueryui.com/easings/

Il est donc tout à fait possible d'avoir une partie script sous la forme

<script>
jQuery(function(){ /* initialisation camera_wrap_1 */
            jQuery('#camera_wrap_1').camera({
                thumbnails: false, /* true / false : présence de vignettes */
                height: '75%', /* ratio des images : H / L exprimé en % */
                fx: 'simpleFade, scrollRight, mosaic', /* différentes transitions possibles */
                pieDiameter: 40, /* diamètre du loader pie */
                piePosition: 'leftTop' /* position du loader si celui-ci est pie */
                time: 4000,    /* En millisecondes : entre la fin d'un effet et le début du suivant (temps d'affichage du loader s'il est présent) */
                transPeriod: 1000,    /* Temps d'affichage d'une transition en millisecondes */
                navigation: false, /* true / false : présence des flèches de navigation */
                playPause: false, /* true / false : présence du bouton playPause */
                pagination: false /* true / false : présence des boutons de pagination */
            });
        });
</script>

La troisième partie (à placer où vous le souhaitez) contient

¤ la skin (ici camera_white_skin pour la couleur des boutons)

¤ les sources des images (pour la première d'entre elles, un hyperlien)

Pour créer un hyperlien sur l'image, il suffit dans le <div> qui contient l'image d'avoir ce type de code :
<div data-link="https://pixabay.com/fr" data-src="photo/test_camera/Image0005.jpg" data-target="_blank">

¤ et les titres ainsi que l'apparition de ces titres (pour le troisième d'entre eux un hyperlien)

Pour créer un hyperlien sur le titre, il suffit dans le <div> qui contient le titre d'avoir ce type de code :
<div class="camera_caption fadeFromTop">toujours une image... <a href="https://pixabay.com/fr" target="_blank">Incroyable ! Ici des images libres de droits</a></div>

¤ C'est là aussi qu'il faudra numéroter les utilisations de Camera ( id="camera_wrap_1" camera_wrap_2 camera_wrap_3 etc...)

Dans vos essais, remplacer évidemment  photo/test_camera/Image0005.jpg  etc... par vos propres dossiers d'images, les images ont ici les mêmes dimensions 1000px*250px
soit H / L =0.25 =25% ici d'où height: '25%'

¤ Pour les skins de Camera, en voici la liste :

camera_amber_skin  |  camera_ash_skin  |  camera_azure_skin  |  camera_beige_skin  |  camera_black_skin  |  camera_blue_skin  |  camera_brown_skin  |  camera_burgundy_skin  |  camera_charcoal_skin  |  camera_chocolate_skin  |  camera_coffee_skin  |  camera_cyan_skin  |  camera_fuchsia_skin  |  camera_gold_skin  |  camera_green_skin  |  camera_grey_skin  |  camera_indigo_skin  |  camera_khaki_skin  |  camera_lime_skin  |  camera_magenta_skin  |  camera_maroon_skin  |  camera_orange_skin  |  camera_olive_skin  |  camera_pink_skin  |  camera_pistachio_skin  |  camera_pink_skin  |  camera_red_skin  |  camera_tangerine_skin  |  camera_turquoise_skin  |  camera_violet_skin  |  camera_white_skin  |  camera_yellow_skin

 ¤ Pour la façon dont les titres "camera_caption ..." s'affichent, il y a diverses possibilités, à savoir :

"moveFromLeft", "moveFromRight", "moveFromTop", "moveFromBottom", "fadeIn", "fadeFromLeft", "fadeFromRight", "fadeFromTop", "fadeFromBottom"

Contacter le webmestre de ce site pour plus d'informations.

Ci-dessous le diaporama tel qu'il est décrit au dessus

(à part les titres en gras et le lien surligné)

Petite astuce : On peut ajouter dans le fichier styleplus.css de sa skin

.FB298 { /* boite camera */
color: inherit;
background: transparent;
}

298 étant le n° de la boite libre (Remplacez par votre propre numéro). La boite sera donc transparente. Et si en plus on écrit son titre de cette manière :

§Mon-Titre

alors, le bandeau titre n'apparaitra pas et le slideshow Camera sera parfaitement intégré.