limiter la taille de l'image lightbox

**fazpedro** · 27/06/2012, 15h12

Bonjour
j'essaye d'adapter le code "lightbox" ci-dessous à mon projet mais j'ai du mal...
http://lokeshdhakar.com/projects/lightbox/

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>ESSAI LIGHTBOX</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
<meta name="robots" content="noindex, nofollow" />
<script type="text/javascript" src="lightbox.js"></script>
<link rel="stylesheet" type="text/css" href="lightbox.css" />
</head>
<body>
<h3>EFFETS LIGHTBOX</h3>
<div class="thumbnail">
<a href="image.jpg" rel="lightbox"><img src="image.jpg" width="150" alt="" /></a>
</div>
</body>
</html>

cela fonctionne sauf que l'image est affichée à son format d'origine, et si l'image est très grande (c'est mon cas...) cela déborde de l'écran...

Comment faire pour limiter la largeur et la hauteur de l'image en "lightbox" selon la taille de l'écran ?
Merci beaucoup !

**fazpedro** · 27/06/2012, 15h47

j'ai trouvé un site qui permet de limiter :
http://gwenole.stephant.free.fr/blog...ox-pour-jquery

par contre, c'est seulement en pixels et pas en pourcentage de la fenêtre...
j'ai essayé avec les pixels : OK
avec les % : KO !
Merci.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
<script type="text/javascript" >
$(document).ready(function() {	
	$("a.lightbox").lightBox({
		// width		: '15%',
		// height		: '15%'
		maxWidth: 350,
		maxHeight: 350
		});
});
</script>

**NoSmoking** · 27/06/2012, 20h47

Bonjour,
pourquoi ne pas traiter cela en CSS

Code :

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

1
2
3
#lightboxImage {
  max-width:600px; /* par exemple */
}

et autres...

**fazpedro** · 27/06/2012, 21h09

@ NoSmoking

oui mais ce que je souhaite c'est que l'image s'adapte à l'écran
donc je ne peux pas indiquer des "px" ...

**Bovino** · 27/06/2012, 21h26

Tu manques quelque peu d'imagination

Code :

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

1
2
3
#lightboxImage {
  max-width:60%; /* par exemple */
}

**fazpedro** · 28/06/2012, 08h59

Bonjour et merci Bovino :
j'ai essayé de le mettre à plusieurs endroits dans la feuille de style css mais rien n'y fait cela ne s'adapte pas à la taille de l'écran, l'image déborde... !
où dois-je mettre ce "max-width" ?
Merci.

le CSS :

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
 
#jquery-overlay {position: absolute;top: 0;left: 0;z-index: 90;width: 100%;height: 500px;}
#jquery-lightbox {position: absolute;top: 0;left: 0;width: 100%;z-index: 100;text-align: center;line-height: 0;}
#jquery-lightbox a img { border: none;}
#lightbox-container-image-box {position: relative;background-color: #fff; width: 250px; height: 250px; margin: 0 auto;}
#lightbox-container-image {padding: 10px;}
#lightbox-loading {position: absolute;top: 40%;left: 0%;	height: 25%;width: 100%;text-align: center;line-height: 0;}
#lightbox-nav {position: absolute;top: 0;left: 0;height: 100%;width: 100%;z-index: 10;}
#lightbox-container-image-box > #lightbox-nav {left: 0;}
#lightbox-nav a { outline: none;}
#lightbox-nav-btnPrev, #lightbox-nav-btnNext {width: 49%;height: 100%;zoom: 1;display: block;}
#lightbox-nav-btnPrev {left: 0;float: left;}
#lightbox-nav-btnNext {right: 0;float: right;}
#lightbox-container-image-data-box {font: 10px Verdana, Helvetica, sans-serif;background-color: #fff;margin: 0 auto;
	line-height: 1.4em;overflow: auto;width: 100%;padding: 0 10px 0;}
#lightbox-container-image-data {padding: 0 10px;color: #666;}
#lightbox-container-image-data #lightbox-image-details {width: 70%;float: left;text-align: left;}	
#lightbox-image-details-caption { font-weight: bold; }
#lightbox-image-details-currentNumber {display: block;clear: left;padding-bottom: 1.0em;}
#lightbox-secNav-btnClose {width: 66px; float: right;padding-bottom: 0.7em;}

j'ai essayé aussi avec le code :

Code :

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

1
2
3
4
5
6
7
<script type="text/javascript" >
$(document).ready(function() {	
	$("a.lightbox").lightBox({
		max-width:30%
		});
});
</script>

mais pas de résultat (la fenêtre en popup ne s'ouvre même pas)

limiter la taille de l'image lightbox

jQuery

Vue hybride

Discussions similaires

Partager

Partager