Hallo Tuts,
ich habe folgendes Problem und zwar möchte ich die Facebox in meine Seite einbinden doch gibt es Probleme mit anderen definitionen in der CSS Abstraktion..
Facebox hat leider noch table design und kommt daher mit anderen css tabellen in berührung so das es nicht richtig dargestellt werden kann.
So wie kann ich folgenden code also table in div umwandeln ?
CSS
JS
Wäre euch echt sehr dankbar wenn mir da jemand Helfen könnte.
Liebe Grüße
Sascha
ich habe folgendes Problem und zwar möchte ich die Facebox in meine Seite einbinden doch gibt es Probleme mit anderen definitionen in der CSS Abstraktion..
Facebox hat leider noch table design und kommt daher mit anderen css tabellen in berührung so das es nicht richtig dargestellt werden kann.
So wie kann ich folgenden code also table in div umwandeln ?
CSS
Code:
#facebox .b {
background:url(/facebox/images/b.png);
}
#facebox .tl {
background:url(/facebox/images/tl.png);
}
#facebox .tr {
background:url(/facebox/images/tr.png);
}
#facebox .bl {
background:url(/facebox/images/bl.png);
}
#facebox .br {
background:url(/facebox/images/br.png);
}
#facebox {
position: absolute;
top: 0;
left: 0;
z-index: 100;
text-align: left;
}
#facebox .popup {
position: relative;
}
#facebox table {
border-collapse: collapse;
}
#facebox td {
border-bottom: 0;
padding: 0;
}
#facebox .body {
padding: 10px;
background: #fff;
width: 370px;
}
#facebox .loading {
text-align: center;
}
#facebox .image {
text-align: center;
}
#facebox img {
border: 0;
margin: 0;
}
#facebox .footer {
border-top: 1px solid #DDDDDD;
padding-top: 5px;
margin-top: 3px;
text-align: center;
}
#facebox .tl, #facebox .tr, #facebox .bl, #facebox .br {
height: 10px;
width: 10px;
overflow: hidden;
padding: 0;
}
#facebox_overlay {
position: fixed;
top: 0px;
left: 0px;
height:100%;
width:100%;
}
.facebox_hide {
z-index:-100;
}
.facebox_overlayBG {
background-color: #000;
z-index: 99;
}
* html #facebox_overlay { /* ie6 hack */
position: absolute;
height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px');
}JS
Code:
/* Facebox for Prototype, version 1
* By Scott Davis, htp://blog.smartlogicsolutions.com
*
* Heavily based on Facebox by Chris Wanstrath - http://famspam.com/facebox
* First ported to Prototype by Phil Burrows - http://blog.philburrows.com
*
* Licensed under the MIT:
* http://www.opensource.org/licenses/mit-license.php
*
*
* Dependencies: prototype & script.aculo.us + images & CSS files from original facebox
* Usage: Append 'rel="facebox"' to an element to call it inside a so-called facebox
*
*--------------------------------------------------------------------------*/
var Facebox = Class.create({
initialize : function(extra_set){
if ($('facebox')){
Element.remove('facebox');
}
this.settings = {
loading_image : '/facebox/images/loading.gif',
close_image : '/facebox/images/closelabel.gif',
image_types : new RegExp('\.' + ['png', 'jpg', 'jpeg', 'gif'].join('|') + '$', 'i'),
inited : true,
facebox_html : new Template('\
<div id="facebox" style="display:none;"> \
<div class="popup"> \
<table> \
<tbody> \
<tr> \
<td class="tl"/><td class="b"/><td class="tr"/> \
</tr> \
<tr> \
<td class="b"/> \
<td class="body"> \
<div class="content" id="facebox_content"> \
</div> \
<div class="footer"> \
<a href="#" class="close"> \
<img src="#{close_image}" title="close" class="close_image" /> \
</a> \
</div> \
</td> \
<td class="b"/> \
</tr> \
<tr> \
<td class="bl"/><td class="b"/><td class="br"/> \
</tr> \
</tbody> \
</table> \
</div> \
</div>')
};
if (extra_set) Object.extend(this.settings, extra_set);
$$('body').first().insert({bottom: this.settings.facebox_html.evaluate({close_image: this.settings.close_image})});
this.preload = [ new Image(), new Image() ];
this.preload[0].src = this.settings.close_image;
this.preload[1].src = this.settings.loading_image;
f = this;
$$('#facebox .b:first, #facebox .bl, #facebox .br, #facebox .tl, #facebox .tr').each(function(elem){
f.preload.push(new Image());
f.preload.slice(-1).src = elem.getStyle('background-image').replace(/url\((.+)\)/, '$1');
});
// this.keyPressListener = this.watchKeyPress().bindAsEventListener(this);
this.watchClickEvents();
fb = this;
Event.observe($$('#facebox .close').first(), 'click', function(e){
Event.stop(e);
fb.close()
});
Event.observe($$('#facebox .close_image').first(), 'click', function(e){
Event.stop(e);
fb.close()
});
Event.observe(window, 'resize', function(e){
fb.setLocation();
});
},
// watchKeyPress : function(e){
// // not sure if the call to this will work here
// if (e.keyCode == 27) this.close();
// },
watchClickEvents : function(e){
var f = this;
$$('a[rel=facebox]').each(function(elem,i){
Event.observe(elem, 'click', function(e){
// console.log("here's what f is :: "+ f);
Event.stop(e);
f.click_handler(elem, e);
});
});
},
loading : function() {
if ($$('#facebox .loading').length == 1) return true;
contentWrapper = $$('#facebox .content').first();
contentWrapper.childElements().each(function(elem, i){
elem.remove();
});
contentWrapper.insert({bottom: '<div class="loading"><img src="'+this.settings.loading_image+'"/></div>'});
this.setLocation();
Event.observe(document, 'keypress', this.keyPressListener);
},
reveal : function(data, klass){
this.loading();
box = $('facebox');
if(!box.visible()) fb.open();
contentWrapper = $$('#facebox .content').first();
if (klass) contentWrapper.addClassName(klass);
contentWrapper.innerHTML = '';
contentWrapper.insert({bottom: data});
load = $$('#facebox .loading').first();
if(load) load.remove();
$$('#facebox .body').first().childElements().each(function(elem,i){
elem.show();
});
this.setLocation();
Event.observe(document, 'keypress', this.keyPressListener);
},
open : function(){
new Effect.Appear('facebox', { duration: 0.1 });
},
close : function(){
new Effect.Fade('facebox', { duration: 0.1 });
},
setLocation: function(){
var pageScroll = document.viewport.getScrollOffsets();
$('facebox').setStyle({
'top': pageScroll.top + (document.viewport.getHeight()/ 10) + 'px',
'left': String((document.viewport.getWidth()/2) - ($('facebox').getWidth()) + ($('facebox').getWidth()/2)) + 'px'
});
},
new_box_for_url: function(url) {
var fb = this;
fb.open();
var klass = '';
fb.ajax(url, klass);
},
ajax: function(url, klass){
var fb = this;
new Ajax.Request(url, {
method : 'get',
onFailure : function(transport){
fb.reveal(transport.responseText, klass);
},
onSuccess : function(transport){
fb.reveal(transport.responseText, klass);
}
});
},
click_handler : function(elem, e){
this.loading();
Event.stop(e);
// support for rel="facebox[.inline_popup]" syntax, to add a class
var klass = elem.rel.match(/facebox\[\.(\w+)\]/);
if (klass) klass = klass[1];
// div
this.open();
if (elem.href.match(/#/)){
var url = window.location.href.split('#')[0];
var target = elem.href.replace(url+'#','');
// var data = $$(target).first();
var d = $(target);
// create a new element so as to not delete the original on close()
var data = new Element(d.tagName);
data.innerHTML = d.innerHTML;
this.reveal(data, klass);
} else if (elem.href.match(this.settings.image_types)) {
var image = new Image();
fb = this;
image.onload = function() {
fb.reveal('<div class="image"><img src="' + image.src + '" /></div>', klass)
}
image.src = elem.href;
} else {
// Ajax
fb = this;
url = elem.href;
fb.ajax(url, klass);
}
}
});
var facebox;
Event.observe(window, 'load', function(e){
facebox = new Facebox();
});Wäre euch echt sehr dankbar wenn mir da jemand Helfen könnte.
Liebe Grüße
Sascha
