Édito Mobile Friendly avec Camera
Utiliser Camera dans un diaporama ÉDITO "Mobile Friendly"
Le slider ci-dessous 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 OMT (développeur du plugin "sommaire"), merci à lui de m'avoir fait chercher ces astuces...
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.
Cette première partie est à placer dans le code source au début de l'article, de la page, de la boite libre...
<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 : 35% 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 : 3.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 (WEB) */
.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 : 2.5rem; /*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 : 3rem; /*taille police*/
width: 100%; /*largeur*/
height:50%; /*hauteur en % de la hauteur totale (image + caption) !!forcément inférieur à 100%!! */
}
.camera_caption theme { /*étiquette thème*/
width:50%; /*largeur // à la zone caption*/
top: -5%; /*position haut*/
left: 5%; /*position gauche*/
}
} /* fin dispositions max-width: 760px (MOBILE) */
</style>
<script>
if (window.matchMedia("(min-width: 760px)").matches) {
/* Pour écrans de dimension supérieure ou égale à 760 px de largeur (WEB)*/
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 / L 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 (MOBILE) */
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 : 100H/(100-%HauteurCaption)/L 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>
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.
C'est dans l'utilisation judicieuse de ces deux premières parties que réside l'aspect "Mobile Friendly" de ce dispositif.
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)
NB :
on pourrait imaginer une zone de texte à 28% (72% pour les mêmes images) et donc une nouvelle valeur de height à 54%...
on pourrait imaginer une zone de texte à 40% (60% pour les mêmes images) et donc une nouvelle valeur de height à 45%...
etc... en respectant le ratio image de 0.75.
En Mobile on souhaite ici 50% de la hauteur totale pour le texte, d'où height : '150%' en script Mobile (voir formule)
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%...
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 seconde 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/" data-src="photo/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/" data-src="photo/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/" data-src="photo/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/" data-src="photo/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 -->
Les éléments surlignés en blanc sont à adapter à vos besoins...
Le chemin des images est à adapter à votre configuration... Ici, il y a des liens sur les images, mais ils peuvent être supprimés.
Les balises <br /> servent à passer à la ligne.
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 boite libre... en édito... ou ailleurs... Tout dépend de la position de cette boite, en WEB et/ou en MOBILE... donc, 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.
Catégorie : - Camera
Page lue 102564 fois
