adHoc.71site.fr

→ Un Édito "Mobile Friendly" avec Camera

Le slider ci-dessous (le même type d'édito que sur ce site) utilise les fonctions natives de Camera, et d'autres instructions qui lui permettent de générer une étiquette "thème" mais surtout une instruction en javascript lui permettant, en fonction de la taille de l'écran d'affichage, de placer le texte au dessous de l'image et non plus à sa droite : Ce slider devient donc "Mobile Friendly" ! Testez son affichage sur smartphone...

La demande initiale de ce travail a été faite par Olivier (OMT, développeur initial du plugin "sommaire" pour le CMS GuppY. Il a adopté à présent adHoc pour un de ses sites ( https://www.billard-passion.fr ) et pour celui-ci, utilise une des skins que je propose ainsi que plusieurs Modules que j'ai mis en ligne...), merci à lui de m'avoir fait chercher ces astuces et d'utiliser des outils mis à disposition ici pour adHoc...

Le code, ci-dessous est commenté le plus possible. Vous pouvez vous référer utilement au tutoriel initial de Camera afin d'en comprendre les différentes options.

Ces deux premières parties [style]...[/style] et [script]...[/script] sont à placer dans le code source au début de la page, de la boîte qui vous servira d'édito...

<style type="text/css">
.camera_wrap { /* bordure : epaisseur, nature, couleur, arrondi */
    border: 0px solid rgb(255, 255, 255);
    border-radius: 0px;    
}
.camera_prev, .camera_next, .camera_commands {	/*position navigation*/
    top: 90%;	
}
.camera_caption > div { 
    padding : 50% 10% 5% 10%; /*marges intérieures conteneur texte*/
}
.camera_caption { /*texte général*/
    right:0; /*placement texte*/
    display: block;
    position: absolute;
    width: 30%; /*largeur*/
    background: rgba(25, 25, 25, 0.7); /*couleur de fond et opacité*/
    color: rgb(255, 255, 255); /*couleur texte*/
    font-family : Verdana, Arial, Helvetica, sans-serif; /*police*/
    font-weight: 300; /*épaisseur police*/
    font-size : 2.5rem; /*taille police*/
}
@media screen and (min-width: 760px), screen and (min-device-width: 760px) { /* au delà de 760px de largeur (WEB) */
.camera_caption { /*texte général*/
    top:0; /* pour réserver la position en haut à cette disposition particulière*/}
} /* fin dispositions min-width: 760px */
.camera_caption theme { /*étiquette thème*/
    position: absolute;
    width:100%; /*largeur // à la zone caption*/
    height:4rem; /*hauteur*/
    border-radius:.5rem; /*arrondis*/
    text-align:center; /*centrage texte*/
    background: #FF0000; /*couleur de fond*/
    color:#FFFF80; /*couleur texte*/
    text-transform: lowercase; /*minuscules*/
    font-weight: 200; /*épaisseur police*/
    font-size : 3rem; /*taille police*/	
    top: 10%; /*position haut*/
    left: -40%; /*position gauche*/
}
.camera_caption a { /*lien dans le texte*/
    color: rgb(237, 135, 35); /*couleur texte*/
    font-variant: small-caps; /*petites majuscules*/
    font-weight: 100; /*épaisseur police*/
    font-size : 1.8rem; /*taille police*/
    padding-left:10%; /*marge intérieure gauche*/
}
.camera_caption a:hover { /*lien survolé dans le texte*/
    color: rgb(237, 237, 0); /*couleur texte*/
    text-decoration : underline; /*soulignage*/
}
.camera_wrap .camera_pag .camera_pag_ul { /* position des boutons de pagination */
    text-align: center; /*centrage texte*/
}
.fluid_container { /* reglage max en largeur et % d'occupation */
    margin: 0 auto; /*marges extérieures*/
    max-width: 1000px; /* valeur maximum du container de Camera */
    width: 100%; /*largeur*/
}
@media screen and (max-width: 760px), screen and (max-device-width: 760px) { /* inférieur à 760px de largeur (MOBILE) */
.camera_prev, .camera_next, .camera_commands {	/*position navigation*/
    top: 10%;	
}
.camera_caption > div { 
    padding : 5% 10% 5% 10%; /*marges intérieures conteneur texte*/
}
.camera_caption { /*texte général*/
    bottom:0; /*placement texte*/
    font-size : 1.8rem; /*taille police*/
    width: 100%; /*largeur*/
    height:50%; /*hauteur en % de la hauteur totale (image + caption) !!forcément inférieur à 100%!! */
}
.camera_caption a { /*lien dans le texte*/
    font-size : 1.6rem; /*taille police*/
}
.camera_caption theme { /*étiquette thème*/
    font-size : 2.5rem; /*taille police*/
    height:3.5rem; /*hauteur*/	
    width:80%; /*largeur // à la zone caption*/
    top: -10%; /*position haut*/
    left: 5%; /*position gauche*/
}
} /* fin dispositions max-width: 760px */
</style>

<script>
if (window.matchMedia("(min-width: 760px)").matches) {
  /* Pour écrans de dimension supérieure ou égale à 760 px de largeur */
  
jQuery(function(){ /* initialisation camera_wrap_1 */
            jQuery('#camera_wrap_1').camera({
                alignment : 'centerLeft', // alignement de l'image
		hover : true, // true / false : pause au survol
                loader : 'none', //Type de loader ou sans loader : pie, bar, none
                fx : 'topLeftBottomRight, bottomRightTopLeft, simpleFade', //Type de transition
                height: '52.5%', // ratio de l'affichage : H.image / L.image * %L.image.souhaitée : exprimé en % 
                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 : 500, //Temps d'affichage d'une transition en  millisecondes
                pagination : true // true / false : présence des boutons de pagination
            });
        }); 
		
} else {
  /* Pour écrans de dimension inférieure à 760 px de largeur */
  
jQuery(function(){ /* initialisation camera_wrap_1 */
            jQuery('#camera_wrap_1').camera({
                alignment : 'topCenter', // alignement de l'image
		navigationHover : false, //affichage permanent boutons de navigation
		mobileNavHover : false, //affichage permanent boutons de navigation mobile (ces 2 lignes indispensables!!)
                loader : 'none', //Type de loader ou sans loader : pie, bar, none
                fx : 'topLeftBottomRight, bottomRightTopLeft, simpleFade', //Type de transition
                height: '150%', // ratio des images : 100 * H.image / (100-%HauteurCaption.souhaitée) / L.image : exprimé en % 
                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 : 500, //Temps d'affichage d'une transition en  millisecondes
                pagination : true // true / false : présence des boutons de pagination
            });
        });
		
}
</script>

NB : Il est aussi possible de placer ces deux codes dans des fichiers spécifiques (ici : respectivement editomobilefriendlycamera.css et editomobilefriendlycamera.js et placés dans des dossiers généraux css et js des skins) sans les balises [style] et [script] et de les appeler au début du code source ainsi (adapter les noms et les chemins à votre configuration) :

    <link charset="utf-8" href="skin/css/editomobilefriendlycamera.css" rel="stylesheet" />
    <script src="skin/js/editomobilefriendlycamera.js" type="text/javascript" charset="utf-8"></script>

Cette façon de faire allège le code de la page, et permet en un simple copier-couper de pouvoir travailler lisiblement sur le texte dans l'éditeur, puis de rétablir cet appel avec un simple coller...

Dans la partie [style], les instructions @media screen permettent de modifier les réglages en fonction de la largeur d'affichage.

Dans la partie [script], l'instruction window.matchMedia permet de choisir quel script de Camera appeler en fonction de la largeur d'affichage.

Les images font 700*525px (ratio de 0.75) avec un affichage de la zone de texte à 30% en largeur, (évidemment 70% pour l'image) d'où height : '52.5%' en script Web (voir formule : 525/700*70%= 0,525).

NB :
→ on pourrait imaginer une zone de texte à 28% (72% pour les mêmes images) et donc une nouvelle valeur de height à (voir formule : 525/700*72%=0,54) 54%...
→ on pourrait imaginer une zone de texte à 40% (60% pour les mêmes images) et donc une nouvelle valeur de height à (voir formule : 525/700*60%=0,45) 45%...
→ etc... en respectant le ratio image ici de 0.75 (525/700).

En Mobile on souhaite ici 50% de la hauteur totale pour le texte, d'où height : '150%' en script Mobile (voir formule : 100*525/(100-50)/700=1,5 d'où 150% pour height).

NB :
→ on pourrait imaginer un texte à 40% de la hauteur totale (60% restant en hauteur pour l'image avec les mêmes images) [donc une formule 100*525/(100-40)/700 = 1,25 ] et donc une nouvelle valeur de height à 125%...
→ on pourrait imaginer un texte à 25% de la hauteur totale (75% restant en hauteur pour l'image avec les mêmes images) [donc une formule 100*525/(100-25)/700 = 1 ] et donc une nouvelle valeur de height à 100%...
→ etc... en respectant le ratio image de 0.75.

La partie suivante : choix des images, textes, liens... est commune aux deux types d'affichage...

Cette partie est à placer dans le code source à l'endroit ou vous souhaitez l'affichage du slider Camera...

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

<div data-link="https://www.ffbillard.com/" src="images/test_camera/billard-carambole.jpg" data-target="_blank">
<div class="camera_caption fadeFromRight">
  <theme>carambole</theme><br />
Billard français<br />
<a href="https://www.ffbillard.com/pages/discipline-carambole-52.html" target="_blank">» règles</a><br />
<a href="https://www.ffbillard.com/" target="_blank">» ff billard</a>
</div><!-- camera_caption -->
</div>

<div data-link="https://www.ffbillard.com/" src="images/test_camera/billard-americain.jpg" data-target="_blank">
<div class="camera_caption fadeFromRight">
  <theme>américain</theme><br />
Billard américain<br />
<a href="https://www.ffbillard.com/pages/discipline-americain-50.html" target="_blank">» règles</a><br />
<a href="https://www.ffbillard.com/" target="_blank">» ff billard</a>
</div><!-- camera_caption -->
</div>

<div data-link="https://www.ffbillard.com/" src="images/test_camera/billard-snooker.jpg" data-target="_blank">
<div class="camera_caption fadeFromRight">
  <theme>snooker</theme><br />
Billard snooker<br />
<a href="https://www.ffbillard.com/pages/discipline-snooker-53.html" target="_blank">» règles</a><br />
<a href="https://www.ffbillard.com/" target="_blank">» ff billard</a>
</div><!-- camera_caption -->
</div>

<div data-link="https://www.ffbillard.com/" src="images/test_camera/billard-8pool.jpg" data-target="_blank">
<div class="camera_caption fadeFromRight">
  <theme>blackball</theme><br />
Billard blackball ou 8-pool<br />
<a href="https://www.ffbillard.com/pages/discipline-blackball-51.html" target="_blank">» règles</a><br />
<a href="https://www.ffbillard.com/" target="_blank">» ff billard</a>
</div><!-- camera_caption -->
</div>

</div><!-- camera_wrap -->
</div><!-- fluid_container -->

Le chemin des images est à adapter à votre configuration... Ici, il y a des liens sur les images (data-link) avec des cibles (data-target : nouvelle ouverture de page), mais ils peuvent être supprimés.

Les balises [br /] servent à passer à la ligne dans le texte (caption).

Les balises [a href...] ... [/a] servent, de manière classique, à placer des liens sur le texte placé entre ces deux balises.

Il sera peut-être nécessaire de rendre transparent le fond de votre boîte... en édito... ou ailleurs... pour cela et pour tout le reste...

N'hésitez pas à poster sur le forum de ce site pour plus d'informations ou d'aides.