Deutschsprachiges NOF - Forum

Support und Tutorials rund um das Thema NetObjects Fusion

collapse

* Wichtige Mitglieder-Information

Aufgrund der anstehenden gesetzlichen Änderungen in Sachen Datenschutz habe ich am 03.05.2018 eine umfassende Bereinigung unserer Datenbanken vorgenommen.

Bei dieser Bereinigung habe ich alle personenbezogenen und privaten Daten unserer Mitglieder aus den Mitglieder- , Beitrags- und Nachrichtendatenbanken gelöscht.

Konkret von der Löschung betroffen waren hierbei im Wesentlichen folgende Daten:

persönliche Avatare
E-Mail-Adressen
Angaben zum Wohnort
Angaben zum Geschlecht
Angaben zu Alter und Geburtstag
IP-Adressen
Websites und Websitetitel
Signaturen
Angaben zu diversen Messengern
Passwörter
Sicherheitsfragen und -antworten
Angaben zur verwendeten Programmversion
Angaben zum verwendeten Betriebssystem
sämtlicher persönlicher Schriftverkehr in Form privater Nachrichten

Beste Grüße nettesekel

* Friendship

DER Katzenblog – mit tollen Tipps und Ideen für deine Katze(n) <3

Die letzten Beiträge

Autor Thema: jQuery Easy Accordion für NetObjects Fusion  (Gelesen 3068 mal)

0 Mitglieder und 1 Gast betrachten dieses Thema.

Offline nettesekel

  • Administrator
  • *****
  • Beiträge: 8181
jQuery Easy Accordion für NetObjects Fusion
« am: 10. März 2013, 10:14:05 »
Kürzlich haben wir den Slider "jQuery Easy Accordion" ausgegraben und für gut befunden. In besagten Thread habe ich neulich nur eine ganz kurze Anleitung dazu gegeben, wie man den Slider in NOF einbauen kann. Nun möchte ich das Ganze nochmal für unser Tutorial-Board zusammenfassen.

Quelle: http://www.madeincima.it/en/articles/resources-and-tools/easy-accordion-plugin/

Wie der Slider ursprünglich aussieht und dass er auch in NOF funktioniert und integrierbar ist, ist hier zu sehen.

Nun habe ich mich mal ein wenig mit dem Aufbau des Sliders befasst und mein Grafikprogram parallel angeschmissen und habe festgestellt, dass man aus diesem Accordion-Slider eine ganze Menge machen kann. Natürlich waren neben der Erstellung der Grafiken auch einige Änderungen an Scripts und Code notwendig... so dass man für verschiedene Slider auch unterschiedliche Codes benötigt. Aus diesem Grund habe ich die verschiedenen Slider mal auf einer separaten Seite zusammengefasst und biete dort auch übersichtlich die jeweiligen Codes und Dateien zum Download an.

http://www.nof-academy.de/jQuery%20Easy%20Accordion%20fuer%20NetObjects%20Fusion/index.html
« Letzte Änderung: 01. April 2013, 22:13:25 von nettesekel »

Offline nettesekel

  • Administrator
  • *****
  • Beiträge: 8181
jQuery Easy Accordion verschieden Styles für NetObjects Fusion
« Antwort #1 am: 10. März 2013, 18:51:38 »
Und so müsst ihr vorgehen...

Zuerst sucht ihr euch auf der Übersichts-Seite einen Slider-Style aus, der euch zusagt und ruft dann über den dazu gehörenden Button "Demo + Downloads" die Seite mit den Details auf.

Hier findet ihr nun funktional verschiedene Versionen des ausgewählten Sliders, zwischen denen ihr wiederum wählen müsst.
Wenn ihr euch hier nun für eine Version entschieden habt, dann ladet ihr euch zuerst die dazugehörigen Scripts und Grafiken herunter.

Nach dem Download habt ihr zwei zip-Datein welche ihr entpacken müsst. Dabei kommen die Ordner "images" und "scripts" zum Vorschein.
Die Grafiken aus dem zip-Ordner "images" müsst ihr nun in den Ordner "images" eurer lokalen Publizierung (zum offline testen) und in den gleichnamigen Ordner auf eurem Server kopieren. Der Ziel-Ordner "images" befindet sich im Ordner "assets".

Den Ordner Scripts, welcher zwei js-Dateien beinhaltet, müsst ihr ebenfalls im Ordner lokale Publizierung (zum offline testen) platzieren und natürlich auch auf eurem Server im Rootverzeichnis. (dort wo auch die Ordner "assets" und "html" sowie die "index.html" zu finden sind.

Damit wäre die Vorarbeit erledigt.
« Letzte Änderung: 12. März 2013, 13:23:52 von nettesekel »

Offline nettesekel

  • Administrator
  • *****
  • Beiträge: 8181
jQuery Easy Accordion für NetObjects Fusion - Code platzieren
« Antwort #2 am: 10. März 2013, 22:24:20 »
Im nächsten Schritt platziert ihr den Code für euren Slider in eurem NOF-Projekt.
Zu jedem Slider findet ihr zwei Code-Boxen. Die erste Box beinhaltet den Code für das Seiten-html.
Kopiert diesen Code in eure Zwischenablage und fügt ihn dann in html der Seite ein, in welcher der Slider erscheinen soll. Soll der Slider nur auf einer Seite laufen, empfiehlt es sich, den Code ins Layout-html einzufügen, soll er auf vielen/allen Seiten laufen, ist es empfehlenswert ihn im Masterrahmen-html zu platzieren.
Die Layout-Eigenschaften ruft ihr mit der Taste F9 und die Masterrahmen-Eigenschaften mit der Taste F10 auf. In beiden Fällen wird im Anschluss der "html"- Button auf der Eigenschaftenpalette angeklickt.
Es öffnet sich ein Fenster in welchem nun zwischen die Head-Tags der kopierte Code eingefügt wird.

HINWEIS: Die relativen Pfade im Code sind darauf ausgerichtet, dass der Slider auf einer Unterseite läuft. Solltet ihr den Slider auf der Startseite laufen lassen wollen, so müssen alle im Code vorhandenen relativen Pfade um den ersten Punkt gekürzt werden.
BEISPIEL:  ../assets/images/bild.png  wird zu   ./assets/images/bild.png 
« Letzte Änderung: 12. März 2013, 13:24:19 von nettesekel »

Offline nettesekel

  • Administrator
  • *****
  • Beiträge: 8181
Nun kopiert ihr euch den Code aus der zweiten Code-Box eures Sliders in die Zwischenablage und fügt ihn ins html eines Textfeldes ein.
Wie man Code in ein Textfeld einfügt, könnt ihr hier nachlesen: http://www.nof-community.de/index.php/topic,47.0.html

Das Textfeld platziert ihr an der Stelle, an welcher euer Slider erscheinen soll. Wenn ihr alles richtig gemacht habt, sollte nach Publizierung der Seite euer Slider zu sehen sein.
« Letzte Änderung: 12. März 2013, 13:24:55 von nettesekel »

Offline nettesekel

  • Administrator
  • *****
  • Beiträge: 8181
An dieser Stelle möchte ich nun noch erklären, wie ihr eure eigenen Inhalte in den Slider bekommt, bzw. an welcher Stelle im Code hierzu Änderungen nötig sind.
Und auch für einige kleine optische Änderungen werde ich noch die passende Stelle im Code "verraten".

Für die Erklärung werde ich mit Codebeispielen arbeiten, in welchen ich von Sternchen umgebene Kommentare einfüge. Ausserdem werde ich mit Farbcodes arbeiten. Also eine rot gekennzeichnete Erklärung bezieht sich auf einen rot gekennzeichneten Codeabschnitt.

Eigene Überschriften, Text-Inhalte und Bilder im Code platzieren
--------------------------------------------------------------------------------------------------




Optische Anpassungen des Sliders durch Änderungen im CSS-Code
--------------------------------------------------------------------------------------------------


« Letzte Änderung: 12. März 2013, 19:57:33 von nettesekel »

Offline nettesekel

  • Administrator
  • *****
  • Beiträge: 8181
Re: jQuery Easy Accordion für NetObjects Fusion
« Antwort #5 am: 12. März 2013, 20:16:09 »
Viel Spaß!  (happy)

« Letzte Änderung: 20. Februar 2014, 20:37:15 von nettesekel »

Deutschsprachiges NOF - Forum

Support und Tutorials rund um das Thema NetObjects Fusion