Light Box
Scrivi le tue richieste di aiuto nella sezione relativa.
Posta qui eventuali problemi con jQuery
- Questo topic ha 1 risposta, 2 partecipanti ed รจ stato aggiornato l'ultima volta 12 anni, 6 mesi fa da jqueryitalia.
Stai visualizzando 2 post - dal 1 a 2 (di 2 totali)
- AutorePost
- 23 Agosto 2011 alle 14:51 #1623AngeloPartecipante
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.;
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>19 Settembre 2011 alle 20:42 #1876jqueryitaliaAmministratoreCiao 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.;
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> - AutorePost
Stai visualizzando 2 post - dal 1 a 2 (di 2 totali)
- Devi essere connesso per rispondere a questo topic.