Forum: NOF - Tutorials (185 anschauliche Tutorials zum Lesen und Nacharbeiten) > Bildgalerien, Slider, Bildwechsler, Videogalerien
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 ---<link rel="stylesheet" type="text/css" href="./html/fullwidthslider.css" /><script src="./assets/modernizr.custom.js"></script>
-----------------------------------------------------------------------------------------------------
Code zum Einfügen am "Beginn des Haupttextes" der Startseite: ***
-----------------------------------------------------------------------------------------------------
--- Code: HTML5 ---<div align="center"> <div id="cbp-fwslider" class="cbp-fwslider"> <ul><li><a href="#"><img src="./assets/images/A.JPG" alt="img01"/></a></li><li><a href="#"><img src="./assets/images/B.JPG" alt="img02"/></a></li><li><a href="#"><img src="./assets/images/C.JPG" alt="img03"/></a></li><li><a href="#"><img src="./assets/images/D.JPG" alt="img04"/></a></li><li><a href="#"><img src="./assets/images/E.JPG" alt="img05"/></a></li><li><a href="#"><img src="./assets/images/F.JPG" alt="img06"/></a></li></ul></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 ---<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 ---<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><script src="./assets/jquery.cbpFWSlider.min.js"></script><script>$( function() { /* - how to call the plugin: $( selector ).cbpFWSlider( [options] ); - options: { // default transition speed (ms) speed : 500, // default transition easing easing : 'ease' } - destroy: $( selector ).cbpFWSlider( 'destroy' ); */ $( '#cbp-fwslider' ).cbpFWSlider(); } );</script><script src="./assets/rollover.js"></script></div>
-----------------------------------------------------------------------------------------------------
Code zum Einfügen am "Ende des Hauttextes" der Startseite wenn der Slider automatisch blättern soll:
-----------------------------------------------------------------------------------------------------
--- Code: HTML5 ---<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><script src="./assets/jquery.cbpFWSlider.min.js"></script><script>var mouseEnteredSlider = false; $(document).ready(function(){ $( '#cbp-fwslider' ).cbpFWSlider({// default transition speed (ms)speed : 500,// default transition easingeasing : 'ease'}).mouseenter(function() {mouseEnteredSlider = true;}).mouseleave(function() {mouseEnteredSlider = false;}); setInterval(function() {if(!mouseEnteredSlider) {if($('.cbp-fwnext').css('display') != 'none'){$('.cbp-fwnext').click();} else {$('.cbp-fwdots span:first-child').click();}}}, 2000); });</script><script src="./assets/rollover.js"></script></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 ---<link rel="stylesheet" type="text/css" href="./fullwidthslider.css" /><script src="../assets/modernizr.custom.js"></script>
-----------------------------------------------------------------------------------------------------
Code zum Einfügen am "Beginn des Haupttextes" auf Unterseiten: ***
-----------------------------------------------------------------------------------------------------
--- Code: HTML5 ---<div align="center"> <div id="cbp-fwslider" class="cbp-fwslider"> <ul><li><a href="#"><img src="../assets/images/A.JPG" alt="img01"/></a></li><li><a href="#"><img src="../assets/images/B.JPG" alt="img02"/></a></li><li><a href="#"><img src="../assets/images/C.JPG" alt="img03"/></a></li><li><a href="#"><img src="../assets/images/D.JPG" alt="img04"/></a></li><li><a href="#"><img src="../assets/images/E.JPG" alt="img05"/></a></li><li><a href="#"><img src="../assets/images/F.JPG" alt="img06"/></a></li></ul></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 ---<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 ---<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><script src="../assets/jquery.cbpFWSlider.min.js"></script><script>$( function() { /* - how to call the plugin: $( selector ).cbpFWSlider( [options] ); - options: { // default transition speed (ms) speed : 500, // default transition easing easing : 'ease' } - destroy: $( selector ).cbpFWSlider( 'destroy' ); */ $( '#cbp-fwslider' ).cbpFWSlider(); } );</script><script src="../assets/rollover.js"></script></div>
-----------------------------------------------------------------------------------------------------
Code zum Einfügen am "Ende des Hauttextes" auf Unterseiten wenn der Slider automatisch blättern soll:
-----------------------------------------------------------------------------------------------------
--- Code: HTML5 ---<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><script src="../assets/jquery.cbpFWSlider.min.js"></script><script>var mouseEnteredSlider = false; $(document).ready(function(){ $( '#cbp-fwslider' ).cbpFWSlider({// default transition speed (ms)speed : 500,// default transition easingeasing : 'ease'}).mouseenter(function() {mouseEnteredSlider = true;}).mouseleave(function() {mouseEnteredSlider = false;}); setInterval(function() {if(!mouseEnteredSlider) {if($('.cbp-fwnext').css('display') != 'none'){$('.cbp-fwnext').click();} else {$('.cbp-fwdots span:first-child').click();}}}, 2000); });</script><script src="../assets/rollover.js"></script></div>
Navigation
[0] Themen-Index
[#] Nächste Seite
Zur normalen Ansicht wechseln