Dude
Hi,
kann mir jemand beim debuggen einer jQuery-Lightbox helfen?
Problem ist im "DEBUG"-Kommentar erklärt.
Bevor sich die Lightbox öffnet sollte die Höhe ermittelt werden um dann margin-top minus der Hälfte der Höhe zu setzen. Leider bleibe ich damit ohne Erfolg.
Gruß
kann mir jemand beim debuggen einer jQuery-Lightbox helfen?
Problem ist im "DEBUG"-Kommentar erklärt.
Code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Debug Lightbox</title>
<style type="text/css">
.juLightbox_container{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
z-index:2;
background-color:rgba(1,1,1,0.5);
display:none;
}
.juLightbox{
top:0;
left:0;
position:fixed;
background-color:#eeeeee;
top:50%;
left:50%;
/** Mittig variabel **/
width:auto;
height:auto;
/*
margin-left:-250px;
margin-top:-125px;
*/
/** /Mittig **/
padding:20px;
display:block;
z-index:100;
border:1px solid #fff;
border-radius:20px;
-webkit-border-radius:20px;
-moz-border-radius:20px;
-khtml-border-radius:20px;
-webkit-box-shadow:0px 0px 26px 12px rgba(132, 181, 0, 0.5); /* WebKit */
-moz-box-shadow:0px 0px 26px 12px rgba(132, 181, 0, 0.5); /* Firefox */
box-shadow:0px 0px 26px 12px rgba(132, 181, 0, 0.5); /* Standard */
}
.juLightbox .juLightbox_close{
top:0;
right:0;
position:absolute;
margin:-15px -15px 0 0;
width:30px;
height:30px;
background:transparent url('images/close_btn.png') no-repeat;
text-indent:-9999999px;
cursor:pointer;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
/**
* Plugin erstellt eine Lightbox
* mit variablem Inhalt
* auf Klick oder auf Seitenload
*/
jQuery.fn.juLightbox = function(options){
// Settings init
var settings = jQuery.extend({
width: "500px",
height: "auto",
containerClass: "juLightbox_container",
lightboxClass: "juLightbox",
lightboxCloseClass: "juLightbox_close",
onPageLoad: false,
html: $(this).html()
}, options);
$(this).css("cursor", "pointer");
/**
* Funktion erstellt
* Lightbox mit geeigneten
* CSS Proportionen
* und init Event
*/
showLightbox = function(){
// Breite festlegen
if(settings.width == "auto")
settings.width = "500px";
settings.width = settings.width.replace("px", "");
/********* Div Container für Lightbox erstellen *********/
$('<div>').appendTo('body').addClass(settings.containerClass);
$('<div>', {
html: settings.html,
css: {
"width": settings.width + 'px',
"margin-left": "-"+(settings.width/2)+ 'px'
}
}).appendTo('.'+settings.containerClass).addClass(settings.lightboxClass);
$('<div>').appendTo('.'+settings.lightboxClass).addClass(settings.lightboxCloseClass);
/********* /Div Container für Lightbox erstellen *********/
// Höhe von Lightbox auslesen (da auto)
// und anschließend margin-top die hälfte minus setzen
if(settings.height == "auto"){
$('.' + settings.lightboxClass).css("display", "block");
settings.height = $('.' + settings.lightboxClass).height();
$('.' + settings.lightboxClass).css("display", "none");
/* DEBUG:
Der Div hat via CSS die Property height:auto; doch trotzdem
sollte es möglich sein, die wirkliche (berechnete) Höhe
auszulesen. Ob schon versucht damit, den Div erst sichtbar zu machen.
Wie? Könnte es mit document.ready zusammenhängen?
*/
console.log(settings.height);
return;
/* /DEBUG */
}else{
// Entferne die px Characters aus dem String
settings.height = settings.height.replace('px', '');
}
$('.'+settings.lightboxClass).css({
"margin-top": "-"+(settings.height/2)+"px",
//"height": settings.height + 'px'
});
// Einblenden
$('.' + settings.containerClass).fadeIn("slow");
// Close Eventhandler init
$('.' + settings.lightboxCloseClass).click(function(e) {
$('.' + settings.containerClass).fadeOut("slow", function(){
$('.'+settings.containerClass).empty();
$('.'+settings.containerClass).remove();
});
});
}
if(settings.onPageLoad == false){
$(this).click(function(e) {
showLightbox();
});
}else{
showLightbox();
}
};
</script>
</head>
<body>
<span class="lightbox">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
sed diam nonumy eirmod tempor invidunt ut labore et dolore
magna aliquyam erat, sed diam voluptua. At vero eos et accusam
et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum
dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
</span>
<script type="text/javascript">
$(document).ready(function(){
$(".lightbox").juLightbox({
width: "auto",
height: "auto"
});
});
</script>
</body>
</html>Gruß
