En poursuivant votre visite de ce site, vous acceptez l'utilisation de cookies pour permettre ses différents services. Voir les Mentions légales.
 
 
 
Vous êtes ici :   Accueil » Informations Camera
 
 
 
    Imprimer la page...
    Imprimer la section...

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.

majdoc.gif 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
 majdoc.gif

Valeurs par défaut dans Camera
Si vous ne modifiez pas la partie suivante :


<script>
jQuery(function(){ /* initialisation camera_wrap_1 */
            jQuery('#camera_wrap_1').camera({
                ......
            });
        });
</script>


ce sont ces valeurs qui s'appliqueront et vous pouvez utiliser la liste ci-dessous pour modifier certains éléments, en commentaires les différentes possibilités. Attention à bien respecter la présence ou non des apostrophes

alignment            : 'topCenter', //Alignement : topLeft, topCenter, topRight, centerLeft, center, centerRight, bottomLeft, bottomCenter, bottomRight
autoAdvance            : true,    //Avance automatique : true, false
mobileAutoAdvance    : true, //Avance automatique pour mobile : true, false
barDirection        : 'leftToRight',    //Avance du loader bar : leftToRight, rightToLeft, topToBottom, bottomToTop
barPosition            : 'bottom',    //Position du loader bar : bottom, left, top, right
cols                : 6, //Nombre de colonnes lors de certaines transitions
easing                : 'easeInOutExpo',    //Liste complète ici (lien corrigé) :
https://api.jqueryui.com/easings/ parmi les plus simples : linear, swing mais il y en a beaucoup d'autres...
mobileEasing        : '',    //Laisser vide pour le même effet sur mobile
fx                    : 'random',    //Type de transition : random, simpleFade, curtainTopLeft, curtainTopRight, curtainBottomLeft,  curtainBottomRight,  curtainSliceLeft, curtainSliceRight, blindCurtainTopLeft, blindCurtainTopRight, blindCurtainBottomLeft,  blindCurtainBottomRight, blindCurtainSliceBottom, blindCurtainSliceTop, stampede, mosaic, mosaicReverse, mosaicRandom,  mosaicSpiral,  mosaicSpiralReverse, topLeftBottomRight, bottomRightTopLeft, bottomLeftTopRight, topRightBottomLeft, scrollLeft, scrollRight, scrollTop, scrollBottom
                                //On peut utiliser plusieurs effets, placer alors une virgule entre chaque: 'simpleFade, scrollRight, stampede'
mobileFx            : '',    //Laisser vide pour le même effet sur mobile
gridDifference        : 250,    //Ralentit le défilement des blocs : la valeur doit ête inférieure à transPeriod
height                : '67%',    //Hauteur : par exemple '300px', 'auto'... mais le plus efficace en ratio des images : H / L exprimé en %
imagePath            : 'images/',    //Dossier dans lequel est contenu un certain nombre d'images servant à Camera :
ne pas modifier
hover                : true,    //Pause de Camera au survol (ne fonctionne pas pour les mobiles) : true, false
loader                : 'pie',    //Type de loader ou sans loader : pie, bar, none
loaderColor            : '#eeeeee', //Couleur du loader
loaderBgColor        : '#222222', //Couleur du fond du loader
loaderOpacity        : .8,    //Opacité du loader : 0, .1, .2, .3, .4, .5, .6, .7, .8, .9, 1
loaderPadding        : 2,    //Marges intérieures du loader en pixels
loaderStroke        : 7,    //Epaisseur du loader en pixels (si pie est choisi : doit être inférieure à la moitié de pieDiameter)
minHeight            : '',    //Hauteur mini : peut être laissé vide
navigation            : true,    //Présence des flèches de navigation : true, false
navigationHover        : true,    //Flèches de navigation et bouton playPause visibles uniquement au survol de Camera : true, false
mobileNavHover        : true,    //Idem mais pour mobile
opacityOnGrid        : false,    //Effet de fondu sur les blocs de la grille : true, false
overlayer            : true,    //Calque sur les images pour éviter la récupération de celles-ci avec un clic bouton droit du visiteur (.camera_overlayer) : true, false
pagination            : false, //Présence des boutons de pagination : true, false
playPause            : true,    //Présence du bouton playPause : true, false
pauseOnClick        : true,    //Pause avec un clic sur Camera : true, false
pieDiameter            : 38, //Diamètre du loader pie en pixels
piePosition            : 'rightTop',    //Position du loader pie : rightTop, leftTop, leftBottom, rightBottom
portrait            : true, //Recadrage : true, false. Sélectionnez true si vous ne voulez pas que vos images soient recadrées
rows                : 4, //Nombre de lignes lors de certaines transitions
slicedCols            : 12,    //Si 0 : même valeur que cols
slicedRows            : 8,    //Si 0 : même valeur que rows
slideOn                : 'random',    //Transition : Décider si l'effet de transition sera appliqué à la diapositive actuelle (prev) ou suivante (next) : next, prev, random
thumbnails            : false, //Présence de vignettes : true, false
time                : 2000,    //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

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é)

une image
encore une image...
que d'images !

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é.


Date de création : 12/02/2016 @ 13:54
Dernière modification : 28/02/2019 @ 17:13
Catégorie : Astuces - Camera
Page lue 70116 fois


Réactions à cet article


Personne n'a encore laissé de commentaire.
Soyez donc le premier !