Bonjour,

Lorsque je clique sur une image de mon coverflow, celle-ci s'affiche en grand sur un fond noir et je suis obligé de faire un retour en arrière pour revenir à mon coverflow.
Est-il possible que ces images s'affichent dans une genre de lightbox?

J'ai trouvé ce code qui peut-être pourrait fonctionner:

.lightbox {
	/** Default lightbox to hidden */
	display: none;

	/** Position and style */
	position: fixed;
	z-index: 999;
	width: 100%;
	height: 100%;
	text-align: center;
	top: 0;
	left: 0;
	background: rgba(0,0,0,0.8);
}

.lightbox img {
	/** Pad the lightbox image */
	max-width: 90%;
	max-height: 80%;
	margin-top: 2%;
}

.lightbox:target {
	/** Remove default browser outline */
	outline: none;

	/** Unhide lightbox **/
	display: block;
}

dans mon css je ne sais pas trop à quoi correspond cet effet sur les images, s'agit-il de:

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

du coup, dois-je insérer le code de la lightbox tel quel ou dois-je ajouter un élément devant?

pour infos, mon css est:

.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:300;text-align:center;color:#000;max-height:30%;bottom:50%;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:16px;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:16px;height:16px;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:silver;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}

je vous remercie de vos conseils

Novis

-
Edité par NovisCanvas 9 octobre 2017 à 10:58:28

Bonjour,

Je suis toujours à la recherche de l'effet lightbox afin d'avoir un visuel plus grand de mes images.

Je pensais ajouter rel="lightbox"  à la fin de ma source mais comme mes images sont dans des div, je ne vois pas bien comment procéder...

Voilà comment se présente mon html pour mes images:

<div class="item"><img class="content" src="adresse de mon image.jpg" />
<div class="caption">titre</div>
</div>

j'avais donc modifié en mettant:

<div class="item"><img class="content" src="adresse de mon image.jpg" rel="lightbox"/>

mais cela ne fonctionne pas.

Une idée? Un conseil?

Merci de votre aide !)

Novis