Deutschsprachiges NOF - Forum

Support und Tutorials rund um das Thema NetObjects Fusion

collapse

* Neuigkeiten der NOF-Community

Die letzten Beiträge

Autor Thema: Content-Slider, Nachrichten-Slider, Menü-Slider... für NOF  (Gelesen 2022 mal)

0 Mitglieder und 1 Gast betrachten dieses Thema.

Offline nettesekel

  • Administrator
  • *****
  • Beiträge: 7869
    • Schatznasen- Der Katzenblog
  • NOF-Version: NOF 11
  • System: Windows Vista
  • System-Typ: 32bit

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
« Letzte Änderung: 12. Mai 2014, 19:05:01 von nettesekel »
Der neue Katzenblog mit vielen Tipps und Ideen für Katzenhalter.

Fragen - die inhaltlich ins Forum gehören - sind im Forum zu stellen und werden nur dort beantwortet. Anfragen dieser Art per PN bleiben unbeantwortet!


Avatar: fotolia.com  rat © Oleg Kozlov

Offline nettesekel

  • Administrator
  • *****
  • Beiträge: 7869
    • Schatznasen- Der Katzenblog
  • NOF-Version: NOF 11
  • System: Windows Vista
  • System-Typ: 32bit
Re: Content-Slider, Nachrichten-Slider, Menü-Slider... für NOF
« Antwort #1 am: 12. Februar 2014, 20:03:55 »
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:
1.

Dieser Code ist nur für Mitglieder sichtbar.
Bitte einloggen oder registrieren.


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:
1.

Dieser Code ist nur für Mitglieder sichtbar.
Bitte einloggen oder registrieren.



Screenshots sind nur für Mitglieder sichtbar. Bitte einloggen oder registrieren.
« Letzte Änderung: 13. Februar 2014, 22:56:30 von nettesekel »
Der neue Katzenblog mit vielen Tipps und Ideen für Katzenhalter.

Fragen - die inhaltlich ins Forum gehören - sind im Forum zu stellen und werden nur dort beantwortet. Anfragen dieser Art per PN bleiben unbeantwortet!


Avatar: fotolia.com  rat © Oleg Kozlov

Offline nettesekel

  • Administrator
  • *****
  • Beiträge: 7869
    • Schatznasen- Der Katzenblog
  • NOF-Version: NOF 11
  • System: Windows Vista
  • System-Typ: 32bit
Re: Content-Slider, Nachrichten-Slider, Menü-Slider... für NOF
« Antwort #2 am: 12. Februar 2014, 20:15:45 »
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:
1.

Dieser Code ist nur für Mitglieder sichtbar.
Bitte einloggen oder registrieren.




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:
1.

Dieser Code ist nur für Mitglieder sichtbar.
Bitte einloggen oder registrieren.


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:
1.

Dieser Code ist nur für Mitglieder sichtbar.
Bitte einloggen oder registrieren.



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: http://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.
« Letzte Änderung: 16. Februar 2014, 15:04:48 von nettesekel »
Der neue Katzenblog mit vielen Tipps und Ideen für Katzenhalter.

Fragen - die inhaltlich ins Forum gehören - sind im Forum zu stellen und werden nur dort beantwortet. Anfragen dieser Art per PN bleiben unbeantwortet!


Avatar: fotolia.com  rat © Oleg Kozlov

Offline nettesekel

  • Administrator
  • *****
  • Beiträge: 7869
    • Schatznasen- Der Katzenblog
  • NOF-Version: NOF 11
  • System: Windows Vista
  • System-Typ: 32bit
Re: Content-Slider, Nachrichten-Slider, Menü-Slider... für NOF
« Antwort #3 am: 13. Februar 2014, 12:25:41 »
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

Screenshots sind nur für Mitglieder sichtbar. Bitte einloggen oder registrieren.


Screenshots sind nur für Mitglieder sichtbar. Bitte einloggen oder registrieren.


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.
« Letzte Änderung: 14. Februar 2014, 11:43:29 von nettesekel »
Der neue Katzenblog mit vielen Tipps und Ideen für Katzenhalter.

Fragen - die inhaltlich ins Forum gehören - sind im Forum zu stellen und werden nur dort beantwortet. Anfragen dieser Art per PN bleiben unbeantwortet!


Avatar: fotolia.com  rat © Oleg Kozlov

Offline nettesekel

  • Administrator
  • *****
  • Beiträge: 7869
    • Schatznasen- Der Katzenblog
  • NOF-Version: NOF 11
  • System: Windows Vista
  • System-Typ: 32bit
Re: Content-Slider, Nachrichten-Slider, Menü-Slider... für NOF
« Antwort #4 am: 13. Februar 2014, 22:58:33 »
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:
1.

Dieser Code ist nur für Mitglieder sichtbar.
Bitte einloggen oder registrieren.



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



« Letzte Änderung: 16. Februar 2014, 12:18:06 von nettesekel »
Der neue Katzenblog mit vielen Tipps und Ideen für Katzenhalter.

Fragen - die inhaltlich ins Forum gehören - sind im Forum zu stellen und werden nur dort beantwortet. Anfragen dieser Art per PN bleiben unbeantwortet!


Avatar: fotolia.com  rat © Oleg Kozlov

Offline nettesekel

  • Administrator
  • *****
  • Beiträge: 7869
    • Schatznasen- Der Katzenblog
  • NOF-Version: NOF 11
  • System: Windows Vista
  • System-Typ: 32bit
Re: Content-Slider, Nachrichten-Slider, Menü-Slider... für NOF
« Antwort #5 am: 16. Februar 2014, 12:18:40 »
Ich wünsche euch gutes Gelingen und würde mich über Feedback zur Verständlichkeit des Tutorials sowie über Links zu euren eingebauten Slidern freuen.  >> Feedback <<

l.g. nettesekel


« Letzte Änderung: 19. Februar 2014, 13:57:53 von nettesekel »
Der neue Katzenblog mit vielen Tipps und Ideen für Katzenhalter.

Fragen - die inhaltlich ins Forum gehören - sind im Forum zu stellen und werden nur dort beantwortet. Anfragen dieser Art per PN bleiben unbeantwortet!


Avatar: fotolia.com  rat © Oleg Kozlov

Deutschsprachiges NOF - Forum

Support und Tutorials rund um das Thema NetObjects Fusion

 


Wenn dir dieser Artikel gefallen hat, dann empfehle ihn doch weiter... ;)