Sujet Précédent Sujet Suivant

Problème position:scroll; dans galerie

gil -  
avion-f16 Messages postés 20368 Date d'inscription   Statut Contributeur Dernière intervention   -
Bonjour,

J'ai mis sur mon site web visuallightbox. l'image agrandit demeurait centrée sur l'écran alors impossible de voir l'image en entier.
J'ai donc ajouté scroll a position du #lightbox:
Cependant, en procédant ainsi au lieu de s'agrandir à partir du centre elle ouvre a gauche, celà déplace mes petite images en arriere plan, ma galerie, et quand je veux fermer l'image agrandit, je dois la fermer trois fois est-ce que je dois modifier un autre fichier un js? merci

#overlay{
position:absolute;
top:0;
left:0;
z-index:90;
width:100%;
height:auto;
background-color:none;
}

#lightbox{
position:scroll;
top:20px;
left:0;
width:100%;
z-index:100;
text-align:none;
color:#151410;
line-height:0;
}

#lightbox a, #lightbox a:hover {
border-bottom:none;
color:#151410;
text-decoration:underline;
}

#lightbox a img{ border:none; }

#outerImageContainer{
width:auto;
height:auto; /* without this line error in IE8 detected */
margin:0 auto;
position:relative;
}

#lightboxImage{
width:100%;
height:100%;
}

#imageContainer{
width:10px;
height:10px;
margin:0 auto;
overflow:hidden;
background-color:#fff;
position:relative;
font-size:0;/* ie fix - big info bar*/
}

#loading{
position:absolute;
top:40%;
left:0%;
height:25%;
width:100%;
text-align:center;
font-size:10px;
z-index:1;
}
#loadingLink {
display:block;
margin:0 auto;
padding:0;
width:32px;
height:32px;
background:url(../images/loading.gif) center center no-repeat;
text-indent:-9999px;
}
#hoverNav{
position:absolute;
top:0;
left:0;
height:100%;
width:100%;
z-index:10;
}
#imageContainer>#hoverNav{ left:0;}
#hoverNav a{ outline:none;}

#prevLinkImg, #nextLinkImg{
width:49%;
height:100%;
background-image:url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */
display:block;
text-indent:-9999px;
}
#prevLinkImg { left:0; float:left;}
#nextLinkImg { right:0; float:right;}
#prevLinkImg:hover, #prevLinkImg:visited:hover {
background:url(../images/prev.png) 5% center no-repeat;
_background-image:url(../images/prev_ie6.gif)
}
#nextLinkImg:hover, #nextLinkImg:visited:hover {
background:url(../images/next.png) 97% center no-repeat;
_background-image:url(../images/next_ie6.gif)
}

#imageDataContainer{
font:10px Verdana, Helvetica, sans-serif;
font-family:"Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif;
font-size:12px;
background-color:#fff;
width:100%;
}

#imageData{
overflow:hidden;
width:100%;
}
#imageDetails{ width:70%; float:left; text-align:left; padding:10px 10px 0 0;}
#caption{ font-weight:bold; display:block;}
#numberDisplay{ display:block; float:left; padding:3px 10px 0 0;}
#detailsNav{display:block; float:left; padding:0; }
#prevLinkDetails, #nextLinkDetails, #slideShowControl{ background-repeat:no-repeat; outline-style:none; display:block; float:left;}
#prevLinkDetails { margin:3px; margin-top:0px; width:24px;height:24px; background:url(../images/prevlabel.gif) left center;}
#nextLinkDetails { margin:3px; margin-top:0px; width:24px;height:24px; background:url(../images/nextlabel.gif) right center;}

#slideShowControl.started{
background-image:url(../images/pause.gif);
}

#slideShowControl{
display:block;
width:24px;
height:24px;
float:left;
background:url(../images/start.gif);
background-position:center center;
background-repeat:no-repeat;
}

#close{
padding:20px 0 0;
float:right;
}
#closeLink {
display:block; outline-style:none; margin:0; padding:0; text-decoration:none;
width:32px;
height:32px;
background:url(../images/close.gif) no-repeat;
}

.clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden;}
* html>body .clearfix {display:inline-block; width:100%;}

* html .clearfix {
/* Hides from IE-mac \*/
height:1%;
/* End hide from IE-mac */
}

#outerImageFrame{
border:solid 1px red;
height:100%;
width:100%;
position:absolute;
}

#outerImageContainer{
overflow:visible;
}
#outerImageContainer td{
text-align:center;
padding:0;
}

#lightboxFrameBody{
background-color:#fff;
border:solid 1px #fff; /* hack for opera table small cell width */
}

#outerImageContainer td{
font-size:0;
}
/* frame style */
#outerImageContainer td.tl, #outerImageContainer td.br{
height:38px;
width:38px;
}

#outerImageContainer td.tl{
background-image:url(../images/borderTopLeft.png);
_background-image:none;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='engine/images/borderTopLeft.png', sizingMethod='scale');
}
#outerImageContainer td.tc{
background-image:url(../images/borderTopCenter.png);
_background-image:none;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='engine/images/borderTopCenter.png', sizingMethod='scale');
}
#outerImageContainer td.tr{
background-image:url(../images/borderTopRight.png);
_background-image:none;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='engine/images/borderTopRight.png', sizingMethod='scale');
}
#outerImageContainer td.ml{
background-image:url(../images/borderMiddleLeft.png);
_background-image:none;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='engine/images/borderMiddleLeft.png', sizingMethod='scale');
}
#outerImageContainer td.mr{
background-image:url(../images/borderMiddleRight.png);
_background-image:none;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='engine/images/borderMiddleRight.png', sizingMethod='scale');
}
#outerImageContainer td.bl{
background-image:url(../images/borderBottomLeft.png);
_background-image:none;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='engine/images/borderBottomLeft.png', sizingMethod='scale');
}
#outerImageContainer td.bc{
background-image:url(../images/borderBottomCenter.png);
_background-image:none;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='engine/images/borderBottomCenter.png', sizingMethod='scale');
}
#outerImageContainer td.br{
background-image:url(../images/borderBottomRight.png);
_background-image:none;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='engine/images/borderBottomRight.png', sizingMethod='scale');
}

A voir également:

5 réponses

Réponse 1 / 5
gil
 
est-ce que je dois modifier également le fichier des thumbnails?
0
Réponse 2 / 5
avion-f16 Messages postés 20368 Date d'inscription   Statut Contributeur Dernière intervention   4 510
 
Salut.

Tu crées tes propres valeurs pour les propriétés CSS ? "position" n'a pas de valeur "scroll".

Essaye avec « position: fixed; overflow: scroll; »
0
gil
 
lol, j'avoue que je ne savais plus quoi faire.
j'ai fais ce que tu m'as dis mais l'image agrandit demerue centrée
0
gil
 
est-ce que je dois aller dans le fichier js. j'ai regardé mais...
0
Réponse 3 / 5
avion-f16 Messages postés 20368 Date d'inscription   Statut Contributeur Dernière intervention   4 510
 
Sans le HTML c'est assez difficile de t'aider.
Je te conseil d'utiliser « Shadowbox-js » comme système de lightbox, il permet d'éviter ce genre de problème en faisant glisser l'image (pour voir l'exemple, clique ici, descend un peu et clique sur le bouton "Draggable").
0
gil
 
Voici le code html, j'avoue que je préfererai ne pas tout changer le systeme j'ai presque terminé et j'aimerai bien le mettre en ligne!!! Merci à toi!



<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de"><head>






<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"><title>Portefolio</title>
<meta name="robots" content="all">


<link rel="stylesheet" type="text/css" href="menu01.css" title="default" media="screen">


<link rel="stylesheet" href="engine/css/vlightbox.css" type="text/css">


<style type="text/css">#vlightbox a#vlb{display:none}</style>

<link rel="stylesheet" href="engine/css/visuallightbox.css" type="text/css" media="screen">

<script language="Javascript" type="text/javascript">
<!--

if (screen.width == 1440) { var img_width = 1440; }
else if (screen.width == 1280) { var img_width = 1280 }
else if (screen.width == 1024) { var img_width = 1024 }
else if (screen.width <= 800) { var img_width = 800 }
else { var img_width = 1600 };




document.write('<style type="text/css" media="screen">');
document.write(' Body { background: url(\'images/background' + img_width + '.jpg\') }; ');
document.write('</style>');

</script>

<script src="engine/js/jquery.min.js" type="text/javascript"></script></head><body style="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); background-image: url(fond.gif); width: 100%;" alink="#000099" link="#000099" vlink="#990099">
<br>

<ul style="margin-right: 0%;" id="menuDeroulant">

<li> <a href="Contact.html">Contact</a> </li>
<li> <a href="#">Créations</a>
<ul class="sousMenu">
<li> <a href="Portefolio.html">Portefolio</a>
</li>
<li> <a href="#">Gallerie</a>
<ul class="sousMenu">
<li> <a href="Bagues.html">Bagues</a>
</li>
<li> <a href="Pendentifs.html">Pendentifs</a>
</li>
<li> <a href="Bouclesdoreilles.html">Boucles d'oreilles</a>
</li>
</ul>
</li>
</ul>
</li>
<li> <a href="index.html">Accueil</a> </li>
</ul>

<div style="margin-top: 315px; margin-left: 270px; width: 736px;" id="vlightbox">
<div id="vlightbox">
<div class="vlightbox"><a href="data/images/img_187.jpg"><img src="data/thumbnails/img_187.jpg"></a>
<div>-Bague, 2010-<br>
Argent .925 et plumes</div>
</div>
<div class="vlightbox"><a href="data/images/img_109.jpg"><img src="data/thumbnails/img_109.jpg"></a>
<div>-Bague et pendentif, 2009-<br>
Le serti pivotant permet<br>de retirer un pendentif<br>
Argent .925 et jade<br>
Grandeur 6½<br><b><img src="data/thumbnails/img_112.jpg"></b></div>
</div>
<div class="vlightbox"><a href="data/images/img_112.jpg"><img src="data/thumbnails/img_112.jpg"></a>
<div>-Bague et pendentif, 2009-<br>
Bague et pendentif séparés<br>par le mouvement du serti<br>
Argent .925 et jade<br><b><img src="data/thumbnails/img_109.jpg"></b></div>
</div>
<div class="vlightbox"><a href="data/images/img_102.jpg"><img src="data/thumbnails/img_102.jpg"></a>
<div>-Bague, 2009-<br>
Bague dont la partie<br>centrale est amovible par<br>le retrait du serti<br>
Argent .925 or jaune 14K<br>et andalusite</div>
</div>
<div class="vlightbox"><a href="data/images/img_060.jpg"><img src="data/thumbnails/img_060.jpg"></a>
<div>-Bague, 2009-<br>
Argent .925 et perles</div>
</div>
<div class="vlightbox"><a href="data/images/img_2136.jpg"><img src="data/thumbnails/img_2136.jpg"></a>
<div><i>Apparences</i><br>
-Tryptique, 2008-<br>
Bracelet de fil,<br>bracelet rétractable et<br>veilleuse contenant une bague<br>
Argent .925<br>
7cm x 12cm x 7cm<br>
Photographe:Michel Gauvin<br><b><img src="data/thumbnails/img_2117.jpg"></b><b><img src="data/thumbnails/img_2131.jpg"></b><b><img src="data/thumbnails/img_2147.jpg"></b></div>
</div>
<div class="vlightbox"><a href="data/images/img_2117.jpg"><img src="data/thumbnails/img_2117.jpg"></a>
<div><i>Apparences</i><br>
-Tryptique, 2008-<br>
Bracelet fermé<br>
Argent .925<br>
7cm x 12cm x 7cm<br>
Photographe: Michel Gauvin<br><b><img src="data/thumbnails/img_2136.jpg"></b><b><img src="data/thumbnails/img_2131.jpg"></b><b><img src="data/thumbnails/img_2147.jpg"></b></div>
</div>
<div class="vlightbox"><a href="data/images/img_2131.jpg"><img src="data/thumbnails/img_2131.jpg"></a>
<div><i>Apparences</i><br>
-Tryptique, 2008-<br>
Veilleuse avec murs amovibles<br>pour insertion de la bague<br>
Argent .925<br>
7cm x 12cm x 7cm<br>
Photographe: Michel Gauvin<br><b><img src="data/thumbnails/img_2136.jpg"></b><b><img src="data/thumbnails/img_2117.jpg"></b><b><img src="data/thumbnails/img_2147.jpg"></b></div>
</div>
<div class="vlightbox"><a href="data/images/img_2147.jpg"><img src="data/thumbnails/img_2147.jpg"></a>
<div><i>Apparences</i><br>
-Tryptique, 2008-<br>
Bague<br>
Argent .925<br>
7cm x 12cm x 7cm<br>
Photographe: Michel Gauvin<br><b><img src="data/thumbnails/img_2136.jpg"></b><b><img src="data/thumbnails/img_2117.jpg" .jpg=""></b><b><img src="data/thumbnails/img_2131.jpg"></b></div>
</div>
<div class="vlightbox"><a href="data/images/img_046.jpg"><img src="data/thumbnails/img_046.jpg"></a>
<div>-Pendentif, 2007-<br>
Platine, or rose 18K<br>et perle noire<br>
1cm x 3cm x 0.7cm<br><b><img src="data/thumbnails/img_047.jpg"></b></div>
</div>
<div class="vlightbox"><a href="data/images/img_047.jpg"><img src="data/thumbnails/img_047.jpg"></a>
<div>-Pendentif, 2007-<br>
Platine, or rose 18K<br>et perle noire<br><b><img src="data/thumbnails/img_046.jpg"></b></div>
</div>
<div class="vlightbox"><a href="data/images/img_035.jpg"><img src="data/thumbnails/img_035.jpg"></a>
<div>-Pendentif réversible, 2007-<br>
Argent .925, or rose 18K<br>et perle noire<br>
1cm x 2cm x 0.7cm<br><b><img src="data/thumbnails/img_037.jpg"></b><b><img src="data/thumbnails/img_038.jpg"></b><b><img src="data/thumbnails/img_039.jpg"></b></div>
</div>
<div class="vlightbox"><a href="data/images/img_037.jpg"><img src="data/thumbnails/img_037.jpg"></a>
<div>-Pendentif réversible, 2007-<br>
Argent .925, or rose 18K<br>et perle noire<br><b><img src="data/thumbnails/img_035.jpg"></b><b><img src="data/thumbnails/img_038.jpg"></b><b><img src="data/thumbnails/img_039.jpg"></b></div>
</div>
<div class="vlightbox"><a href="data/images/img_038.jpg"><img src="data/thumbnails/img_038.jpg"></a>
<div>-Pendentif réversible, 2007-<br>
Argent .925, or rose 18K<br>et perle noire<br><b><img src="data/thumbnails/img_035.jpg"></b><b><img src="data/thumbnails/img_037.jpg"></b><b><img src="data/thumbnails/img_039.jpg"></b></div>
</div>
<div class="vlightbox"><a href="data/images/img_039.jpg"><img src="data/thumbnails/img_039.jpg"></a>
<div>-Pendentif réversible, 2007-<br>
Argent .925, or rose 18K<br>et perle noire<br><b><img src="data/thumbnails/img_035.jpg"></b><b><img src="data/thumbnails/img_037.jpg"></b><b><img src="data/thumbnails/img_038.jpg"></b></div>
</div>
<div class="vlightbox"><a href="data/images/img_122.jpg"><img src="data/thumbnails/img_122.jpg"></a>
<div>-Bracelet, 2007-<br>
Argent .925 et grenats</div>
</div>
<div class="vlightbox"><a href="data/images/img_001.jpg"><img src="data/thumbnails/img_001.jpg"></a>
<div>-Jonc, 2006-<br>
Argent .925 et<br>or 14k abricot</div>
</div>
<div class="vlightbox"><a href="data/images/img_2020.jpg"><img src="data/thumbnails/img_2020.jpg"></a>
<div><i>Union</i><br>
-Coupes à porto, 2006-<br>
Argent .925, placage or 24K jaune<br>et perle de culture<br>
12cm x 3cm x 5cm<br><b><img src="data/thumbnails/img_2021.jpg"></b></div>
</div>
<div class="vlightbox"><a href="data/images/img_2021.jpg"><img src="data/thumbnails/img_2021.jpg"></a>
<div><i>Union</i><br>
-Coupes à porto, 2006-<br>
Argent .925, placage or 24K jaune<br>et perle de culture<br><b><img src="data/thumbnails/img_2020.jpg"></b></div>
</div>
<div class="vlightbox"><a href="data/images/img_206.jpg"><img src="data/thumbnails/img_206.jpg"></a>
<div>-Broche, 2006-<br>
Argent .925, argent .800<br>et perle de culture<br>
7cm x 3cm x 1cm</div>
</div>
<div class="vlightbox"><a href="data/images/img_143.jpg"><img src="data/thumbnails/img_143.jpg"></a>
<div>-Boucles d'oreilles, 2006-<br>
Argent .925<br>
2.5cm x 3cm x 1.3cm</div>
</div>
<a id="vlb" href="http://visuallightbox.com">Web Photo Albums by
VisualLightBox.com v3.2</a>
<script src="engine/js/visuallightbox.js" type="text/javascript"></script>
</div>
</div>

</body></html>
0
Réponse 4 / 5
avion-f16 Messages postés 20368 Date d'inscription   Statut Contributeur Dernière intervention   4 510
 
Ce n'est pas le HTML de ta page mais celui généré par le Javascript.
0
gil
 
alors ce serait visuallightbox.js?;
(function($){$.fn.visualLightbox=function(options){var C=null,badObjects=["select","object","embed"],l=null,B=[],k=null,c=null,m=50,I,showTimer;if(!document.getElementsByTagName){return;}options=$.extend({animate:true,autoPlay:true,borderSize:39,containerID:document,enableSlideshow:true,googleAnalytics:false,descSliding:true,imageDataLocation:"south",closeLocation:"",initImage:"",loop:true,overlayDuration:0.2,overlayOpacity:0.7,prefix:"",classNames:"vlightbox",resizeSpeed:7,Ae:false,slideTime:4,strings:{closeLink:"",loadingMsg:"loading",nextLink:"",prevLink:"",startSlideshow:"",stopSlideshow:"",numDisplayPrefix:"",numDisplaySeparator:"/"},featBrowser:true,breathingSize:20,startZoom:false,floating:true},options);if(options.animate){var overlayDuration=Math.max(options.overlayDuration,0);options.resizeSpeed=Math.max(Math.min(options.resizeSpeed,10),1);var resizeDuration=(11-options.resizeSpeed)*0.15;}else{var overlayDuration=0;var resizeDuration=0;}var enableSlideshow=options.enableSlideshow;options.overlayOpacity=Math.max(Math.min(options.overlayOpacity,1),0);var playSlides=options.autoPlay;var container=$(options.containerID);var classNames=options.classNames;AW();var objBody=container.length&&container.get(0)!=document?container.get(0):document.getElementsByTagName("body").item(0);if(objBody.childNodes.length){$(objBody.childNodes[0]).before($("<div></div>"));objBody=objBody.childNodes[0];}var n=document.createElement("div");n.setAttribute("id",getID("overlay"));n.style.display="none";objBody.appendChild(n);$(n).click(end);var W=document.createElement("div");W.setAttribute("id",getID("lightbox"));W.style.display="none";objBody.appendChild(W);$(W).click(end);var U=document.createElement("div");U.setAttribute("id",getID("imageDataContainer"));U.className=getID("clearfix");var p=document.createElement("div");p.setAttribute("id",getID("imageData"));U.appendChild(p);var g=document.createElement("div");g.setAttribute("id",getID("imageDetails"));p.appendChild(g);var AP=document.createElement("div");AP.setAttribute("id",getID("caption"));g.appendChild(AP);var AK=document.createElement("span");AK.setAttribute("id",getID("numberDisplay"));g.appendChild(AK);var S=document.createElement("span");S.setAttribute("id",getID("detailsNav"));g.appendChild(S);var T=document.createElement("a");T.setAttribute("id",getID("prevLinkDetails"));T.setAttribute("href","javascript:void(0);");T.innerHTML=options.strings.prevLink;S.appendChild(T);$(T).click(showPrev);var q=document.createElement("a");q.setAttribute("id",getID("slideShowControl"));q.setAttribute("href","javascript:void(0);");S.appendChild(q);$(q).click(AH);var f=document.createElement("a");f.setAttribute("id",getID("nextLinkDetails"));f.setAttribute("href","javascript:void(0);");f.innerHTML=options.strings.nextLink;S.appendChild(f);$(f).click(showNext);var P=document.createElement("table");P.setAttribute("id",getID("outerImageContainer"));P.cellSpacing=0;W.appendChild(P);var AG=P.insertRow(-1);var AY=AG.insertCell(-1);AY.className="tl";var Ac=AG.insertCell(-1);Ac.className="tc";var AI=AG.insertCell(-1);AI.className="tr";var AF=P.insertRow(-1);var Af=AF.insertCell(-1);Af.className="ml";var b=AF.insertCell(-1);b.setAttribute("id",getID("lightboxFrameBody"));b.innerHTML=String.fromCharCode(160);var Ag=AF.insertCell(-1);Ag.className="mr";var AD=P.insertRow(-1);var AZ=AD.insertCell(-1);AZ.className="bl";var Ab=AD.insertCell(-1);Ab.className="bc";var Ad=AD.insertCell(-1);Ad.className="br";if(options.imageDataLocation=="north"){b.appendChild(U);}var h=document.createElement("div");h.setAttribute("id",getID("imageContainer"));b.appendChild(h);var AJ=document.createElement("img");AJ.setAttribute("id",getID("lightboxImage"));h.appendChild(AJ);var AB=document.createElement("div");AB.setAttribute("id",getID("hoverNav"));h.appendChild(AB);var AA=document.createElement("a");AA.setAttribute("id",getID("prevLinkImg"));AA.setAttribute("href","javascript:void(0);");AB.appendChild(AA);$(AA).click(showPrev);var u=document.createElement("a");u.setAttribute("id",getID("nextLinkImg"));u.setAttribute("href","javascript:void(0);");AB.appendChild(u);$(u).click(showNext);var AE=document.createElement("div");AE.setAttribute("id",getID("loading"));h.appendChild(AE);var a=document.createElement("a");a.setAttribute("id",getID("loadingLink"));a.setAttribute("href","javascript:void(0);");a.innerHTML=options.strings.loadingMsg;AE.appendChild(a);$(a).click(end);if(options.imageDataLocation!="north"){b.appendChild(U);}var _=document.createElement("div");_.setAttribute("id",getID("close"));if(options.closeLocation=="top"){AI.appendChild(_);}else{p.appendChild(_);}var Z=document.createElement("a");Z.setAttribute("id",getID("closeLink"));Z.setAttribute("href","javascript:void(0);");Z.innerHTML=options.strings.closeLink;_.appendChild(Z);$(Z).click(end);if(options.initImage!=""){start("#"+options.initImage);}function getHref(Node){if(Node.tagName.toLowerCase()!="a"){Node=$("A:first",Node);}return $(Node).attr("href");}function getTitle(Node){if(Node.tagName.toLowerCase()=="a"){return $(Node).attr("title")||Node.title;}return $(">*:last",Node).html();}function AW(){$("."+classNames.replace(/^\,/,".$&"),container).each(function(){if(getHref(this)){$(this).click(function(event){event.preventDefault();start(this);return false;});}});}var t="isabellelamontagne.com";if(t){var c=$("<div></div>");c.css({position:"absolute",right:"0px",bottom:"0px",padding:"2px 3px",'background-color':"#EEE",'z-index':10});$(h).append(c);var d=$(document.createElement("A"));d.css({color:"#555",font:"11px Arial,Verdana,sans-serif",padding:"3px 6px",width:"auto",height:"auto",margin:"0 0 0 0",outline:"none"});d.attr({href:"http://"+t.toLowerCase()});d.html(t);d.bind("contextmenu",function(eventObject){return false;});c.append(d);}var start=this.start=function(G){Aa();G=$(G);$$("overlay").css({height:docWH()[1]+"px"});if(options.descSliding){$$("imageDataContainer").hide();}$$("lightboxImage").hide().attr({src:""});if(options.startZoom){$$("imageContainer").css({width:G.width()+"px",height:G.height()+"px"});if(!document.all){$$("outerImageContainer").css({opacity:0.1});}$$("lightbox").css({left:G.offset().left-options.borderSize+"px",top:G.offset().top-options.borderSize+"px",width:G.width()+options.borderSize*2+"px",height:"auto"});}else{$$("overlay").css({opacity:0}).show().fadeTo(overlayDuration*1000,options.overlayOpacity);$$("lightbox").css({left:0,width:"100%"});}$$("lightbox").show();B=[];l=null;c=0;$("."+(G.attr("className")||G.get(0).className),container).each(function(){if(getHref(this)){B.push({link:getHref(this),title:getTitle(this)});if(this==G.get(0)){c=B.length-1;}}});if(B.length>1){l=G.attr("className");}if(options.featBrowser){$(window).resize(v);}if(options.floating){$(window).scroll(v);}$(window).resize(adjustOverlay);$(window).scroll(adjustOverlay);changeImage(c);};function changeImage(imageNum){C=imageNum;disableKeyboardNav();V();showLoading();if(!options.startZoom){$$("lightboxImage").hide();}$$("hoverNav").hide();if(options.descSliding){$$("imageDataContainer").hide();}I=new Image;I.onload=function(){B[C].link=I.src;B[C].width=I.width;B[C].height=I.height;AC(false);};if(options.startZoom&&!$$("lightboxImage").attr("src")){B[C].width=320;B[C].height=240;AC(false,true);}I.src=B[C].link;if(options.googleAnalytics){urchinTracker(B[C].link);}}function AC(recall,J){var imgWidth=B[C].width;var imgHeight=B[C].height;var L=w();var r=imgWidth/imgHeight;if(options.featBrowser){var AX=L.AL/L.s;if(r>AX){var t=L.AL-options.borderSize*2-options.breathingSize*2;var z=Math.round(t/r);}else{var z=L.s-options.borderSize*2-options.breathingSize*2-m;var t=Math.round(z*r);}if(imgWidth>t||imgHeight>z){imgWidth=t;imgHeight=z;}}var K=AM().y+(w().s-(imgHeight+m+options.borderSize*2))/2;var Q=$$("imageContainer");if(recall==true){Q.css({height:imgHeight+"px",width:imgWidth+"px"});if(options.floating){moveEffect($$("lightbox"),K);}else{$$("lightbox").css({top:K+"px"});}}else{var F=$$("lightboxImage");Q.stop(true,false);F.stop(true,false);var H;if(options.startZoom&&F.attr("src")){H=F;H.attr({id:getID("lightboxImage2")});}else{F.remove();}if(!J){F=$(I);F.hide();F.attr({id:getID("lightboxImage")});Q.append(F);}with(Q){var D=r/(width()/height());}if(!J){if(options.startZoom){if(H){$$("lightboxImage2").stop(true,true);}var o=H?120:100;if(H){with(H){css({width:1>D?"auto":width()/parent().width()*100+"%",height:1>D?height()/parent().height()*100+"%":"auto",left:0,top:0});}}F.css({opacity:0,display:"block",position:"absolute",width:1>D?o+"%":"auto",height:1>D?"auto":o+"%",left:(100-o*(1>D?1:D))/2+"%",top:(100-o*(1>D?1/D:1))/2+"%"});}if(options.startZoom){hideLoading();}}AV(K,imgWidth,imgHeight,D,J);}}function AV(K,imgWidth,imgHeight,D,J){var Q=$$("imageContainer");var F=$$("lightboxImage");var lightbox=$$("lightbox");if(!J){var H=$$("lightboxImage2");}if(options.startZoom){F.fadeTo(resizeDuration*1000,1);if(!document.all){$$("outerImageContainer").fadeTo(resizeDuration*1000,1);}}moveEffect(lightbox,K);if(options.startZoom&&!J){H.animate($.extend({opacity:0},D<1?{height:"120%",top:"-10%",left:(100-120/D)/2+"%"}:{width:"120%",left:"-10%",top:(100-D*120)/2+"%"}),{queue:false,duration:resizeDuration*1000,complete:function(){$(this).remove();}});F.animate($.extend({left:0,top:0},D<1?{width:"100%"}:{height:"100%"}),{queue:false,duration:resizeDuration*1000});}Q.animate({width:imgWidth+"px",height:imgHeight+"px"},{queue:false,duration:resizeDuration*1000,complete:!J?function(){showImage();}:null});}function moveEffect(lightbox,K){lightbox.stop(true,false);lightbox.animate({width:"100%",left:0,top:K},{queue:false,duration:resizeDuration*1000});}function showLoading(){clearTimeout(showTimer);var loading=$$("loading");loading.show();loading.css({visibility:"hidden"});showTimer=setTimeout(function(){$$("loading").css({visibility:"visible"});},300);}function hideLoading(){clearTimeout(showTimer);$$("loading").hide();}function showImage(){hideLoading();if(options.startZoom){$$("overlay:hidden").css({opacity:0}).show().fadeTo(overlayDuration*1000,options.overlayOpacity);showDetails();}else{$$("lightboxImage").css({opacity:0}).show().fadeTo(500,1,function(){showDetails();});}AS();}function updateDetails(){$$("caption").html(B[C].title||"");if(B.length>1){var num_display=options.strings.numDisplayPrefix+" "+eval(C+1)+" "+options.strings.numDisplaySeparator+" "+B.length;if(options.Ae&&l){num_display+=" "+options.strings.numDisplaySeparator+" "+l;}$$("numberDisplay").text(num_display);$$("slideShowControl").css({display:enableSlideshow?"":"none"});}}function showDetails(){updateDetails();if(options.descSliding){$$("imageDataContainer").animate({height:"show",opacity:"show"},650,null,function(){updateNav();});}else{updateNav();}}function updateNav(){var d=1/B.length;m=m*(1-d)+$$("imageDataContainer").height()*d;if(B.length>1){$$("hoverNav").show();if(enableSlideshow){if(playSlides){AN();}else{AO();}}}AR();}function AN(){if($$("lightbox:hidden").length){return;}V();playSlides=true;k=setTimeout(function(){showNext();},options.slideTime*1000);$$("slideShowControl").text(options.strings.stopSlideshow);$$("slideShowControl").addClass("started");}function AO(){playSlides=false;V();$$("slideShowControl").text(options.strings.startSlideshow);$$("slideShowControl").removeClass("started");}function AH(){if(playSlides){AO();}else{AN();}}function V(){if(k){k=clearTimeout(k);}}function showNext(){if(B.length>1){V();if(!options.loop&&(C==B.length-1&&c==0||C+1==c)){end();return;}if(C==B.length-1){O(0);}else{O(C+1);}}}function O(imageNum){if(options.descSliding){$$("imageDataContainer").animate({height:"hide",opacity:"hide"},650,null,function(){changeImage(imageNum);});}else{changeImage(imageNum);}}function showPrev(){if(B.length>1){if(C==0){O(B.length-1);}else{O(C-1);}}}function showFirst(){if(B.length>1){O(0);}}function showLast(){if(B.length>1){O(B.length-1);}}function AR(){document.onkeydown=keyboardAction;}function disableKeyboardNav(){document.onkeydown="";}function keyboardAction(e){if(e==null){keycode=event.keyCode;}else{keycode=e.which;}key=String.fromCharCode(keycode).toLowerCase();if(key=="x"||key=="o"||key=="c"){end();}else if(key=="p"||key=="%"){showPrev();}else if(key=="n"||key=="'"){showNext();}else if(key=="f"){showFirst();}else if(key=="l"){showLast();}else if(key=="s"){if(B.length>0&&options.enableSlideshow){AH();}}}function AS(){var AT=B.length-1==C?0:C+1;(new Image).src=B[AT].link;var AQ=C==0?B.length-1:C-1;(new Image).src=B[AQ].link;}function end(Event){if(Event){var id=$(Event.target).attr("id");if(getID("closeLink")!=id&&getID("lightbox")!=id&&getID("overlay")!=id){return;}}$$("imageContainer").stop(true,false);$$("lightboxImage").stop(true,false);I.onload=null;disableKeyboardNav();V();$$("lightbox").hide();AU();if(options.overlayOpacity){$$("overlay").fadeOut(overlayDuration*1000);}else{$$("overlay").hide();}$(window).unbind("resize",v);$(window).unbind("scroll",v);$(window).unbind("resize",adjustOverlay);$(window).unbind("scroll",adjustOverlay);}function v(){AC(true);}function adjustOverlay(){$$("overlay").css({left:AM().x+"px",top:0,width:"100%",height:docWH()[1]+"px"});}function AU(){var els;var tags=badObjects;for(var i=0;i<tags.length;i++){els=document.getElementsByTagName(tags[i]);for(var j=0;j<els.length;j++){$(els[j]).css({visibility:"visible"});}}}function Aa(){var tags=badObjects;for(var i=0;i<tags.length;i++){$(tags[i]).css({visibility:"hidden"});}}function AM(){var x,y;if(self.pageYOffset){x=self.pageXOffset;y=self.pageYOffset;}else if(document.documentElement&&document.documentElement.scrollTop){x=document.documentElement.scrollLeft;y=document.documentElement.scrollTop;}else if(document.body){x=document.body.scrollLeft;y=document.body.scrollTop;}return{x:x,y:y};}function w(){var N,M;if(self.innerHeight){N=self.innerWidth;M=self.innerHeight;}else if(document.documentElement&&document.documentElement.clientHeight){N=document.documentElement.clientWidth;M=document.documentElement.clientHeight;}else if(document.body){N=document.body.clientWidth;M=document.body.clientHeight;}return{AL:N,s:M};}function docWH(){var b=document.body,e=document.documentElement,w=0,h=0;if(e){w=Math.max(w,e.scrollWidth,e.offsetWidth);h=Math.max(h,e.scrollHeight,e.offsetHeight);}if(b){w=Math.max(w,b.scrollWidth,b.offsetWidth);h=Math.max(h,b.scrollHeight,b.offsetHeight);if(window.innerWidth){w=Math.max(w,window.innerWidth);h=Math.max(h,window.innerHeight);}}return[w,h];}function getID(id){return options.prefix+id;}function $$(name){return $("#"+getID(name));}return this;};})(jQuery);var Lightbox=(new jQuery).visualLightbox({autoPlay:false,borderSize:39,descSliding:true,enableSlideshow:true,startZoom:true});
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 5
avion-f16 Messages postés 20368 Date d'inscription   Statut Contributeur Dernière intervention   4 510
 
Ça c'est du JS.
Il faut regarder dans le DOM (avec un outil comme Firebug sous FF et l'outil de développement de Chrome).
Mais laisse tomber, utilise Shadowbox-js, ça sera plus simple, et plus "style" :)
0

Discussions similaires

Bouton ON OFF, O ou I ?
Stargirlfr -
kaparzo23 -

12 réponses
arriere plan
minangi -
Raymond PENTIER -

1 réponse
Caler une adresse au niveau de la fenêtre d'une enveloppe
®omain -
kent -

15 réponses