Ouvrir une image dans une pop up (mybox)

**woodix** · 09/08/2014, 09h22

Bonjour à tous,

Je ne sais pas si c'est la bonne section pour poster mon souci, mais bon je me lance ne m'en voulez pas.

Voilà, je suis novice dans le codage web, mais je souhaite apprendre et me faire un site web "assez basique" pour poster mes photographies.
J'ai entamé l'aventure, et je me retrouve bloqué sur un point important.

Je souhaite mettre des miniatures d'images sur lesquelles on va cliquer pour afficher l'image en grand dans une pop up. Je suis un tutoriel sur le web qui explique comment faire cela (avec mybox), dans lequel on utilise du javascript. Mon problème est que le lien entre mon .html et mon .js n'a pas l'air de se faire. Car quand je mets le codage dans mon .html (la partie qui comprend le loader, la croix pour fermer, etc.) ça marche, je vois les éléments.
A l'inverse, si j'utilise le .js, quand je clique sur mon lien, l'image s'ouvre seule sur un fond blanc, en chargeant une nouvelle page (pas de pop up).

Je vous met le codage du html :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
		<!--[if lt IE 9]>
            <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
		<link rel="stylesheet" href="Style.css" type="text/css" media="screen"/>
		<link rel="stylesheet" href="mybox.css" type="text/css" media="screen"/>
 
		<!--<script type="text/javascript" src="js/zoombox/query.js"></script>-->
		<script type="text/javascript" src="mybox.js"></script>
 
     </head>
 
    <body>
 
		<div id="conteneur">
				<a href="images/gilbert.jpg" rel="mybox">Gilbert</a>
		</div>
 
     </body>
</html>

Du js :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
$(document).ready(function(){
	mybox.init();
});
 
mybox={
 
	init:function(){
		mybox.opacite=0.7;
		$("a[rel='mybox']").click(function(){
			mybox.lien=$(this).attr("href");
			mybox.open(mybox.lien);
			return false;
		});
	},
 
	open:function(lien){
		mybox.lien=lien;
		$("body").append('<div id="mybox"><div id="mybox_aplat"></div><div id="mybox_loader"></div><div id="mybox_conteneur"><div id="mybox_relative"><div id="mybox_close"></div><div id="mybox_contenu">	</div>	</div>	</div>	</div>');
		$("#mybox_conteneur").hide();
		$("#mybox_loader").hide().fadeIn();
		$("#mybox_aplat").css("opacity",0).fadeTo(500,mybox.opacite);
 
		mybox.img=new Image();
		mybox.img.src=mybox.lien;
		mybox.timer=window.setInterval(mybox.load,100);
	},
}

Et pour finir du css mybox :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
#mybox{}
#mybox #mybox_aplat{position:fixed; background:#000; top:0; left:0; width:100%; height:100%; opacity:0.7; z-index:9998;}
#mybox #mybox_conteneur{position:absolute;top:50px;left:50px;background:#FFF;z-index:9999;}
#mybox #mybox_relative{padding:10px;position:relative;}
#mybox #mybox_close{position:absolute;top:-15px;right:-15px;width:30px;height:30px;background:url(images/close.png);}
#mybox #mybox_loader{position:fixed; background:url(images/loader.gif) center center no-repeat; top:0; left:0; width:100%; height:100%; z-index:9998;}