limiter la taille de l'image lightbox

Version imprimable

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

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 !

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:

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>

27/06/2012, 20h47
NoSmoking
Bonjour,
pourquoi ne pas traiter cela en CSS
Code:

1 2 3 #lightboxImage { max-width:600px; /* par exemple */ }
et autres...
27/06/2012, 21h09
fazpedro

@ NoSmoking

oui mais ce que je souhaite c'est que l'image s'adapte à l'écran
donc je ne peux pas indiquer des "px" ...
27/06/2012, 21h26
Bovino
Tu manques quelque peu d'imagination :aie:
Code:

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

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:

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:

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)

J'ai trouvé un script plus simple qui s'affiche en fonction de la taille de la fenêtre :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!-- DEBUT script et css pour image en popup -->
<link rel="stylesheet" type="text/css" href="jquery.css"><!-- pour feuille de style jquery lightbox -->
<script type="text/javascript" src="jquery_lightbox.js"></script>
<!-- jQuery Lightbox Evolution - for jQuery 1.3+    http://codecanyon.net/item/jquery-lightbox-evolution/115655?ref=aeroalquimia --> 
<!-- FIN script et css pour image en popup -->
 
<!-- DEBUT HTML pour image en popup -->
<a href="monimage.jpg?lightbox[width]=60p&lightbox[height]=60p" style="background-color:#FFFFFF;display:inline;" class="lightbox" rel="group1" title="mon_image">
<img src="monimage.jpg" width="50" alt="mon_image" title="Cliquer pour Zoomer !" />
</a>
<script type="text/javascript">
$(document).ready(function() {$('.lightbox').lightbox();});
</script>
<!-- FIN HTML pour image en popup -->