Full Width Image Slider in NetObjects Fusion (NOF)

[nettesekel]

Anleitung, wie man einen Slider, der die Fensterbreite füllt und sich nahtlos der Größe des Browserfensters anpasst in NOF einbindet. 

*** Quelle ***

So sieht das Ganze aus, wenn man es in NOF eingebaut hat. Schiebt einfach mal das Browserfenster zusammen und wieder auseinander um zu sehen, wie sich der Slider dabei verhält.

Hier der Slider zum manuellen weiterblättern:
http://demos.nof-community.de/responsiveSlider/index.html
Hier der Slider automatisch weiterblätternd:
http://demos.nof-community.de/responsiveSlider/html/seite_1.html


Rein nur den Slider in NOF zu integrieren, wäre gar nicht so kompliziert, will man jedoch eine Navi auf den Slider legen und auch Inhalte einfügen - was Websites ja nicht schlecht zu Gesicht steht ;) - dann gibt es schon einige Dinge zu berücksichtigen. Ich selbst habe den Slider in NOF11 integriert, die Anleitung sollte aber auch für andere NOF-Versionen passen. Legen wir los...

[nettesekel]

Zunächst benötigt ihr einige Script- und CSS-Dateien welche ich, da ich ein paar Anpassungen für NOF vorgenommen habe, unter folgendem Link zum Download bereitstelle: http://demos.nof-community.de/responsiveSlider/fullwidthslider.zip

(die Originaldateien gibt es hier zum Download)


Wenn ihr die Zipdatei entpackt, erhaltet ihr einen Ordner mit dem Namen "fullwidthslider". In diesem Ordner befinden sich folgende 4 Dateien:

fullwidthslider.css
jquery.cbpFWSlider.js
jquery.cbpFWSlider.min.js
modernizr.custom.js

Bindet diese 4 Dateien als Assets in euer Projekt ein. Wie das geht könnt ihr hier nachlesen: www.nof-community.de/index.php/topic,11.0.html

Im Normalfall erkennt NOF automatisch das Dateiformat und publiziert die js-Dateien in den Ordner "assets" und die css-Datei in den Ordner "html".
Kontrolliert bitte zur Sicherheit über die Publizierenansicht, ob sich die Dateien auch an der entsprechenden Stelle befinden. Sollte dem nicht so sein, dann korrigiert dies bitte indem ihr die Dateien ausschneidet und in den entsprechenden Ordner einfügt. In folgendem Tutorial ist u.a. beschrieben, wie man den Ablageort für Dateien ändern kann: https://www.nof-community.de/index.php?topic=1539.0

Legt nun bitte für eure Startseite einen neuen Masterrahmen an.
Wie man das macht, könnt ihr hier nachlesen: www.nof-community.de/index.php/topic,354.0.html

[nettesekel]

Bearbeitet nun Die Fotos für euren Slider in einem geeigneten Programm.
Wichtig ist, die Abmessungen aller Bilder sollten identisch sein.

Außerdem solltet ihr bedenken, dass die Dateigrößen nicht ins Unendliche gehen, denn die Summe aller Bilder muss beim Seitenaufbau geladen werden. Da kommen bei großen Bildern schnell einige KB wenn nicht sogar MB zusammen. Sind die Bilder zu klein, werden sie beim scalieren auf großen Monitoren wahrscheinlich sehr an Qualität verlieren.

Ich habe mich deshalb für ein Bildmaß von 1500 x 355px und nur 6 Bilder entschieden. http://demos.nof-community.de/responsiveSlider/assets/images/A.JPG

Wenn ihr eure Bilder fertig bearbeitet und abgespeichert habt, dann bindet ihr diese ebenfalls als Assets in euer Projekt ein.  www.nof-community.de/index.php/topic,11.0.html

Auch hier gilt, dass NOF die Bilder grundsätzlich automatisch im Ordner assets>>images ablegt, ein kontrollierender Blick in die Publizierenansicht gibt jedoch Gewissheit.

[nettesekel]

-----------------------------------------------------------------------------------------------------
Einfügungen auf der Startseite
-----------------------------------------------------------------------------------------------------

Im nächsten Schritt sind einige Einfügungen an verschiedenen Stellen im Seiten-html nötig. Da sich die Einfügungen der Startseite geringfügig von denen der Unterseiten unterscheidet, geht es in diesem Post nur um die Starseite.

Drückt nun einmal die Taste F10 auf eurer Tastatur oder klickt einmal in den Masterrahmen und klickt im Anschluss den html-Button auf eurer Eigenschaftenpalette an.
Es öffnet sich ein Fenster in welchem ihr die folgenden Code-Schnipsel an der jeweils von mir angegeben Stelle einfügt.

-----------------------------------------------------------------------------------------------------
Code zum Einfügen "zwischen den Head-Tags" der Startseite:
-----------------------------------------------------------------------------------------------------

Code: HTML5

1. <link rel="stylesheet" type="text/css" href="./html/fullwidthslider.css" />
2. <script src="./assets/modernizr.custom.js"></script>

-----------------------------------------------------------------------------------------------------
Code zum Einfügen am "Beginn des Haupttextes" der Startseite: ***
-----------------------------------------------------------------------------------------------------

Code: HTML5

1. <div align="center">                      
2. <div id="cbp-fwslider" class="cbp-fwslider">    
3. <ul>
4. <li><a href="#"><img src="./assets/images/A.JPG" alt="img01"/></a></li>
5. <li><a href="#"><img src="./assets/images/B.JPG" alt="img02"/></a></li>
6. <li><a href="#"><img src="./assets/images/C.JPG" alt="img03"/></a></li>
7. <li><a href="#"><img src="./assets/images/D.JPG" alt="img04"/></a></li>
8. <li><a href="#"><img src="./assets/images/E.JPG" alt="img05"/></a></li>
9. <li><a href="#"><img src="./assets/images/F.JPG" alt="img06"/></a></li>
10. </ul>
11. </div>

ACHTUNG!!! Der Code beinhaltet bereits den Befehl zum Zentrieren der Website!

Hinweis!!! In diesem Code sind die Dateinamen der Bilder anzupassen!
Achtet bei der Anpassung bitte unbedingt auf die Schreibweise, auch auf die Schreibweise der Dateiendung!

Will man mehr oder weniger Bilder im Slider anzeigen lassen muss man entweder eine solche Zeile hinzufügen oder löschen.

Code: HTML5

1. <li><a href="#"><img src="./assets/images/F.JPG" alt="img06"/></a></li>

Für die letzte Einfügung solltet ihr euch vorab überlegen, ob euer Slider manuell geblättert werden soll oder ob ihr ein automatisches Blättern bevorzugt. Wählt danach den entsprechenden Codeschnipsel für eure Website aus.

-----------------------------------------------------------------------------------------------------
Code zum Einfügen am "Ende des Hauttextes" der Startseite wenn der Slider nur manuell bedient werden soll:
-----------------------------------------------------------------------------------------------------

Code: HTML5

1. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
2. <script src="./assets/jquery.cbpFWSlider.min.js"></script>
3. <script>
4. $( function() {
5.         /*
6.         - how to call the plugin:
7.         $( selector ).cbpFWSlider( [options] );
8.         - options:
9.         {
10.                 // default transition speed (ms)
11.                 speed : 500,
12.                 // default transition easing
13.                 easing : 'ease'
14.         }
15.         - destroy:
16.         $( selector ).cbpFWSlider( 'destroy' );
17.         */
18.  
19.         $( '#cbp-fwslider' ).cbpFWSlider();
20.  
21. } );
22. </script>
23. <script src="./assets/rollover.js"></script>
24. </div>

-----------------------------------------------------------------------------------------------------
Code zum Einfügen am "Ende des Hauttextes" der Startseite wenn der Slider automatisch blättern soll:
-----------------------------------------------------------------------------------------------------

Code: HTML5

1. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
2. <script src="./assets/jquery.cbpFWSlider.min.js"></script>
3. <script>
4. var mouseEnteredSlider = false;
5.  
6. $(document).ready(function(){
7.  
8. $( '#cbp-fwslider' ).cbpFWSlider({
9. // default transition speed (ms)
10. speed : 500,
11. // default transition easing
12. easing : 'ease'
13. }).mouseenter(function() {
14. mouseEnteredSlider = true;
15. }).mouseleave(function() {
16. mouseEnteredSlider = false;
17. });
18.  
19. setInterval(function() {
20. if(!mouseEnteredSlider) {
21. if($('.cbp-fwnext').css('display') != 'none'){
22. $('.cbp-fwnext').click();
23. } else {
24. $('.cbp-fwdots span:first-child').click();
25. }
26. }
27. }, 2000);
28.  
29. });
30. </script>
31. <script src="./assets/rollover.js"></script>
32. </div>

[nettesekel]

-----------------------------------------------------------------------------------------------------
Einfügungen auf den Unterseiten
-----------------------------------------------------------------------------------------------------

Nun müssen die Einfügungen im Masterrahmen der Unterseiten vorgenommen werden.

Drückt wieder die Taste F10 auf eurer Tastatur ... und fügt wieder die folgenden Code-Schnipsel an der jeweils von mir angegeben Stelle einfügt.

-----------------------------------------------------------------------------------------------------
Code zum Einfügen "zwischen den Head-Tags" auf Unterseiten:
-----------------------------------------------------------------------------------------------------

Code: HTML5

1. <link rel="stylesheet" type="text/css" href="./fullwidthslider.css" />
2. <script src="../assets/modernizr.custom.js"></script>

-----------------------------------------------------------------------------------------------------
Code zum Einfügen am "Beginn des Haupttextes" auf Unterseiten: ***
-----------------------------------------------------------------------------------------------------

Code: HTML5

1. <div align="center">                      
2. <div id="cbp-fwslider" class="cbp-fwslider">    
3. <ul>
4. <li><a href="#"><img src="../assets/images/A.JPG" alt="img01"/></a></li>
5. <li><a href="#"><img src="../assets/images/B.JPG" alt="img02"/></a></li>
6. <li><a href="#"><img src="../assets/images/C.JPG" alt="img03"/></a></li>
7. <li><a href="#"><img src="../assets/images/D.JPG" alt="img04"/></a></li>
8. <li><a href="#"><img src="../assets/images/E.JPG" alt="img05"/></a></li>
9. <li><a href="#"><img src="../assets/images/F.JPG" alt="img06"/></a></li>
10. </ul>
11. </div>

ACHTUNG!!! Der Code beinhaltet bereits den Befehl zum Zentrieren der Website!

Hinweis!!! In diesem Code sind die Dateinamen der Bilder anzupassen! Achtet bei der Anpassung bitte unbedingt auf die Schreibweise, auch auf die Schreibweise der Dateiendung!

Will man mehr oder weniger Bilder im Slider anzeigen lassen muss man entweder eine solche Zeile hinzufügen oder löschen.

Code: HTML5

1. <li><a href="#"><img src="../assets/images/F.JPG" alt="img06"/></a></li>

Für die letzte Einfügung solltet ihr euch vorab überlegen, ob euer Slider manuell geblättert werden soll oder ob ihr ein automatisches Blättern bevorzugt. Wählt danach den entsprechenden Codeschnipsel für eure Website aus.

-----------------------------------------------------------------------------------------------------
Code zum Einfügen am "Ende des Hauttextes" auf Unterseiten wenn der Slider nur manuell bedient werden soll:
-----------------------------------------------------------------------------------------------------

Code: HTML5

1. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
2. <script src="../assets/jquery.cbpFWSlider.min.js"></script>
3. <script>
4. $( function() {
5.         /*
6.         - how to call the plugin:
7.         $( selector ).cbpFWSlider( [options] );
8.         - options:
9.         {
10.                 // default transition speed (ms)
11.                 speed : 500,
12.                 // default transition easing
13.                 easing : 'ease'
14.         }
15.         - destroy:
16.         $( selector ).cbpFWSlider( 'destroy' );
17.         */
18.  
19.         $( '#cbp-fwslider' ).cbpFWSlider();
20.  
21. } );
22. </script>
23. <script src="../assets/rollover.js"></script>
24. </div>

-----------------------------------------------------------------------------------------------------
Code zum Einfügen am "Ende des Hauttextes" auf Unterseiten wenn der Slider automatisch blättern soll:
-----------------------------------------------------------------------------------------------------

Code: HTML5

1. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
2. <script src="../assets/jquery.cbpFWSlider.min.js"></script>
3. <script>
4. var mouseEnteredSlider = false;
5.  
6. $(document).ready(function(){
7.  
8. $( '#cbp-fwslider' ).cbpFWSlider({
9. // default transition speed (ms)
10. speed : 500,
11. // default transition easing
12. easing : 'ease'
13. }).mouseenter(function() {
14. mouseEnteredSlider = true;
15. }).mouseleave(function() {
16. mouseEnteredSlider = false;
17. });
18.  
19. setInterval(function() {
20. if(!mouseEnteredSlider) {
21. if($('.cbp-fwnext').css('display') != 'none'){
22. $('.cbp-fwnext').click();
23. } else {
24. $('.cbp-fwdots span:first-child').click();
25. }
26. }
27. }, 2000);
28.  
29. });
30. </script>
31. <script src="../assets/rollover.js"></script>
32. </div>

[nettesekel]

*** Aus nof-technischen Gründen habe ich die Code-Einfügung für den Slider direkt im Seiten-html vorgenommen, da die automatische Anpassung des Sliders an die Fenstergröße eures Browsers sonst nicht reibungslos funktionieren würde.

Der Slider ist in der Arbeitsansicht nicht zu sehen, sondern erst nach Publizierung. Er wird durch die CSS-Angaben in den eingebundenen Style-Dateien automatisch zu oberst in eurer Seite positioniert.

[nettesekel]

Wenn ihr möchtet, dass eure Navigationsleiste so auf dem Banner platziert wird, wie es im Beispielprojekt zu sehen ist, dann fügt ihr zunächst zu oberst in eurer Seite ein Textfeld ein. Klickt dieses Textfeld mit einem einfachen Klick an (der Cursor darf nicht blinken!) und klickt danach einmal den html-Button auf der EP an.

Es öffnet sich das Fenster zur Eingabe des Codes und ihr fügt die folgenden beiden Codeschnipsel an der jeweils angegebenen Stelle ein.

-----------------------------------------------------------------------------------------------------
Code zum Einfügen "vor dem Tag" (vorher)
-----------------------------------------------------------------------------------------------------

Code: HTML5

1. <div id="navi">
2. <div id="navi_inner">

-----------------------------------------------------------------------------------------------------
Code zum Einfügen "nach dem Tag" (nachher)
-----------------------------------------------------------------------------------------------------

Code: HTML5

1. </div>
2. </div>

Eure horizontale Navigationsleiste schiebt ihr nachdem ihr sie erstellt habt in dieses Textfeld. Die Postition der Leiste wird ebenfalls über die Angaben aus der Styledatei geregelt.

[nettesekel]

Die Farbe und Transparenz des Balkens auf welchem die Navi zu liegen scheint, könnt ihr in der fullwidthslider.css in folgender Formatvorlage  anpassen.

Code: HTML5

1. #navi {
2.         position:absolute;
3.         top:0;
4.         left:0;
5.         width: 100%;
6.         height: 47px;
7.         background: rgba(37, 24, 5, .8);  
8. }

Und zwar in dieser Zeile:

Code: HTML5

1. background: rgba(37, 24, 5, .8);  

Hier stehen die ersten drei Zahlen für die normalen rgb-Farbwerte.
die letzte Zahl mit dem Punkt davor regelt die Transparenz.
Hier ist eine Spanne von .0 bis .9 möglich, wobei gilt, je höher die Zahl desto geringer die Transparenz.

[nettesekel]

Die Farbe und Transparenz der Navigationsschaltflächen zum Durchblättern des Sliders könnt ihr ebenfalls in der fullwidthslider.css in folgender Formatvorlage  anpassen.

Code: HTML5

1. .cbp-fwslider nav span {
2.         position: absolute;
3.         top: 50%;
4.         width: 50px;
5.         height: 100px;
6.         background: rgba(37, 24, 5, .7);
7.         color: #fff;
8.         font-size: 50px;
9.         text-align: center;
10.         margin-top: -50px;
11.         line-height: 98px;
12.         cursor: pointer;
13.         font-weight: normal;
14. }
15.  

Und zwar könnt ihr in dieser Zeile die Farbe des Pfeils ändern:

Code: HTML5

1.         color: #fff;

und in dieser Zeile könnt ihr die Farbe und Transparenz der Schaltfläche ändern:

Code: HTML5

1.         background: rgba(37, 24, 5, .7);

Auch hier gilt, die ersten drei Zahlen stehen für die normalen rgb-Farbwerte.
die letzte Zahl mit dem Punkt davor regelt die Transparenz.
Hier ist eine Spanne von .0 bis .9 möglich, wobei gilt, je höher die Zahl desto geringer die Transparenz.



Das Aussehen der Schaltfläche bei mouseover regelt die folgende Klasse:

Code: HTML5

1. .cbp-fwslider nav span:hover {
2.         background: rgba(37, 24, 5, .9);
3. }

[nettesekel]

Sollte euch der Schatten unter dem Slider stören, so könnt ihr diesen entfernen indem ihr die folgende Klasse bearbeitet...

Code: HTML5

1. .cbp-fwslider {
2.         position: relative;
3.         margin: 0 0 40px 0;
4.         overflow: hidden;
5.         padding: 0px;
6.         -o-box-shadow: 0 0 20px grey;
7.         -moz-box-shadow: 0 0 20px grey;
8.         -webkit-box-shadow: 0 0 20px grey;
9.          box-shadow: 0 0 20px grey;
10. }

und dabei diese Zeilen aus der Klasse entfernt:

Code: HTML5

1.         -o-box-shadow: 0 0 20px grey;
2.         -moz-box-shadow: 0 0 20px grey;
3.         -webkit-box-shadow: 0 0 20px grey;
4.          box-shadow: 0 0 20px grey;

[nettesekel]

Bei meinen Tests mit dem Slider fiel mir auf, dass es zu einem größeren Abstand zwischen den Inhalten des Layouts und denen des unteren MB kam. Warum habe ich bis jetzt noch nicht ergründet. Vermeiden lässt sich dieser Abstand, falls er bei euch autritt, indem ihr in eurem Layout einen Layout-Bereich aufzieht und eure Inhalte auf diesem Layoutbereich platziert.

Ich wünsche euch viel Spaß beim Nachbauen und gutes Gelingen!