Les Allergies
Alimentaires
Posez votre question Signaler

Image en lightbox au CHARGEMENT de la page [Résolu]

angel lestat 150Messages postés 26 avril 2007Date d'inscription 3 avril 2012Dernière intervention - Dernière réponse le 23 avril 2011 à 18:44
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.
Lire la suite 

Image en lightbox au CHARGEMENT de la page »

10 réponses
Réponse
+4
moins plus
avion-f16 16620Messages postés 17 février 2008Date d'inscription 8 mai 2012Dernière intervention 20 sept. 2010 à 19:14
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>

 Ajouter un commentaire - Site web
Afficher les 5 commentaires
angel lestat- 20 sept. 2010 à 22:51
je sais pas. J'ai testé sur opéra 9.6 et ca marche du tonnerre.
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
angel lestat- 20 sept. 2010 à 22:56
peut on contourner la restriction d'IE jouant sur le navigateur avec des tests?

if( IE)
{
function lightbox();
}else
{
function shadowbox();
}
avion-f16- 22 sept. 2010 à 20:28
Tu peux utiliser la propriété appVersion de l'objet navigator.
http://www.commentcamarche.net/contents/javascript/jsnavigator.php3
Ajouter un commentaire
Réponse
+1
moins plus
avion-f16 16620Messages postés 17 février 2008Date d'inscription 8 mai 2012Dernière intervention 20 sept. 2010 à 17:54
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, ...
http://shadowbox-js.com/

Ajouter un commentaire - Site web
Ajouter un commentaire
Réponse
+0
moins plus
angel lestat 150Messages postés 26 avril 2007Date d'inscription 3 avril 2012Dernière intervention 20 sept. 2010 à 18:29
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.

 Ajouter un commentaire
angel lestat- 20 sept. 2010 à 18:58
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>)
Ajouter un commentaire
Réponse
+0
moins plus
rduvrac 23 avril 2011 à 18:44
idem

Pas simple de trouver une solution qq part :-(

 Ajouter un commentaire
Ajouter un commentaire
Posez votre question
Ce document intitulé « Image en lightbox au CHARGEMENT de la page » issu de CommentCaMarche (www.commentcamarche.net) est mis à disposition sous les termes de la licence Creative Commons. Vous pouvez copier, modifier des copies de cette page, dans les conditions fixées par la licence, tant que cette note apparaît clairement.
Dossier à la une
Passage au tout numérique : quel coût pour les particuliers ?