super +1  
User online : 4 

für NOF ( Netobjects Fusion )

 

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.

 

Vorschau (3 Seiten) neuer tab
Hits :

*.zip Datei downloaden
Inhalt nach entpacken:
NOF11 Vorlage / jquery.fullscreenr.js

Vorlage NOF11 (346 kb)
462 Download(s)
letzter: 04.02.12 - 16:57 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

head Bereich in NOF

<!-- 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;/* Platziert euren Content über dem Hintergrundbild */
overflow:auto; /* bei kürzeren Seiten einen Scrollbalken erzwingen = overflow-y:scroll; */
height:100%;width:100%;
}
</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)

bodyStart Bereich in NOF

<!-- 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

bodyEnd Bereich in NOF

<!-- 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

 

16870 Gäste (seit 26.05.2010)

...weitere folgen !