Hallo zusammen!
Die Frage, wie man *.html - Dateien in die Galerie einfügen kann, ist ja schon hinreichend geklärt worden. Ich möchte der Lösung noch einen kleinen Bonus hinzufügen:
Wer mehrere verschiedene *.html-Dateien einfügen will, steht früher oder später vor dem Problem, dass die im "media"-Template angegebene Größe des iframes nicht ausreicht oder zu groß ist. Das führt entweder zu imens viel Leere auf der Detail-Seite, oder zu unschönen Scrollbalken.
Mit folgenden Modifikationen lässt sich das Problem per Javascript elegant umschiffen:
1. In die "header"-Datei kommt folgender Javascript-Schnipsel:
<script type="text/javascript"> function resize_iframe() {
self.document.getElementById('inhalt').style.height = document.getElementById('text').offsetHeight;
}
</script>2. Die "media"-Datei wirkt wie folgt verändert:
<!-- Template file for html Files -->
<IFRAME onload="resize_iframe();" id="inhalt" src="{media_src}" width="600" scrolling="no" frameborder="0" marginheight="2" marginwidth="2">
</IFRAME>3. Die im iframe auszugebende *.html-Datei sollte dann so aussehen (exemplarisch):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<META http-equiv="CONTENT-TYPE" content="text/html; charset=iso-8859-1">
<script type="text/javascript"> function resize_iframe() {
parent.document.getElementById('inhalt').style.height = document.getElementById('text').offsetHeight;
}
</script>
<TITLE>titel</TITLE>
</HEAD>
<BODY onload="resize_iframe();">
<DIV id="text">
<!-- Inhalte -->
</DIV>
</BODY>
</HTML>Wichtig ist hier vor allem das "body onload"-Atribut und der "Div" um den Inhalt.
Diese Lösung funktioniert mit den Browsern IE 7, Firefox 2.x und Opera 9.25
Hello everybody!
I think, the question, "how can I include *.html-files is answered. I just want to add a small bonus:
If you want to include more Files with different heights, you'll find the Problem, that the height-atribute of the iframe is to big or to small. This leads to big parts leaved blank or ugly scrollbars.
Use the following modifikation to solve this problem whit javascript:
1. Add the following javascript to the "header"-File:
<script type="text/javascript"> function resize_iframe() {
self.document.getElementById('inhalt').style.height = document.getElementById('text').offsetHeight;
}
</script>2. change the "media"-Template for *.html-Files like this:
<!-- Template file for html Files -->
<IFRAME onload="resize_iframe();" id="inhalt" src="{media_src}" width="600" scrolling="no" frameborder="0" marginheight="2" marginwidth="2">
</IFRAME>3. The "*.html"-File that you want to inculde in the Iframe, should look like this (for example):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<META http-equiv="CONTENT-TYPE" content="text/html; charset=iso-8859-1">
<script type="text/javascript"> function resize_iframe() {
parent.document.getElementById('inhalt').style.height = document.getElementById('text').offsetHeight;
}
</script>
<TITLE>titel</TITLE>
</HEAD>
<BODY onload="resize_iframe();">
<DIV id="text">
<!-- content -->
</DIV>
</BODY>
</HTML>Important are the "body onload"- atribute and the "div" for the content
This conclusion ist tested with IE7, Firefox 2.x and Opera 9.25
Please forgive me my terrible english...
