• 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

  • ...un Audio Player dans un Iframe... ...et un autre intégré dans Guppy

  • ...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 dédiés : WaterwheelCarousel et FeatureCarousel.

  • 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

  • Audio-Players

    Audio-Players

    ¤ Un Audio-player à mettre en place dans un iFrame. Il affiche les pochettes d'album des morceaux qui sont joués. Léger et "customisable", quelques skins en téléchargement lui sont destinées. Il peut être amélioré ! Adeptes du Javascript... à vos claviers ! wink

    Lisez le tutoriel

    ¤ Un deuxième Audio-player simple 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 à la dernière version (GuppY 5.01.07 et +). Elles peuvent être testées sur Démo-skins.

    Démo-skins

    Zone de téléchargement

    FAQ (voir pour les skins version 5.02.00)

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

imasso.gif

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 le menu supérieur de modestes utilisations de Camera...

Camera est libre, gratuit, responsive design et sa taille s'adapte à tous les écrans.
Voir ici : http://www.pixedelic.com/plugins/camera/wp.php


GuppY (depuis la version 5.00.03) possède Fotorama, lui aussi responsive design et utilisable facilement voir ici sur le site de Papinou :

http://www.papinou.info/articles.php?lng=fr&pg=8515&mnuid=7772&tconfig=0

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 », dans un iframe et Fotorama 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 depuis la version GuppY 5.01.02 qui l'intègre déjà) :

Pour une version de GuppY 5.0 plus ancienne, 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.

Liste détaillée des options ici : http://www.pixedelic.com/plugins/camera/

(ATTENTION pour l'option easing ne pas suivre le lien du site ci-dessus, mais celui-ci 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 diverses possibilités ici :
http://www.pixedelic.com/plugins/camera/
à 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, en l'hommage à notre petit poisson, 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 (comme le propose Papinou sur la page évoquée plus haut dans cet article) 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
Catégorie : Astuces - Camera
Page lue 5574 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


  Nombre de membres 29 membres
Connectés :
( personne )
Snif !!!
Lettre d'information
Pour avoir des nouvelles de ce site, inscrivez-vous à notre Newsletter.
YBPt
Recopier le code :
10 Abonnés