Astuce - Image dans une shadowbox au chargement d'une page

Information importante

En raison d'un grand nombre d'inscriptions de spammers sur notre site, polluant sans relache notre forum, nous suspendons la création de compte via le formulaire de "sign up".

Il est néanmoins toujours possible de devenir adhérent•e en faisant la demande sur cette page, rubrique "Inscription" : https://www.drupal.fr/contact


De plus, le forum est désormais "interdit en écriture". Il n'est plus autorisé d'y écrire un sujet/billet/commentaire.

Pour contacter la communauté, merci de rejoindre le slack "drupalfrance".

Si vous voulez contacter le bureau de l'association, utilisez le formulaire disponible ici, ou envoyez-nous un DM sur twitter.

Submitted by b.one on

Bonjour, voila un petite astuce que je souhaite partager, comme j'ai mis un peu de temps à la trouver.

le but est de pouvoir afficher automatiquement, au chargement d'une page, une image dans une shadowbox. Dans mon cas l'utilité est de mettre en avant l'affiche d'un évènement prochain organisé par mon asso, bref...

Avant tout, récupérer les fichiers shadowbox.js et shadowbox.css ici : http://www.shadowbox-js.com/download.html

ensuite, ajouter ce code (et l'adapter évidemment) au fichier page.tpl.php de votre template :

<link rel="stylesheet" type="text/css" href="http://.../shadowbox.css">
<script type="text/javascript" src="http://.../shadowbox.js"></script>
Shadowbox.init({skipSetup: true,});
var url=document.location.href;
if ((url == "http://www.votre-site.com/url-de-la-page-ou-afficher-le-lightbox") || (url == "http://www.votre-site.com/un-deuxieme-url-eventuellement"))
{
window.onload = function()
Shadowbox.open(
{
content: 'http://www.url-de-l'image-a-afficher.jpg',
player: 'img',
});
};
}
</script>

voila, j'espère que ce sera utile pour quelqu'un un jour!

Forum : 
Développement
Tags : 
chargement de page
shadowbox