Discussion :

[novis5]

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 :

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

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 :

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

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

[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

[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

[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

[NoSmoking]

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

[Invité]

Bonjour,

1/

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

Tu as ta réponse, non ?

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

3/ il faut lire la documentation, le mode d'emploi... Certainement fourni avec le script.

[novis5]

Bonjour,

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 :

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

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/

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

[novis5]

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

pour le css :

Code css :

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
#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 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
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 :

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

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 css :

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
.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 css :

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
.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

[novis5]

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


ma div avant la lightbox:

Code :

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

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 :

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

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 :

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

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

[novis5]

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 :

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

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 css :

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
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}

js

Code css :

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
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