jQuery Italia - Forum » Supporto ed Aiuto » Problemi con jQuery

1. 

   Angelo
   Membro

   Ciao a tutti, sto sviluppando un light box ma sto avendo problemi con il calcolo delle dimensioni, l'immagine si dovrebbe trovare al centro dello schermo ma non capisco dove sbaglio...
   

   <style>
   .darkContent{
   position: fixed;
   background-color: #FFFFFF;
   border: 5px solid #000000;
   padding: 8px;
   overflow: hidden;
   color: #333;
   font-family: arial;
   }
   .darkCover{
   position: fixed;
   left: 0px;
   top: 0px;
   z-index: 100;
   background-color: #000000;
   opacity: 0;
   width: 100%;
   height: 100%;
   }
   </style>
   <script type="text/javascript">
   $(document).ready(function(){
   $(".darkBox").each(function(){
   var div = $($(this).attr("href"));
   div.hide();
   $(this).click(function(){
   darkBox(div);
   });
   });
   });
   
   function darkBox(div){
   
   (div.attr("width")) ? w = div.attr("width") : w = div.width();
   (div.attr("height")) ? h = div.attr("height") : h = div.height();
   var box = $("<div></div>").addClass("darkCover");
   
   $("body").prepend(box);
   box.fadeTo("fast",0.8);
   var contentBox = $("<div></div>").html(div.html());
   contentBox.addClass("darkContent");
   
   var open = "center";
   switch(open){
   case "center":
   default:
   x = $(window).width()/2;
   y = $(window).height()/2;
   startW = h-y/2;
   startH = w-x/2;
   endTop = y - h/2;
   endLeft = x - w/2;
   break;
   }
   alert(startW);
   contentBox.css({"left":x+"px","top":y+"px","z-index":"200"});
   contentBox.css({"width":startW+"px","height":startH+"px"});
   $("body").prepend(contentBox);
   
   contentBox.animate({
   opacity:1,
   width:w+"px",
   height:h+"px",
   top:endTop+"px",
   left:endLeft+"px"
   },1000,"easeOutExpo");
   
   box.click(function(){
   box.fadeOut();
   contentBox.fadeOut();
   });
   
   }
   </script>
   
   <a href="#login">Box</a>
   <div id="login" height="796px" width="625px">
   <img src="4d7336d5da630.jpg">
   </div>

   Pubblicato 8 months fa #
   Magical rainbow ponies
2. 

   jqueryitalia
   Amministratore

   Ciao Angelo.

   Ho provato il tuo script ed ho trovato alcuni errori:
   1) non hai settato la classe darkBox all'ancora;
   2) gli attributi height e width che hai inserito nel div non vanno bene.

   Io ho fatto le modifiche che trovi qui sotto ed ora, a parte le dimensioni della finestra che viene creata, sembra funzionare tutto correttamente.

   SCRIPT:
   

   $(document).ready(function(){
   			$(".darkBox").each(function(){
   				var myDiv = $($(this).attr("href"));
   				$(myDiv).hide();
   				$(this).click(function(){
   					darkBox(myDiv);
   				});
   			});
   		});
   
   		function darkBox(myDiv){
   			w = $(myDiv).width();
   			h = $(myDiv).height();
   			var box = $("<div></div>").addClass("darkCover");
   
   			$("body").prepend(box);
   			box.fadeTo("fast",0.8);
   			var contentBox = $("<div></div>").html($(myDiv).html());
   			contentBox.addClass("darkContent");
   
   			var open = "center";
   			switch(open){
   				case "center":
   				default:
   					x = $(window).width()/2;
   					y = $(window).height()/2;
   					startW = h-y/2;
   					startH = w-x/2;
   					endTop = y - h/2;
   					endLeft = x - w/2;
   				break;
   			}
   
   			alert(startW);
   			contentBox.css({"left":x+"px","top":y+"px","z-index":"200"});
   			contentBox.css({"width":startW+"px","height":startH+"px"});
   			$("body").prepend(contentBox);
   
   			contentBox.animate({
   				opacity:1,
   				width:w+"px",
   				height:h+"px",
   				top:endTop+"px",
   				left:endLeft+"px"
   			},1000,"easeOutExpo");
   
   			box.click(function(){
   				box.fadeOut();
   				contentBox.fadeOut();
   			});
   		}

   HTML:
   

   <a class="darkBox" href="#login">Box</a>
   <div id="login" style="height:796px;width:625px">
   	<img src="4d7336d5da630.jpg">
   </div>

   Pubblicato 8 months fa #
   Magical rainbow ponies

RSS feed for this topic

Replica

Devi aver fatto il login per poter pubblicare articoli.