Content-Slider, Nachrichten-Slider, Menü-Slider... für NOF - NOF-Community - NetObjects Fusion

Forum: NOF - Tutorials (185 anschauliche Tutorials zum Lesen und Nacharbeiten) > Bildgalerien, Slider, Bildwechsler, Videogalerien

Content-Slider, Nachrichten-Slider, Menü-Slider... für NOF

(1/2) > >>

nettesekel:
***Basis***
Ich bin mir nicht sicher, wie man das Teil nennen soll... Content-slider?... Nachrichten-Slider? oder Menü-Slider? Egal wie man es nennt, euer Feedback hat mir gezeigt, dass viele von Euch Verwendung dafür haben werden und so versuche ich nun mal zu erklären, wie ihr diesen Slider in euer NOF-Projekt einbinden könnt.

Für alle die noch nicht wissen, worum es geht, es geht um diesen von mir erstellten Slider, den man für die verschiedensten Zwecke in seinem Webprojekt verwenden kann.
http://demos.nof-community.de/ContentNewsSlider/

Der Slider ist eine reine Code-Lösung, was bedeutet, dass alle Änderungen/Anpassungen im HTML/CSS-Code des Sliders vorgenommen werden müssen. Das Einzige, was ihr in eurere Arbeitsansicht sehen werdet, ist das kleine Textfeld in welches Ihr den html-Code des Sliders einfügen werdet.

Wer den Slider in sein Projekt einbinden möchte, sollte also keine Scheu haben, sich mit HTML-Code oder CSS auseinanderzusetzen.
Wobei es weniger schlimm ist, wenn man den Slider optisch unverändert lässt und nur die eigenen Inhalte einbindet.
Möchte man das Aussehen des Sliders ändern, dann ist der Aufwand schon ein wenig größer.

Achtung! Damit der Slider auch im IE fehlerfrei funktioniert, publiziert die Seite bitte unter dem Doctype LOOSE.
Für Nutzer älterer NOF-Versionen gibt es hierfür eine Komponente von SwissKnife die ihr hier downloaden könnt: http://www.nof-academy.de/html/SwissKnife-Komponenten_fuer_NetObjects_Fusion.php

Und hier findet ihr eine Anleitung zur Verwendung der Kompo: http://www.nof-academy.de/SwissKnife-Tutorials/DocType/index.html

nettesekel:
Der Slider besteht im Prinzip auch 3 Bestandteilen:
jQuery
CSS
HTML

Platziert also zunächst mal die folgende Verlinkung zwischen den head-Tags der Seite, auf welcher der Slider laufen soll:

--- Code: HTML5 ---<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
Wer nicht weiß, wie das geht, findet ihr eine Anleitung dazu: www.nof-community.de/index.php/topic,851.0
Da der Slider wahrscheinlich nicht auf allen Seiten laufen soll, würde ich empfehlen die Verlinkung im Layout-html (F9) einzutragen.

Zusätzlich fügt ihr dieses kleine Javascript am Body-Ende der Seite ein. Habt ihr euch bei der Verlinkung fürs Layout-html entschieden, so solltet ihr auch diese Einfügung im Layout-html vornehmen.

--- Code: Javascript ---<script type="text/javascript">var $gal = $('#gallery'), $sli = $('#slider'), $box = $('div.slide',$sli), W = $gal.width(), // 500 N = $box.length, // 3 C = 0; // a counter $sli.width(W*N); $('#prev, #next').click(function(){ C = (this.id=='next' ? ++C : --C) <0 ? N-1 : C%N; $sli.stop().animate({left: -C*W },800);}); </script>

nettesekel:
Als nächstes wenden wir uns der CSS-Datei zu. Im Beispielprojekt habe ich die CSS zwischen den head-Tags der Seite eingefügt, was grundsätzlich kein Problem darstellt. Möchtet ihr in eurem Projekt genauso vorgehen, dann fügt ihr folgenden Code zwischen den Head-tags eurer Seite ein. Ihr könnt ihn im Prinzip direkt eine Zeile (eventuell eine Leerzeile dazwischen) unter der vorher eingefügten Verlinkung einfügen.

--- Code: HTML5 ---<style type="text/css">p{ margin-bottom: 8px;}.h2{ font-size: 16px; color: #FFFFFF; /* Fallback IE 6-8 */ color: rgba(255,255,255,0.8); margin-bottom:0px; padding: 5px 0px 6px 10px; text-transform:uppercase;}.h3{ font-size: 14px; margin-bottom: 8px;}#container{ width:990px; padding: 15px 8px; background-color: #626262; /* Fallback IE 6-8 */ background-color: rgba(59,59,59,0.8); background-image: url(./assets/images/raster.png); }#gallery{ position:relative; margin: 0 auto; overflow:hidden; width:974px; height:418px;}#slider{ position:absolute; height:370px; left:0; text-align:left; /* to reset text inside slides */}#slider > div { position:relative; float:left; width:974px; height:370px;}.news_div{ width: 242px; float:left;}.head_line{ height:30px; margin: 0 auto; margin-bottom: 2px;}.hl_1{ background-color: rgb(195,0,39); /* Fallback IE 6-8 */ background-color: rgba(195,0,39,0.5);}.hl_2{ background-color: rgb(255,115,0); /* Fallback IE 6-8 */ background-color: rgba(255,115,0,0.5);}.hl_3{ background-color: rgb(0,135,90); /* Fallback IE 6-8 */ background-color: rgba(0,135,90,0.5);}.hl_4{ background-color: rgb(60,60,255); /* Fallback IE 6-8 */ background-color: rgba(60,60,255,0.5);}.image{ width: 215px; height:140px; margin: 0 auto; -webkit-box-shadow: 0 0 2em rgba(0,0,0,0.25); -moz-box-shadow: 0 0 2em rgba(0,0,0,0.25); box-shadow: 0 0 2em rgba(0,0,0,0.25);}.content{ width: 215px; height:174px; margin: 0 auto; margin-top: 10px; font-size: 12px;}#prev, #next{ display:inline-block; cursor:pointer;}#prev_div{ width: 50%; text-align:left; float:left; position:relative; top:370px; margin-top:2px;}#next_div{ width: 50%; text-align:right; display:inline-block; position:relative; top:370px; margin-top:2px;}.first{ margin-right:2px;}div.style{ background-color: #A1A1A1; /* Fallback IE 6-8 */ background-color: rgba(255,255,255,0.4); color: #333333; padding-top:14px;}div.style:hover{ background-color: #3B3B3B; /* Fallback IE 6-8 */ background-color: rgba(0,0,0,0.4); color: #E1E1E1;}div.prev{ background: url(./assets/images/button.png) 0% 0% no-repeat; width: 64px; height: 46px;}div.prev:hover{ background: url(./assets/images/button.png) 0% 100% no-repeat;}div.next{ background: url(./assets/images/button.png) 100% 0% no-repeat; width: 64px; height: 46px;}div.next:hover{ background: url(./assets/images/button.png) 100% 100% no-repeat;}.clearfloat{ clear: both;}a img{ border:none;}.mylink{ font-size: 12px; font-weight: bold; text-decoration:none;}.ml_1{ color: rgb(195,0,39); /* Fallback IE 6-8 */ color: rgba(195,0,39,0.8);}.ml_2{ color: rgb(255,115,0); /* Fallback IE 6-8 */ color: rgba(255,115,0,0.8);}.ml_3{ color: rgb(0,135,90); /* Fallback IE 6-8 */ color: rgba(0,135,90,0.8);}.ml_4{ color: rgb(60,60,255); /* Fallback IE 6-8 */ color: rgba(60,60,255,0.8);}</style>

Alternativ könnt ihr die Styleangaben aber auch in eine eigene Styledatei schreiben und dann eine Verlinkung zu dieser Datei zwischen den head-Tags der Seite einbinden.
Dazu öffnet ihr euren Editor kopiert ihr diesen Code in eine leer Datei und speichert sie unter slider.css ab.

--- Code: HTML5 ---p{ margin-bottom: 8px;}.h2{ font-size: 16px; color: #FFFFFF; /* Fallback IE 6-8 */ color: rgba(255,255,255,0.8); margin-bottom:0px; padding: 5px 0px 6px 10px; text-transform:uppercase;}.h3{ font-size: 14px; margin-bottom: 8px;}#container{ width:990px; padding: 15px 8px; background-color: #626262; /* Fallback IE 6-8 */ background-color: rgba(59,59,59,0.8); background-image: url(./assets/images/raster.png); }#gallery{ position:relative; margin: 0 auto; overflow:hidden; width:974px; height:418px;}#slider{ position:absolute; height:370px; left:0; text-align:left; /* to reset text inside slides */}#slider > div { position:relative; float:left; width:974px; height:370px;}.news_div{ width: 242px; float:left;}.head_line{ height:30px; margin: 0 auto; margin-bottom: 2px;}.hl_1{ background-color: rgb(195,0,39); /* Fallback IE 6-8 */ background-color: rgba(195,0,39,0.5);}.hl_2{ background-color: rgb(255,115,0); /* Fallback IE 6-8 */ background-color: rgba(255,115,0,0.5);}.hl_3{ background-color: rgb(0,135,90); /* Fallback IE 6-8 */ background-color: rgba(0,135,90,0.5);}.hl_4{ background-color: rgb(60,60,255); /* Fallback IE 6-8 */ background-color: rgba(60,60,255,0.5);}.image{ width: 215px; height:140px; margin: 0 auto; -webkit-box-shadow: 0 0 2em rgba(0,0,0,0.25); -moz-box-shadow: 0 0 2em rgba(0,0,0,0.25); box-shadow: 0 0 2em rgba(0,0,0,0.25);}.content{ width: 215px; height:174px; margin: 0 auto; margin-top: 10px; font-size: 12px;}#prev, #next{ display:inline-block; cursor:pointer;}#prev_div{ width: 50%; text-align:left; float:left; position:relative; top:370px; margin-top:2px;}#next_div{ width: 50%; text-align:right; display:inline-block; position:relative; top:370px; margin-top:2px;}.first{ margin-right:2px;}div.style{ background-color: #A1A1A1; /* Fallback IE 6-8 */ background-color: rgba(255,255,255,0.4); color: #333333; padding-top:14px;}div.style:hover{ background-color: #3B3B3B; /* Fallback IE 6-8 */ background-color: rgba(0,0,0,0.4); color: #E1E1E1;}div.prev{ background: url(./assets/images/button.png) 0% 0% no-repeat; width: 64px; height: 46px;}div.prev:hover{ background: url(./assets/images/button.png) 0% 100% no-repeat;}div.next{ background: url(./assets/images/button.png) 100% 0% no-repeat; width: 64px; height: 46px;}div.next:hover{ background: url(./assets/images/button.png) 100% 100% no-repeat;}.clearfloat{ clear: both;}a img{ border:none;}.mylink{ font-size: 12px; font-weight: bold; text-decoration:none;}.ml_1{ color: rgb(195,0,39); /* Fallback IE 6-8 */ color: rgba(195,0,39,0.8);}.ml_2{ color: rgb(255,115,0); /* Fallback IE 6-8 */ color: rgba(255,115,0,0.8);}.ml_3{ color: rgb(0,135,90); /* Fallback IE 6-8 */ color: rgba(0,135,90,0.8);}.ml_4{ color: rgb(60,60,255); /* Fallback IE 6-8 */ color: rgba(60,60,255,0.8);}
Diese Datei kopiert dann in den html-Ordner eurer lokalen Publizierung und ebenfalls in den html-Order auf eurem Server.

Anstelle des CSS_Codes fügt ihr dann nur noch die Verlinkung zu dieser datei zwischen den Head-Tags eurer Seite ein. Achtet darauf dass beim Einsatz auf der Startseite der Pfad zur Style-Datei mit nur einem Punkt beginnen darf!

--- Code: HTML5 ---<link rel="stylesheet" type="text/css" href="../html/slider.css">

Die Datei direkt in NOF zu integrieren, würde ich allenfalls für die 2 neusten NOF-Versionen empfehlen, da es sein kann dass einige der von mir verwendeten CSS-Regeln von einigen NOF-Versionen als ungültig erkannt und gelöscht werden. Wie das dann in den neusten Versionenn gemacht werden könnte, ist hier beschrieben: https://www.nof-community.de/index.php/topic,1536.0

Auf die Anpassung der CSS-Datei gehe ich an dieser Stelle nicht ein, zu diesem Thema werde ich am Ende dieses Tutorials einen Link posten, unter welchem sowohl der CSS-Teil als auch der html-Teil verständlich gemacht werden.

nettesekel:
Wenn ihr den Slider identisch nachbauen möchtet, benötigt ihr nun als nächstest die Grafiken für die Button und den Hintergrund.

Ihr dürft die von mir erstellten Grafiken für euren Slider verwenden. Speichert sie euch mit einem Rechtsklick auf die Grafik und der Auswahl "speichern unter" ab und kopiert sie in den Ordner assets >> images
eurer lokalen Publizierung und ebenso in den gleichnamigen Ordner auf eurem Server.

Alternativ könnt ihr die Grafiken auch als Assets in euer Projekt einbinden, dann werden sie von NOF in den entsprechenden Ordner publiziert. Eine Anleitung hierzu findet ihr unter diesem Link: www.nof-community.de/index.php/topic,11.0

Die Fotos in meinem Slider haben ein Maß von 215 x 140px.
Wenn ihr keine Änderungen am CSS-Code vornehmen möchtet, dann solltet ihr eure Bilder identisch groß erstellen.

nettesekel:
Nun kommen wir zum html-Code, dem Code für den Slider selbst.

Dieser Code wird kopiert und ins html eines Textfeldes eingefügt. Für die, die eine Anleitung hierzu brauchen hier ein link:www.nof-community.de/index.php/topic,47.0

Ich habe hier bewußt den kompletten Code meines Beispielsliders gepostet, damit ihr den Aufbau eines Sliders mit mehren Slides besser nachvollziehen könnt.

--- Code: HTML5 ---<div id="container"> <div id="gallery"> <div id="slider">  <div class="slide">  <div class="news_div first"> <div class="head_line hl_1"><h2 class="h2">Nachricht 1</h2></div> <div class="style"> <div class="image"><a href="" target="_blank"><img src="./assets/images/bild1.jpg"></a></div> <div class="content"> <h3 class="h3">Überschrift</h3> <p>Lorem ipsum dolor sit amet, con sectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis nato que penatibus et magnis dis part urient montes, nascetur ridiculus mus.</p> <a href="http://www.nof-academy.de" target="_blank" class="mylink ml_1">mehr lesen...</a> </div> </div> </div>  <div class="news_div first"> <div class="head_line hl_2"><h2 class="h2">Nachricht 2</h2></div> <div class="style"> <div class="image"><a href="" target="_blank"><img src="./assets/images/bild2.jpg"></a></div> <div class="content"> <h3 class="h3">Überschrift</h3> <p>Lorem ipsum dolor sit amet, con sectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis nato que penatibus et magnis dis part urient montes, nascetur ridiculus mus.</p> <a href="http://www.nof-academy.de" target="_blank" class="mylink ml_2">mehr lesen...</a> </div> </div> </div>  <div class="news_div first"> <div class="head_line hl_3"><h2 class="h2">Nachricht 3</h2></div> <div class="style"> <div class="image"><a href="" target="_blank"><img src="./assets/images/bild3.jpg"></a></div> <div class="content"> <h3 class="h3">Überschrift</h3> <p>Lorem ipsum dolor sit amet, con sectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis nato que penatibus et magnis dis part urient montes, nascetur ridiculus mus.</p> <a href="http://www.nof-academy.de" target="_blank" class="mylink ml_3">mehr lesen...</a> </div> </div> </div>  <div class="news_div"> <div class="head_line hl_4"><h2 class="h2">Nachricht 4</h2></div> <div class="style"> <div class="image"><a href="" target="_blank"><img src="./assets/images/bild4.jpg"></a></div> <div class="content"> <h3 class="h3">Überschrift</h3> <p>Lorem ipsum dolor sit amet, con sectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis nato que penatibus et magnis dis part urient montes, nascetur ridiculus mus.</p> <a href="http://www.nof-academy.de" target="_blank" class="mylink ml_4">mehr lesen...</a> </div> </div> </div> <div class="clearfloat"></div> </div>  <div class="slide">  <div class="news_div first"> <div class="head_line hl_1"><h2 class="h2">Nachricht 1</h2></div> <div class="style"> <div class="image"><a href="" target="_blank"><img src="./assets/images/bild5.jpg"></a></div> <div class="content"> <h3 class="h3">Überschrift</h3> <p>Lorem ipsum dolor sit amet, con sectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis nato que penatibus et magnis dis part urient montes, nascetur ridiculus mus.</p> <a href="http://www.nof-academy.de" target="_blank" class="mylink ml_1">mehr lesen...</a> </div> </div> </div>  <div class="news_div first"> <div class="head_line hl_2"><h2 class="h2">Nachricht 2</h2></div> <div class="style"> <div class="image"><a href="" target="_blank"><img src="./assets/images/bild6.jpg"></a></div> <div class="content"> <h3 class="h3">Überschrift</h3> <p>Lorem ipsum dolor sit amet, con sectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis nato que penatibus et magnis dis part urient montes, nascetur ridiculus mus.</p> <a href="http://www.nof-academy.de" target="_blank" class="mylink ml_2">mehr lesen...</a> </div> </div> </div>  <div class="news_div first"> <div class="head_line hl_3"><h2 class="h2">Nachricht 3</h2></div> <div class="style"> <div class="image"><a href="" target="_blank"><img src="./assets/images/bild7.jpg"></a></div> <div class="content"> <h3 class="h3">Überschrift</h3> <p>Lorem ipsum dolor sit amet, con sectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis nato que penatibus et magnis dis part urient montes, nascetur ridiculus mus.</p> <a href="http://www.nof-academy.de" target="_blank" class="mylink ml_3">mehr lesen...</a> </div> </div> </div>  <div class="news_div"> <div class="head_line hl_4"><h2 class="h2">Nachricht 4</h2></div> <div class="style"> <div class="image"><a href="" target="_blank"><img src="./assets/images/bild8.jpg"></a></div> <div class="content"> <h3 class="h3">Überschrift</h3> <p>Lorem ipsum dolor sit amet, con sectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis nato que penatibus et magnis dis part urient montes, nascetur ridiculus mus.</p> <a href="http://www.nof-academy.de" target="_blank" class="mylink ml_4">mehr lesen...</a> </div> </div> </div> <div class="clearfloat"></div> </div>  <div class="slide">  <div class="news_div first"> <div class="head_line hl_1"><h2 class="h2">Nachricht 1</h2></div> <div class="style"> <div class="image"><a href="" target="_blank"><img src="./assets/images/bild9.jpg"></a></div> <div class="content"> <h3 class="h3">Überschrift</h3> <p>Lorem ipsum dolor sit amet, con sectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis nato que penatibus et magnis dis part urient montes, nascetur ridiculus mus.</p> <a href="http://www.nof-academy.de" target="_blank" class="mylink ml_1">mehr lesen...</a> </div> </div> </div>  <div class="news_div first"> <div class="head_line hl_2"><h2 class="h2">Nachricht 2</h2></div> <div class="style"> <div class="image"><a href="" target="_blank"><img src="./assets/images/bild10.jpg"></a></div> <div class="content"> <h3 class="h3">Überschrift</h3> <p>Lorem ipsum dolor sit amet, con sectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis nato que penatibus et magnis dis part urient montes, nascetur ridiculus mus.</p> <a href="http://www.nof-academy.de" target="_blank" class="mylink ml_2">mehr lesen...</a> </div> </div> </div>  <div class="news_div first"> <div class="head_line hl_3"><h2 class="h2">Nachricht 3</h2></div> <div class="style"> <div class="image"><a href="" target="_blank"><img src="./assets/images/bild11.jpg"></a></div> <div class="content"> <h3 class="h3">Überschrift</h3> <p>Lorem ipsum dolor sit amet, con sectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis nato que penatibus et magnis dis part urient montes, nascetur ridiculus mus.</p> <a href="http://www.nof-academy.de" target="_blank" class="mylink ml_3">mehr lesen...</a> </div> </div> </div>  <div class="news_div"> <div class="head_line hl_4"><h2 class="h2">Nachricht 4</h2></div> <div class="style"> <div class="image"><a href="" target="_blank"><img src="./assets/images/bild12.jpg"></a></div> <div class="content"> <h3 class="h3">Überschrift</h3> <p>Lorem ipsum dolor sit amet, con sectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis nato que penatibus et magnis dis part urient montes, nascetur ridiculus mus.</p> <a href="http://www.nof-academy.de" target="_blank" class="mylink ml_4">mehr lesen...</a> </div> </div> </div> <div class="clearfloat"></div> </div> </div> <div id="prev_div"><div id="prev" class="prev"></div></div> <div id="next_div"><div id="next" class="next"></div></div> <div class="clearfloat"></div> </div></div>

Für alle Anpassungen den html-Code und auch den CSS-Code betreffend habe ich unter folgendem Link versucht sowohl den html-Code als auch den CSS-Code mit Hilfe farblicher Markierungen und diverser Text-und Bildhinweise anschaulich zu erläutern.
Ich habe bewußt die Grafik vom Slider festgesetzt, damit jederzeit ein Vergleich des Codes mit der Grafik erfolgen kann. Alle unterstrichenen Textabschnitte enthalten versteckte Hinweise und Erläuterungen. http://demos.nof-community.de/ContentNewsSlider/html/erklarung_zum_slider.html

Navigation

[0] Themen-Index

[#] Nächste Seite

Zur normalen Ansicht wechseln