Image en lightbox au CHARGEMENT de la page
Résolu
angel lestat
Messages postés
256
Statut
Membre
-
rduvrac -
rduvrac -
Bonjour à la communauté,
J'ai conçu un petit site web en php (rien d'extra). J'ai voulu y mettre une petit effet lors de l'ouverture de la page index: afficher une image d'accueil au centre de la page et tout est sombre autour.
Après des recherches sur internet j'ai découvert la méthode LIGHTBOX qui donne l'effet désiré. Cependant elle ne le fait que sur des liens au clic. Alors que je le veux à l'ouverture.
Donc on m'a suggéré une fonction qui simule le clic. Voici le code dans ma page index:
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>....</title>
<!--fichiers à inclure pour le lightbox-->
<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
<script src="js/lightbox.js" type="text/javascript"></script>
<link href="styles.css" rel="stylesheet" type="text/css" />
<link href="css/lightbox.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<!-- la function qui simule le clic-->
<script language="javascript">
<!--
function simulateClick(elmt) {
if(document.all) {
elmt.fireEvent("onclick");
} else {
var evt = document.createEvent("MouseEvents");
evt.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
elmt.dispatchEvent(evt);
}
}
-->
</script>
<!-- j'utilise onload pour spécifier au chargement de la page-->
<body onload="simulateClick(document.getElementById('onload')); initLightbox();">
<a href="light.gif" rel="lightbox"><img src="light.gif" width="1" height="1" alt="" border="no" id="onload"/></a>
Maintenant le problème est que l'effet ne se produit pas à l'ouverture de la page mais plutôt après l'avoir actualisée (crtl+r / f5 / ...) sous Firefox.
Sous explorer, l'arrière-plan noir-sombre ne couvre pas tout l'écran.
Quelqu'un pourrait m'aider à corriger ca?
Dans l'attente de votre aide, merci d'avance.
J'ai conçu un petit site web en php (rien d'extra). J'ai voulu y mettre une petit effet lors de l'ouverture de la page index: afficher une image d'accueil au centre de la page et tout est sombre autour.
Après des recherches sur internet j'ai découvert la méthode LIGHTBOX qui donne l'effet désiré. Cependant elle ne le fait que sur des liens au clic. Alors que je le veux à l'ouverture.
Donc on m'a suggéré une fonction qui simule le clic. Voici le code dans ma page index:
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>....</title>
<!--fichiers à inclure pour le lightbox-->
<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
<script src="js/lightbox.js" type="text/javascript"></script>
<link href="styles.css" rel="stylesheet" type="text/css" />
<link href="css/lightbox.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<!-- la function qui simule le clic-->
<script language="javascript">
<!--
function simulateClick(elmt) {
if(document.all) {
elmt.fireEvent("onclick");
} else {
var evt = document.createEvent("MouseEvents");
evt.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
elmt.dispatchEvent(evt);
}
}
-->
</script>
<!-- j'utilise onload pour spécifier au chargement de la page-->
<body onload="simulateClick(document.getElementById('onload')); initLightbox();">
<a href="light.gif" rel="lightbox"><img src="light.gif" width="1" height="1" alt="" border="no" id="onload"/></a>
Maintenant le problème est que l'effet ne se produit pas à l'ouverture de la page mais plutôt après l'avoir actualisée (crtl+r / f5 / ...) sous Firefox.
Sous explorer, l'arrière-plan noir-sombre ne couvre pas tout l'écran.
Quelqu'un pourrait m'aider à corriger ca?
Dans l'attente de votre aide, merci d'avance.
4 réponses
-
Voilà le code à mettre pour une image :
<link rel="stylesheet" type="text/css" href="shadowbox/shadowbox.css"> <script type="text/javascript" src="shadowbox/shadowbox.js"></script> <script type="text/javascript"> Shadowbox.init({ skipSetup: true, }); window.onload = function() { Shadowbox.open({ content: 'image.png', player: 'img', }); }; </script> -
Salut.
Je doute que l'idée de simuler un clic sur un lien soit une bonne idée.
Vérifie si le script de lightbox que tu utilises te permette d'ouvrir une photo via une fonction Javascript, sans obligatoirement passer par un lien.
Si c'est le cas, tu pourras appeler cette fonction dans l'évènement onload (de l'objet window).
Je te conseille d'utiliser Shadowbox-JS : adaptables avec des frameworks JS (jQuery, Mootools, Scriptaculous, ...), peut afficher des vidéos provenants des plateformes (YouTube, Dailymotion), des animations Flash (donc aussi des vidéos hébergées sois-même), des galeries, glisser-déposer pour les grandes images, ...
https://www.shadowbox-js.com/ -
personnellement je ne m'y connais pas en javascript c'est pourquoi j'ai opté pour lightbox avec ses fichiers préfaits. C'est dans des forum qu'on m'a proposé cette methode par simul de clic et je l'ai appliqué.
shadowbox, lightbox et litebox je me dis qu'au finish ce sont les même fichiers
et à la fin je serai obligé de tripatouiller à goch à doit; je saurai pas le faire seul.
merci pour ta contribution.-
j'ai essayé l'exemple donné sur le site de shadows box :
<link rel="stylesheet" type="text/css" href="shadowbox.css">
<script type="text/javascript" src="shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init({
skipSetup: true
});
window.onload = function() {
Shadowbox.open({
content: '<div id="welcome-msg">Welcome to my website!</div>',
player: "html",
title: "Welcome",
height: 350,
width: 350
});
};
</script>
la page reste sombre mais rien ne s'affiche meme si je change le <div> par une image (<img>)
-
-
