Image en lightbox au CHARGEMENT de la page
Résolu
angel lestat
Messages postés
233
Date d'inscription
Statut
Membre
Dernière intervention
-
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.
A voir également:
- Image en lightbox au CHARGEMENT de la page
- Impossible de supprimer une page word - Guide
- Image iso - Guide
- Mettre google en page d'accueil - Guide
- Imprimer plusieurs fois la même image sur une page ✓ - Forum Logiciels
- Image de manchots sur une image de plage. - Forum Graphisme
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/
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.
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>)
<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>)
malheureusement le code est tout bonnement ignoré sous explorer. (même arrière-plan ne noirci plus).
donc là je sais pas quoi faire
merci de ton aide
Puisque ca ne fonctionne pas sur IE, peut être c'est un problème de version; j'utilise la version 6
Je sais que cette version est particulièrement capricieuse
if( IE)
{
function lightbox();
}else
{
function shadowbox();
}
https://www.commentcamarche.net/contents/580-javascript-l-objet-navigator