Comment afficher des images dans des fenêtres modales
Comment ça marche
Pour rendre l’affichage des images plus convivial pour les utilisateurs, vous pouvez configurer l’ouverture des images dans des fenêtres modales au moyen d’un code HTML personnalisé. Pour ce faire, utilisez une solution existante ou ajoutez votre propre code.
Comment configurer
Utiliser une solution existante
- Ouvrez votre projet dans le Compte utilisateur.
- Dans la barre latérale, cliquez sur Site Builder.
- Cliquez sur Open Site Builder.
- Ajoutez l'image au bloc requis. Les options possibles sont :
- Description ;
- Gallery.
- Insérez le code suivant dans le bloc Custom code :
Copy
- html
<script>
(function () {
var blocks = ['.block--description', '.block--gallery'];
var style = document.createElement('link');
style.rel = 'stylesheet';
style.href = 'https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css';
document.getElementsByTagName('head')[0].appendChild(style);
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js';
script.addEventListener('load', function () {
var fancyBoxClass = 'image-fancybox';
blocks.forEach(function (block) {
$(block)
.find('[data-bg]')
.toArray()
.forEach(function (element) {
var url = element.getAttribute('data-bg')
.replace('url(', '')
.replace(')', '')
.replace('"', '')
.trim();
if (url === '') {
return;
}
$(element)
.parent()
.wrap('<a style="width: 100%; height: 100%;" class="' + fancyBoxClass + '" href="' + url + '"></a>');
});
});
$('.' + fancyBoxClass)
.fancybox();
}, false);
document.getElementsByTagName('body')[0].appendChild(script);
})();
</script>
- Dans le paramètre
blocks, spécifiez les noms des classes CSS des blocs auxquels appliquer cette fenêtre modale. Utilisez des virgules pour séparer les noms. S'il existe plusieurs blocs identiques sur votre site, ces paramètres seront appliqués à tous. Les options possibles sont :- .block--description (bloc Description) ;
- .block--gallery (bloc Gallery).
- Cliquez sur Preview pour visualiser vos modifications.
Regardez le tutoriel vidéo pour ces instructions :
Ajouter votre propre code
- Dans le constructeur, cliquez sur Add block et sélectionnez Custom code.
- Insérez votre propre code dans le bloc.
Cet article vous a été utile ?
Merci pour votre commentaire !
Nous examinerons votre message et l'utiliserons pour améliorer votre expérience.Liens utiles
Dernière mise à jour:
26 Mars 2024
Faute de frappe ou autre erreur dans le texte ? Sélectionnez le texte concerné et appuyez sur Ctrl+Entée.
