En poursuivant votre visite de ce site, vous acceptez l'utilisation de cookies pour permettre ses différents services. Voir les Mentions légales.
 
 
  • Sur ce site, vous trouverez : Camera ! Évidemment...

    ...mais aussi des carousels : WaterwheelCarousel par exemple...

  • ... des informations sur les iFrames responsives

    Une solution élégante pour rendre les iFrames (cadres, dans lesquels on intègre d'autres pages) "responsive design" : Ils s'adapteront automatiquement et de manière proportionnelle à la dimension de la page.

    Lisez le tutoriel

    Lisez également ces trois tutoriels : ici , ici  et  ici

    pour créer un bandeau "responsive design", constitué de cellules indépendantes, au contenu varié, à placer en haut, en bas, dans la boite édito, dans un article...de votre site.

  • ...un Audio Player dans un Iframe... ...un autre, simple, intégré dans Guppy... et... JPlayer ... intégré, lui aussi.

  • ...des images qui changent au survol de la souris... ...par exemple :

    ...mais bien d'autres effets à découvrir, notamment celui que vous êtes en train d'utiliser...

  • ...et bien sûr des skins pour habiller vos sites GuppY V5...la série "Transparences" avec ici FeatureCarousel

  • Camera

    Camera

    ¤ Camera est un slider développé par Manuel Masia. On peut l'utiliser très facilement dans GuppY. Dans ses différentes options possibles, on peut faire varier les transitions, les apparitions de titres, les vignettes de pagination. Camera peut même intégrer des vidéos ! Sur ce site quelques tutoriels pour mieux maitriser Camera.

    Informations Camera

    ¤ Deux carousels de Brian Osborne sont disponibles lisez les tutoriels : WaterwheelCarousel et FeatureCarousel.

    ¤ Deux "slideshows" sont disponibles avec ou sans JQuery : lisez les tutoriels : Accordion (CSS) et Circle Nav (JQuery).

  • iFrames

    iFrames responsives

    Une solution élégante pour rendre les iFrames (cadres, dans lesquels on intègre d'autres pages) "responsive design" : Ils s'adapteront automatiquement et de manière proportionnelle à la dimension de la page.

    Lisez le tutoriel

    Lisez également ces trois tutoriels : ici , ici  et  ici

    pour créer un bandeau "responsive design", constitué de cellules indépendantes, au contenu varié, à placer en haut, en bas, dans la boite édito, dans un article...de votre site.

  • Audio-Players

    Audio-Players

    ¤ Un Audio-player à mettre en place dans un iFrame. Léger et "customisable", quelques skins en téléchargement lui sont destinées.

    Lisez le tutoriel

    ¤ Un Audio-player simple avec playlist également peut être intégré directement dans GuppY.

    Lisez le tutoriel

    ¤ Un autre Audio-player (JPlayer) avec playlist également peut être intégré directement dans GuppY.

    Lisez le tutoriel

  • Effets au survol

    Effets au survol

    Des astuces amusantes, surtout en CSS, pour agrémenter les sites.

    Au survol de la souris : des images qui changent, qui pivotent et font apparaitre un nouveau contenu, les boutons déroulants offrant de nouvelles informations, une boîte-menu déroulante (celle-là même que vous utilisez)... et d'autres, à venir, sans doute.

    La possibilité aussi de personnaliser des infobulles dans une image mappée cliquable générée par Gimp (traitement d'image libre et gratuit). Lisez le tutoriel

    Des liens vers des tutoriels sont disponibles dans le menu "Astuces>Changements au survol"

  • Skins

    Skins pour GuppY V5

    Quelques skins sont disponibles en téléchargement pour habiller les sites GuppY. Elles sont toutes compatibles "Config Look" et adaptées aux dernières versions (à partir de GuppY 5.02.02) moyennant quelques champs à adapter dans "Config Look". Elles peuvent être testées sur Démo-skins en version 5.02.08 (et au-delà...) -ce sont celles qui sont proposées en téléchargement-.

    Démo-skins

    Zone de téléchargement

 
Vous êtes ici :   Accueil » Informations Camera
 
Prévisualiser...  Imprimer...  Imprimer la page...
Prévisualiser...  Imprimer...  Imprimer la section...
Recherche
 
Fermer

Calendrier

Astuces

 

Informations Camera

rss Cet article est disponible en format standard RSS pour publication sur votre site web :
http://www.71site.fr/data/fr-articles.xml

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'il 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é) :
http://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, bottomLeftTopRight
                                //On peut utiliser plusieurs effets, placer alors une virgule entre chaque: 'simpleFade, scrollRight, scrollBottom'
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 : http://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, scrollBottom', /* différentes transitions possibles */
                pieDiameter: 40, /* diamètre du loader pie */
                piePosition: 'leftTop' /* position du loader si celui-ci est pie */
                time: 4000,    /* milliseconds between the end of the sliding effect and the start of the next one */
                transPeriod: 1000,    /* lenght of the sliding effect in milliseconds */
                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 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 : Limite de l'intégration dans GuppY, notamment dans les boites libres (mais également quelquefois dans les articles)...

Si celles-ci ne contiennent que Camera, le corps de la boite ne s'affiche pas en totalité en hauteur. On peut résoudre ce souci en affichant sous le slider quelques caractères, car GuppY, à l'instar de la nature a horreur du vide...

par exemple, cela donne ci-dessous :

<p style="clear:both;text-align: center;">&gt;&lt;))))°&gt; ~ o ~ &lt;°((((&gt;&lt;</p>

><))))°> ~ o ~ <°((((><

ou alors un espace de manière à rendre cet ajout invisible :

<p style="clear:both;text-align: center;">&nbsp;</p>

On peut aussi 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
Dernière modification : 28/02/2019
Catégorie : Astuces - Camera
Page lue 10680 fois


Réactions à cet article


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

Vous êtes ici :   Accueil » Informations Camera

Préférences


Se reconnecter :
Votre nom (ou pseudo) :
Votre mot de passe
<O>


  Nombre de membres 44 membres
Connectés :
( personne )
Snif !!!

Lettre d'information

Pour avoir des nouvelles de ce site, inscrivez-vous à notre Newsletter.

Avant de soumettre ce formulaire, veuillez lire et accepter les Mentions légales.

J'accepte :
Recopier le code :
16 Abonnés