Ouvrir image dans lightbox

Version imprimable

18/10/2017, 15h40
novis5

Ouvrir image dans lightbox
Bonjour,
J'ai un contentflow qui contient beaucoup d'images. Lorsque je clique sur ces images, elles s'affichent plus grandes mais je ne peux pas revenir directement sur mon site. Je souhaite donc qu'elles s'ouvrent dans un lightbox. J'ai donc fait quelques recherches sur internet et j'ai trouvé ce code :

Code:

rel="lightbox"

à intégrer au lien dans une balise <a>.

Seulement le souci est que mes images sont présentes dans des div. Donc je ne vois pas du tout comment intégrer ce code à ma div.
pour vous montrer, ma div ressemble à ca:
Code:

1 2 3 <div class="item"><img class="content" src="adresse de mon image.jpg" /> <div class="caption">titre</div> </div>
J'espère que vous pourrez m'aider;)

Noviis
18/10/2017, 16h37
Vil'Coyote

si tu utilise rel="lightbox" c'est que tu utilise jquery. donc tu devrais lire : https://forum.jquery.com/topic/targe...query-lightbox ou voir comment on se sert d'une lightbox avec jquery.
Si tu n'utilise pas jquery http://www.toptip.ca/2012/01/lightbo...soooooooo.html
19/10/2017, 10h34
novis5

Bonjour,
Alors effectivement jevais devoir faire un lien vers la bibliothèque jquery. Seulement ce qui coince c'est que mes images se trouvent dans des div du coup je ne comprends pas comment intégrer la lightbox. A chacun de mes tests, mes images ne s'affichent pas correctement ou au mieux rien ne change...

Pouvez-vous me conseiller?
merci

novis
19/10/2017, 16h46
Vil'Coyote

tu pourrais mettre le code de tes essais? après la question suivante c'est, pourquoi tu insert par les balise a sur tes images?
ensuite, si tu ne peux rien modifier, tu pourrais lire ceci : https://www.w3schools.com/howto/howto_js_lightbox.asp
19/10/2017, 19h23
NoSmoking

Bonjour,
bizarre, dans une de tes discussions tu avais mis un lien qui remplissait parfaitement cette fonction, voir post #26.
19/10/2017, 22h40
Invité

Bonjour,

1/

Citation:

Envoyé par novis5

ce code : rel="lightbox" à intégrer au lien dans une balise <a>.

Tu as ta réponse, non ? :roll:

2/ on ne sait même pas quel script de lightbox tu as trouvé/choisi... :koi:

3/ il faut lire la documentation, le mode d'emploi... Certainement fourni avec le script.
20/10/2017, 10h29
novis5
Bonjour,

Citation:

bizarre, dans une de tes discussions tu avais mis un lien qui remplissait parfaitement cette fonction, voir post #26.

Je suis novice en code donc je découvre au fur et à mesure. S'agit-il de cette partie de code?
Code:

1 2 3 4 $('#coverflow img').click(function() { if( ! $(this).hasClass('ui-state-active')){ return; }
Je vais tester par ce moyen et je reviendrai vers vous/

Citation:

si tu ne peux rien modifier, tu pourrais lire ceci : https://www.w3schools.com/howto/howto_js_lightbox.asp

Mes code ne fonctionnant pas, j'avais tout supprimé. Là je vais tester avec les codes du liens ci-dessus et je vous les transmettrai.

merci pour vos conseils

Alors voilà, j'ai testé un code :

pour le css :

Code:

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
#shadowing
{
	display: none;
	position: fixed;
	top: 0%;
	left: 0%;
	width: 100%;
	height: 100%;
	background-color: #CCA;
	z-index:10;
	opacity:0.5;
	filter: alpha(opacity=50);
}
 
 
 
#box 
{
	display: none;
	position: fixed;
	top: 20%;
	left: 20%;
	width: 60%;
	height: 60%;
	padding: 0;
	margin:0;
	max-height:400px;
	border: 1px solid black;
	background-color: white;
	z-index:11;
	overflow: auto;
}
 
#box
{
	position:absolute;
	top:0%;
	left:0%;
	width:100%;
	height:20px;
	padding:0;
	padding-top:2px;
	padding-left:8px;
	margin:0;
	margin-right:20px;
	border-bottom:1px solid black;
	background-color: #060;
	color:white;
	text-align:center;
}
 
#boxclose
{
	float:right;
	position:absolute;
	top: 0;
	right: 0;
	background-image:url(images/close.gif);
	background-repeat:no-repeat;
	background-color:#CCC;
	border:1px solid black;
	width:20px;
	height:20px;
}
 
#boxcontent
{
	position:absolute;
	top:23px;
	left:0;
	right:0;
	bottom:0;
	margin:0;
	padding: 8px;
	overflow: auto;
	width:100%;
	height:100%;
}

le js:

Code:

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
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
/*
  Lightbox with fading effect 
  GPL 2.0 license
*/  
 
 
// height of current view for all browsers but IE
 
function viewHeight() 
{
    if(window.innerHeight)return(window.innerHeight);
    if(document.documentElement && document.documentElement.clientHeight) 
         return(document.documentElement.clientHeight);
    if(document.body) return(document.body.clientHeight); 
    return 50;
}
 
function gradient(id, level)
{
	var box = document.getElementById(id);
	box.style.opacity = level;
	box.style.MozOpacity = level;
	box.style.KhtmlOpacity = level;
	box.style.filter = "alpha(opacity=" + level * 100 + ")";
	box.style.display="block";
	return;
}
 
 
function fadein(id) 
{
	var level = 0;
	while(level <= 1)
	{
		 "gradient('" + id + "'," + level + ")", (level* 1000) + 10);
		level += 0.01;
	}
}
 
 
// Open the lightbox
 
function openbox(url, fadin)
{
  var box = document.getElementById('box'); 
  var filter= document.getElementById('shadowing');
  filter.style.display='block';
 
  var title = document.getElementById('boxtitle');
  title.innerHTML = url;
 
  var content = document.getElementById('boxcontent');
  content.style.padding="0";
 
  content.innerHTML = "<img src=" + url + " />";
 
  if(fadin)
  {
	 gradient("box", 0);
  }
  else
  { 	
    box.style.display='block';
  }  
 
  if(navigator.appName.substring(0, 3) == "Mic")  // for IE
  {
    x = document.documentElement.scrollTop + document.body.scrollTop + 
    box.offsetHeight / 4;
    box.style.top = x + "px";
    shadowing.style.top = document.documentElement.scrollTop + document.body.scrollTop;
  }
  else
  {
    var top =  (viewHeight() - box.offsetHeight ) / 2;    
    box.style.top = top + 'px';
    box.style.position='fixed'; // fixed does not work on IE
    filter.style.position='fixed'; 
  }  
 
  if(fadin)
  {
	 fadein("box");  
  }
 
}	
 
// Close the lightbox
 
function closebox()
{
   document.getElementById('box').style.display='none';
   document.getElementById('shadowing').style.display='none';
}
 
 
 
// Loading images asynchronously with no delay
 
function preloading(i, url)
{
	var xhr=createXHR();   
	xhr.onreadystatechange=function()
	{ 
		if(xhr.readyState == 4)
		{
			i.src = url;
		} 
	}; 
 
	xhr.open("GET", url , true);
	xhr.send(null); 
} 
 
 
function loadAll()
{
	preloading(new Image(), "images/acores.jpg");
	preloading(new Image(), "images/prison.jpg");
	preloading(new Image(), "images/shark.jpg");
}
 
 
window.onload=loadAll;

et le code d'une image pour mon html est:

Code:

1
2
3
4
<div class="item"><img class="content" src="adresse de mon image.jpg" onclick="openbox('adresse de mon image');"/>
<div class="caption">titre</div>
</div>
</div>

Mes images se trouvent dans un contentflow que j'ai trouvé dans codepen: https://codepen.io/manabox/pen/Gplui

le css:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.ContentFlow .scrollbar {
    border-bottom:1px solid #000;
    color: #252525;
    width: 50%;
}
.ContentFlow .scrollbar .slider {
  position: absolute;
  width: 32px;
  height: 5px;
  border: 1px solid black;
  border-radius: 1px;
  background-color: white;
  box-shadow: 0 0 2px 2px silver inset;
  cursor: move;
}
.ContentFlow .flow .item canvas.content{height:100%;width:100%}.ContentFlow .flow .item.active{cursor:pointer}.ContentFlow .flow .item .caption{font-family: 'Raleway', sans-serif; font-size:100%;font-weight:700;text-align:center;color:#000;max-height:80%;
scaleFactorPortrait: 1.25.;;bottom:10%;background:url(/sample/images/1x1_0.5_black.png);width:100%;position:absolute;display:none}* html .ContentFlow .flow .item .caption{background-image:none;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='/sample/images/1x1_0.5_black.png')}.ContentFlow .scrollbar{width:50%;height:5px;background:url(/sample/images/scrollbar_white.png) left center repeat-x;overflow:visible;position:relative;z-index:1;visibility:hidden;margin:10px auto 0}.ContentFlow .scrollbar .slider{width:20px;height:6px;background:url(/sample/images/slider_white.png) center center no-repeat;cursor:move;position:absolute}* html .ContentFlow .scrollbar .slider{background-image:none}* html .ContentFlow .scrollbar .slider .virtualSlider{filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=crop, src='/sample/images/slider_white.png');height:100%}.ContentFlow .scrollbar .slider .position{top:120%;font-size:16px;font-weight:700;color:#000;position:absolute;text-align:center}.ContentFlow .globalCaption{text-align:center;font-weight:700;color:#000;font-size:14px;height:20px;position:relative;z-index:1;margin:2em auto}.ContentFlow .loadIndicator{width:100%;height:100%;top:0;left:0;background:#fff;position:absolute;z-index:65000}.ContentFlow .loadIndicator .indicator{background:url(/sample/images/loader.gif) center center no-repeat;width:100%;height:100%}* html .ContentFlow .loadIndicator .indicator{height:100px}.ContentFlow{background-color:#fff;position:relative;overflow:hidden}.ContentFlow *{margin:0;padding:0}.ContentFlow img{-ms-interpolation-mode:bicubic}.ContentFlow .mouseoverCheckElement{position:absolute;width:0;height:0;left:0;visibility:hidden}.ContentFlow:hover .mouseoverCheckElement{left:1px}.ContentFlow .flow{position:relative;z-index:0;visibility:hidden;width:100%;margin:0 auto}.ContentFlow .flow.hidden{visibility:hidden}.ContentFlow .flow .item{position:absolute;visibility:hidden;top:0;left:0}.ContentFlow .flow .item div.content{width:100%;height:100%}.ContentFlow .flow .item .label{display:none}.ContentFlow .flow .item canvas.reflection{margin-top:-1px}.ContentFlow .flow .item img.content,.ContentFlow .flow .item img.reflection,.ContentFlow .flow .item canvas.reflection{width:100%}.ContentFlow .flow .item .caption a,.ContentFlow .flow .item .caption a:link,.ContentFlow .flow .item .caption a:visited,.ContentFlow .flow .item .caption a:active,.ContentFlow .flow .item .caption a:hover,.ContentFlow .globalCaption .caption a,.ContentFlow .globalCaption .caption a:link,.ContentFlow .globalCaption .caption a:visited,.ContentFlow .globalCaption .caption a:active,.ContentFlow .globalCaption .caption a:hover{color:#000;font-size:0.8em;font-style:italic;text-decoration:none}.ContentFlow .flow .item .caption a:hover,.ContentFlow .globalCaption .caption a:hover{text-decoration:underline}.ContentFlow .flow .item .content,.ContentFlow .flow .item .reflection{display:block}

et le js:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.ContentFlow .scrollbar {
    border-bottom:1px solid #000;
    color: #252525;
    width: 50%;
}
.ContentFlow .scrollbar .slider {
  position: absolute;
  width: 32px;
  height: 5px;
  border: 1px solid black;
  border-radius: 1px;
  background-color: white;
  box-shadow: 0 0 2px 2px silver inset;
  cursor: move;
}
.ContentFlow .flow .item canvas.content{height:100%;width:100%}.ContentFlow .flow .item.active{cursor:pointer}.ContentFlow .flow .item .caption{font-family: 'Raleway', sans-serif; font-size:100%;font-weight:700;text-align:center;color:#000;max-height:80%;
scaleFactorPortrait: 1.25.;;bottom:10%;background:url(/sample/images/1x1_0.5_black.png);width:100%;position:absolute;display:none}* html .ContentFlow .flow .item .caption{background-image:none;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='/sample/images/1x1_0.5_black.png')}.ContentFlow .scrollbar{width:50%;height:5px;background:url(/sample/images/scrollbar_white.png) left center repeat-x;overflow:visible;position:relative;z-index:1;visibility:hidden;margin:10px auto 0}.ContentFlow .scrollbar .slider{width:20px;height:6px;background:url(/sample/images/slider_white.png) center center no-repeat;cursor:move;position:absolute}* html .ContentFlow .scrollbar .slider{background-image:none}* html .ContentFlow .scrollbar .slider .virtualSlider{filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=crop, src='/sample/images/slider_white.png');height:100%}.ContentFlow .scrollbar .slider .position{top:120%;font-size:16px;font-weight:700;color:#000;position:absolute;text-align:center}.ContentFlow .globalCaption{text-align:center;font-weight:700;color:#000;font-size:14px;height:20px;position:relative;z-index:1;margin:2em auto}.ContentFlow .loadIndicator{width:100%;height:100%;top:0;left:0;background:#fff;position:absolute;z-index:65000}.ContentFlow .loadIndicator .indicator{background:url(/sample/images/loader.gif) center center no-repeat;width:100%;height:100%}* html .ContentFlow .loadIndicator .indicator{height:100px}.ContentFlow{background-color:#fff;position:relative;overflow:hidden}.ContentFlow *{margin:0;padding:0}.ContentFlow img{-ms-interpolation-mode:bicubic}.ContentFlow .mouseoverCheckElement{position:absolute;width:0;height:0;left:0;visibility:hidden}.ContentFlow:hover .mouseoverCheckElement{left:1px}.ContentFlow .flow{position:relative;z-index:0;visibility:hidden;width:100%;margin:0 auto}.ContentFlow .flow.hidden{visibility:hidden}.ContentFlow .flow .item{position:absolute;visibility:hidden;top:0;left:0}.ContentFlow .flow .item div.content{width:100%;height:100%}.ContentFlow .flow .item .label{display:none}.ContentFlow .flow .item canvas.reflection{margin-top:-1px}.ContentFlow .flow .item img.content,.ContentFlow .flow .item img.reflection,.ContentFlow .flow .item canvas.reflection{width:100%}.ContentFlow .flow .item .caption a,.ContentFlow .flow .item .caption a:link,.ContentFlow .flow .item .caption a:visited,.ContentFlow .flow .item .caption a:active,.ContentFlow .flow .item .caption a:hover,.ContentFlow .globalCaption .caption a,.ContentFlow .globalCaption .caption a:link,.ContentFlow .globalCaption .caption a:visited,.ContentFlow .globalCaption .caption a:active,.ContentFlow .globalCaption .caption a:hover{color:#000;font-size:0.8em;font-style:italic;text-decoration:none}.ContentFlow .flow .item .caption a:hover,.ContentFlow .globalCaption .caption a:hover{text-decoration:underline}.ContentFlow .flow .item .content,.ContentFlow .flow .item .reflection{display:block}

J'ai mis tous les codes car je pense qu'il doit y avoir une partie du code qui fait que lorsque l'on clique sur mes images, elles s'affichent en grand sur la page et après on est obligé de faire un retour en arrière. C'est pour cela que j'aimerai y intégrer une lightbox.

Merci pour votre aide

Novis

Le souci est que je n'arrive pas à intégrer plusieurs div...

ma div avant la lightbox:

Code:

1
2
3
4
<div class="item"><img class="content" src="adresse de mon image.jpg" onclick="openbox('adresse de mon image');"/>
<div class="caption">titre</div>
</div>
</div>

ma div après lightbox:

Code:

1
2
3
4
5
6
7
8
9
10
11
<div id="box">
    <div id="boxheader">
        <span id="boxtitle"></span>
        <span id="boxclose" onclick="closebox()"> </span>
    </div>
    <div id="boxcontent"></div>
</div>
<div class="item"><img class="content" src="adresse de mon image.jpg" onclick="openbox('adresse de mon image');"/>
<div class="caption">titre</div>
</div>
</div>

je dois insérer cette partie en plus mais je n'y arrive pas :

Code:

1
2
3
4
5
6
7
<div id="box">
    <div id="boxheader">
        <span id="boxtitle"></span>
        <span id="boxclose" onclick="closebox()"> </span>
    </div>
    <div id="boxcontent"></div>
</div>

si vous pouviez m'expliquer comment intégrer plusieurs div, y a t il des hiérarchies?
merci beaucoup

novis

Bonjour,
Je n'ai toujours pas trouvé de solution pour insérer une lightbox dans mon contentflow.
Si vous avez une idée... merci beaucoup.

Mon code est:

html

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="ContentFlow" id="contentFlow">
<div class="loadIndicator">
<div class="indicator">&nbsp;</div>
</div>
 
<div class="flow">
<div class="item"><img class="content" src="image.jpg" />
<div class="caption"></div>
</div>
 
<div class="item"><img class="content" src="image2.jpg" />
<div class="caption">.</div></div>
</div>

css

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
img {
  width: 300px;
}
 
.ContentFlow .scrollbar {
    border-bottom:1px solid #000;
    color: #252525;
    width: 50%;
}
.ContentFlow .scrollbar .slider {
  position: absolute;
  width: 32px;
  height: 5px;
  border: 1px solid black;
  border-radius: 1px;
  background-color: white;
  box-shadow: 0 0 2px 2px silver inset;
  cursor: move;
}
.ContentFlow .flow .item canvas.content{height:100%;width:100%}.ContentFlow .flow .item.active{cursor:pointer}.ContentFlow .flow .item .caption{font-family: 'Raleway', sans-serif; font-size:100%;font-weight:700;text-align:center;color:#000;max-height:30%;bottom:10%;background:url(/sample/images/1x1_0.5_black.png);width:100%;position:absolute;display:none}* html .ContentFlow .flow .item .caption{background-image:none;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='/sample/images/1x1_0.5_black.png')}.ContentFlow .scrollbar{width:50%;height:5px;background:url(/sample/images/scrollbar_white.png) left center repeat-x;overflow:visible;position:relative;z-index:1;visibility:hidden;margin:10px auto 0}.ContentFlow .scrollbar .slider{width:20px;height:6px;background:url(/sample/images/slider_white.png) center center no-repeat;cursor:move;position:absolute}* html .ContentFlow .scrollbar .slider{background-image:none}* html .ContentFlow .scrollbar .slider .virtualSlider{filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=crop, src='/sample/images/slider_white.png');height:100%}.ContentFlow .scrollbar .slider .position{top:120%;font-size:16px;font-weight:700;color:#000;position:absolute;text-align:center}.ContentFlow .globalCaption{text-align:center;font-weight:700;color:#000;font-size:14px;height:20px;position:relative;z-index:1;margin:2em auto}.ContentFlow .loadIndicator{width:100%;height:100%;top:0;left:0;background:#fff;position:absolute;z-index:65000}.ContentFlow .loadIndicator .indicator{background:url(/sample/images/loader.gif) center center no-repeat;width:100%;height:100%}* html .ContentFlow .loadIndicator .indicator{height:100px}.ContentFlow{background-color:#fff;position:relative;overflow:hidden}.ContentFlow *{margin:0;padding:0}.ContentFlow img{-ms-interpolation-mode:bicubic}.ContentFlow .mouseoverCheckElement{position:absolute;width:0;height:0;left:0;visibility:hidden}.ContentFlow:hover .mouseoverCheckElement{left:1px}.ContentFlow .flow{position:relative;z-index:0;visibility:hidden;width:100%;margin:0 auto}.ContentFlow .flow.hidden{visibility:hidden}.ContentFlow .flow .item{position:absolute;visibility:hidden;top:0;left:0}.ContentFlow .flow .item div.content{width:100%;height:100%}.ContentFlow .flow .item .label{display:none}.ContentFlow .flow .item canvas.reflection{margin-top:-1px}.ContentFlow .flow .item img.content,.ContentFlow .flow .item img.reflection,.ContentFlow .flow .item canvas.reflection{width:100%}.ContentFlow .flow .item .caption a,.ContentFlow .flow .item .caption a:link,.ContentFlow .flow .item .caption a:visited,.ContentFlow .flow .item .caption a:active,.ContentFlow .flow .item .caption a:hover,.ContentFlow .globalCaption .caption a,.ContentFlow .globalCaption .caption a:link,.ContentFlow .globalCaption .caption a:visited,.ContentFlow .globalCaption .caption a:active,.ContentFlow .globalCaption .caption a:hover{color:#000;font-size:0.8em;font-style:italic;text-decoration:none}.ContentFlow .flow .item .caption a:hover,.ContentFlow .globalCaption .caption a:hover{text-decoration:underline}.ContentFlow .flow .item .content,.ContentFlow .flow .item .reflection{display:block}

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
img {
  width: 300px;
}
 
.ContentFlow .scrollbar {
    border-bottom:1px solid #000;
    color: #252525;
    width: 50%;
}
.ContentFlow .scrollbar .slider {
  position: absolute;
  width: 32px;
  height: 5px;
  border: 1px solid black;
  border-radius: 1px;
  background-color: white;
  box-shadow: 0 0 2px 2px silver inset;
  cursor: move;
}
.ContentFlow .flow .item canvas.content{height:100%;width:100%}.ContentFlow .flow .item.active{cursor:pointer}.ContentFlow .flow .item .caption{font-family: 'Raleway', sans-serif; font-size:100%;font-weight:700;text-align:center;color:#000;max-height:30%;bottom:10%;background:url(/sample/images/1x1_0.5_black.png);width:100%;position:absolute;display:none}* html .ContentFlow .flow .item .caption{background-image:none;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='/sample/images/1x1_0.5_black.png')}.ContentFlow .scrollbar{width:50%;height:5px;background:url(/sample/images/scrollbar_white.png) left center repeat-x;overflow:visible;position:relative;z-index:1;visibility:hidden;margin:10px auto 0}.ContentFlow .scrollbar .slider{width:20px;height:6px;background:url(/sample/images/slider_white.png) center center no-repeat;cursor:move;position:absolute}* html .ContentFlow .scrollbar .slider{background-image:none}* html .ContentFlow .scrollbar .slider .virtualSlider{filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=crop, src='/sample/images/slider_white.png');height:100%}.ContentFlow .scrollbar .slider .position{top:120%;font-size:16px;font-weight:700;color:#000;position:absolute;text-align:center}.ContentFlow .globalCaption{text-align:center;font-weight:700;color:#000;font-size:14px;height:20px;position:relative;z-index:1;margin:2em auto}.ContentFlow .loadIndicator{width:100%;height:100%;top:0;left:0;background:#fff;position:absolute;z-index:65000}.ContentFlow .loadIndicator .indicator{background:url(/sample/images/loader.gif) center center no-repeat;width:100%;height:100%}* html .ContentFlow .loadIndicator .indicator{height:100px}.ContentFlow{background-color:#fff;position:relative;overflow:hidden}.ContentFlow *{margin:0;padding:0}.ContentFlow img{-ms-interpolation-mode:bicubic}.ContentFlow .mouseoverCheckElement{position:absolute;width:0;height:0;left:0;visibility:hidden}.ContentFlow:hover .mouseoverCheckElement{left:1px}.ContentFlow .flow{position:relative;z-index:0;visibility:hidden;width:100%;margin:0 auto}.ContentFlow .flow.hidden{visibility:hidden}.ContentFlow .flow .item{position:absolute;visibility:hidden;top:0;left:0}.ContentFlow .flow .item div.content{width:100%;height:100%}.ContentFlow .flow .item .label{display:none}.ContentFlow .flow .item canvas.reflection{margin-top:-1px}.ContentFlow .flow .item img.content,.ContentFlow .flow .item img.reflection,.ContentFlow .flow .item canvas.reflection{width:100%}.ContentFlow .flow .item .caption a,.ContentFlow .flow .item .caption a:link,.ContentFlow .flow .item .caption a:visited,.ContentFlow .flow .item .caption a:active,.ContentFlow .flow .item .caption a:hover,.ContentFlow .globalCaption .caption a,.ContentFlow .globalCaption .caption a:link,.ContentFlow .globalCaption .caption a:visited,.ContentFlow .globalCaption .caption a:active,.ContentFlow .globalCaption .caption a:hover{color:#000;font-size:0.8em;font-style:italic;text-decoration:none}.ContentFlow .flow .item .caption a:hover,.ContentFlow .globalCaption .caption a:hover{text-decoration:underline}.ContentFlow .flow .item .content,.ContentFlow .flow .item .reflection{display:block}

Un grand merci aux personnes qui voudront bien m'aider et m'expliquer

novis