|
|
Aktuelle Seite : Tutorials / fullscreen BG
|
Tutorial zu Einbau eines Fullscreen BG / Hintergrund
Teilweise finde ich einen Fullscreen BG auch nicht schlecht.
Doch sollte man darauf achten, dass bei der Skalierung an die jeweilige Browsergröße,
keine unschönen Verzerrungen entstehen.
Bei z.B. runden Objekten oder Personen sieht eine unproportionale Skalierung unnatürlich
und hässlich aus. Nun, es geht auch anders.
Achtet bitte darauf, dass die Dateigröße eures Bildes nicht zu groß ist.
|
|
|
|
Hits :
|
*.zip Datei downloaden
Inhalt nach entpacken:
NOF11 Vorlage / jquery.fullscreenr.js
|
43 Download(s)
letzter: 06.09.10 - 17:45
Uhr
|
|
|
Schritt 2
|
Öffnet euer NOF Projekt
|
|
|
|
Schritt 3
|
Nun im (vorzugsweise) Masterahmen (F10)
im Eigenschaften-Fenster auf den “html” Button -> klick
ps. Ihr könnt den Code auch im Layout-html eingeben,
dann ist er aber nur auf der jeweiligen Seite wirksam.
|
|
|
|
Schritt 4
|
Code im head einfügen
<!-- Code Beginn head -->
<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js" type="text/javascript"></script>
<script src="../jquery.fullscreenr.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
// Grösse eurer Bilddatei angeben width = Breite / height = Höhe (pixel)
var FullscreenrOptions = { width: 1000, height: 661, bgID: '#bgimg' };
// This will activate the full screen background!
jQuery.fn.fullscreenr(FullscreenrOptions);
//-->
</script>
<style type="text/css">
body {
overflow:hidden; /* needed to eliminate scrollbars caused by the background image */
padding:0;margin:0;/* necesarry for the raster to fill the screen */
height:100%;width:100%;
}
#bgimg {
position:absolute;
z-index: -1;
}
#realBody{
position:absolute;
z-index: 5;/* Place the new body above the background image */
overflow:auto; /* restore scrollbars for the content */
height:100%;width:100%;/* Make the new body fill the screen */
}
</style>
<!-- Code Ende head -->
Anmerkung:
Der Code für die Startseite=
<script src="./jquery.fullscreenr.js" type="text/javascript"></script>
Der Code für die Unterseiten=
<script src="../jquery.fullscreenr.js" type="text/javascript"></script>
Für die Startseite und die Unterseiten jeweils einen eigenen Masterrahmen verwenden.
|
|
|
Schritt 5
|
Code im Bodystart eingeben (immer noch im Masterrahmen)
<!-- Code fullscreen - bodystart -->
<img id="bgimg" src="http://www.eurer Pfad zum Bild.jpg" />
<div id="realBody">
<div align="center">
<!--Code fullscreen - bodystart ende -->
|
|
|
Schritt 6
|
Code im BodyEnd eingeben
<!-- Code fullscreen - bodyend -->
</div>
</div>
<!-- Code fullscreen - bodyend ende -->
|
|
|
Schritt 7
|
Zum Abschluss müsst Ihr jetzt noch:
Euer Bild und die Datei jquery.fullscreenr.js
auf euren Server hochladen.
Anmerkung:
Bei den hier verwendeten Codeangaben müsst Ihr die
jquery.fullscreenr.js in’s Root-Verzeichnis packen.
d.h. da, wo Eure index.html (php) liegt.
In der Vorlage sind die Codes im Layout-html !!!
|
|
|
|
Schritt 8
|
Ihr seid fertig ! ;-)
Quelle (Script): nanotux.com
|
|
|
1871 Gäste (seit 26.05.2010)
|
...weitere folgen !
|
|