Changer d'image dans pop in jQuery

**woodix** · 10/08/2014, 10h15

Bonjour,

Je suis en train de coder mon site web, pour poster mes photographies, et je suis bloqué sur un point.
J'ai suivi un tutoriel qui montre comment agrandir une image dans une pop in sur son site, mais ce que je souhaiterais en plus c'est de passer entres les autres photos directement dans la pop in (soit par les touches directionnelles soit pas des boutons à gauche et à droite de l'image).

Voici mes codes

HTML

Code :

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
28
<!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="jquery.js"></script>
		<script type="text/javascript" src="mybox.js"></script>
 
    </head>
 
    <body oncontextmenu="return false">
 
	<div id="bloc_page">
 
			<div id="conteneur">
				<a href="images/gilbert.jpg" rel="mybox"><img src="images/gilbert_mini.jpg" alt="Gilbert" /></a>
				<a href="images/jeremy.jpg" rel="mybox"><img src="images/jeremy_mini.jpg" alt="Jérémy" /></a>
				<a href="images/saxo.jpg" rel="mybox"><img src="images/saxo_mini.jpg" alt="Saxo" /></a>
			</div>
 
        </div>
    </body oncontextmenu="return false">
</html>

JS

Code :

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
$(document).ready(function(){
	mybox.init();
});
 
mybox={
 
	init:function(){
		mybox.opacite=0.7;
		mybox.duree=1000;
		$("a[rel='mybox']").click(function(){
			mybox.lien=$(this).attr("href");
			mybox.open(mybox.lien);
			return false;
		});
 
		$(window).resize(mybox.redim);
	},
 
	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);
 
		$("#mybox_close").click(mybox.close);
		$("#mybox_aplat").click(mybox.close);
	},
 
	load:function(){
		if(mybox.img.complete){
			window.clearInterval(mybox.timer);
			mybox.anim();
		}
	},
 
	anim:function(){
		$("#mybox_conteneur").show();
		mybox.largeur=mybox.img.width;
		mybox.hauteur=mybox.img.height;
 
		mybox.redim();
 
		$("#mybox_loader").fadeOut();
		$("#mybox_contenu").append('<img src="'+mybox.lien+'"/>');
		$("#mybox_contenu img").hide();
		$("#mybox_contenu").animate({width:mybox.largeur}, mybox.duree/2).animate({ height:mybox.hauteur}, mybox.duree/2, "easeOutQuad", function(){
			$("#mybox_contenu img").fadeIn();
		});
	},
 
	redim:function(){
		$("#mybox_conteneur").css("left",((mybox.windowW()-mybox.largeur)/2)+"px");
		$("#mybox_conteneur").css("top",(mybox.scrollY()+((mybox.windowH()-mybox.hauteur)/2))+"px");
	},
 
	close:function(){
		$("#mybox").fadeOut(500,function(){
			$("#mybox").remove();
		})
	},
 
	windowH:function(){
		if(window.innerHeight) return window.innerHeight;
		else{return $(window).height();}
		},
	windowW:function(){
		if(window.innerWidth) return window.innerWidth;
		else{return $(window).width();}
		},
	scrollY:function(){
		scrofY=0;
		if(typeof(window.pageYOffset)=='number'){
			//Netscape compliant
			scrofY=window.pageYOffset;
		}else if(document.body && (document.body.scrollTop)){
			//DOM compliant
			scrofY=document.body.scrollTop;
		} else if(document.documentElement && (document.documentElement.scrollTop)){
			//IE6 standards compliant mode
			scrofY=document.documentElement.scrollTop;
		}
		return scrofY;
		alert(scrofY);
	}
}