Sujet Précédent Sujet Suivant

Image en lightbox au CHARGEMENT de la page

Résolu/Fermé
angel lestat Messages postés 233 Date d'inscription jeudi 26 avril 2007 Statut Membre Dernière intervention 17 mars 2015 - 20 sept. 2010 à 17:16
 rduvrac - 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.

A voir également:

4 réponses

Réponse 1 / 4
avion-f16 Messages postés 19246 Date d'inscription dimanche 17 février 2008 Statut Contributeur Dernière intervention 21 avril 2024 4 497
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>
3
angel lestat Messages postés 233 Date d'inscription jeudi 26 avril 2007 Statut Membre Dernière intervention 17 mars 2015 14
20 sept. 2010 à 22:34
merci, c'est exactement ce que je désire (sous Mozilla Firefox)
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
0
avion-f16 Messages postés 19246 Date d'inscription dimanche 17 février 2008 Statut Contributeur Dernière intervention 21 avril 2024 4 497
20 sept. 2010 à 22:38
Si tu as le fichier sur ton disque dur et que tu l'ouvres par double-clic (ou clic droit), IE bloque peut-être le JS.
0
angel lestat Messages postés 233 Date d'inscription jeudi 26 avril 2007 Statut Membre Dernière intervention 17 mars 2015 14
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
0
angel lestat Messages postés 233 Date d'inscription jeudi 26 avril 2007 Statut Membre Dernière intervention 17 mars 2015 14
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();
}
0
avion-f16 Messages postés 19246 Date d'inscription dimanche 17 février 2008 Statut Contributeur Dernière intervention 21 avril 2024 4 497
Modifié par avion-f16 le 22/09/2010 à 20:28
Tu peux utiliser la propriété appVersion de l'objet navigator.
https://www.commentcamarche.net/contents/580-javascript-l-objet-navigator
0
Réponse 2 / 4
avion-f16 Messages postés 19246 Date d'inscription dimanche 17 février 2008 Statut Contributeur Dernière intervention 21 avril 2024 4 497
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, ...
https://www.shadowbox-js.com/
1
Réponse 3 / 4
angel lestat Messages postés 233 Date d'inscription jeudi 26 avril 2007 Statut Membre Dernière intervention 17 mars 2015 14
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.
0
angel lestat Messages postés 233 Date d'inscription jeudi 26 avril 2007 Statut Membre Dernière intervention 17 mars 2015 14
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>)
0
Réponse 4 / 4
rduvrac
23 avril 2011 à 18:44
idem

Pas simple de trouver une solution qq part :-(
0

Discussions similaires

Retrouver l'image originale après avoir fait des modifications ?
Raven -
bonjou -

9 réponses
[PIX] Commencer chaque poème sur une nouvelle page
ETHAN -
Willzac -

19 réponses
[référencement] Ne pas être référencé
kij_82 -
Searaphina -

10 réponses
Chemin Logo du site de la Cité de l'espace
Keiios -
blux -

11 réponses