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 Thumbnail-Scroller in NOF  (Gelesen 2225 mal)

0 Mitglieder und 1 Gast betrachten dieses Thema.

Offline nettesekel

  • Administrator
  • *****
  • Beiträge: 8181
jQuery Thumbnail-Scroller in NOF
« am: 03. Mai 2014, 11:36:35 »
Mit dem jQuery Thumbnail-Scroller kann man eine Reihe kleiner Fotos horizontal oder vertikal scrollen lassen und z.B. als Navigationsleiste nutzen.


Wie dieses schnuckelige Teil in NOF aussieht könnt ihr wie immer auf einer DEMO-Seite ansehen und ausprobieren. Es gibt auf der Demo-Seite 4 verschiedene Versionen des Scrollers die sich in der Ausrichtung und Bedienung unterscheiden, aber das werdet ihr schnell selbst erkennen. Wozu die Codes auf den Demo-Seiten sind, werde ich im Laufe dieser Anleitung ansprechen, im Moment müsst ihr diesen noch keine Beachtung schenken.

DEMO: http://demos.nof-community.de/Thumbnail-Scroller/index.html



Grundsätzliche Infos vorab:

Bei den Pfadangaben in diesem Tutorial setze ich eine Publizierung nach Assettyp voraus. Solltet ihr eine andere Publizierungsstruktur bevorzugen, müsst ihr die Pfadangaben der Publizierungsstruktur entsprechend angepassen.
Die verschiedenen Publizierungsstrukturen sind hier erklärt: www.nof-community.de/index.php/topic,1540.0

Der Scroller funktioniert nach meiner Erfahrung im IE nicht unter jedem Doctype fehlerfrei. Eine Publizierung der Seite unter dem Doctype LOOSE ergab auch im IE ein gutes Ergebnis. Wie man seine Seiten unter dem Doctype LOOS publiziert, ist hier erklärt: http://www.nof-community.de/sonstige-tutorials-fuer-netobjects-fusion/so-publiziert-man-eine-nof-seite-unter-dem-doctype-loose/
« Letzte Änderung: 14. Mai 2014, 20:46:18 von nettesekel »

Offline nettesekel

  • Administrator
  • *****
  • Beiträge: 8181
Re: jQuery thumbnail scroller in NOF
« Antwort #1 am: 03. Mai 2014, 15:23:25 »
Zunächst benötigt ihr einige Dateien, die ihr euch von http://manos.malihu.gr/jquery-thumbnail-scroller/ herunterladen müsst. Klickt dazu einfach auf den Download-Link, er ist nicht zu übersehen. Ihr erhaltet eine Zip-Datei mit einigen Dateien, keine Angst ihr benötigt nicht alle.

Um den Scroller in NOF einbauen zu können, kopiert ihr aus der entpackten Zip-Datei nun folgende Dateien in den Assetordner eures Projekts:
jquery.thumbnailScroller.css
jquery.thumbnailScroller.js
jquery-ui-1.8.13.custom.min.js
nextArrow.png
prevArrow.png


Den Inhalt der Datei "jquery.thumbnailScroller.css" ersetzt ihr durch folgenden Code, da ich an der Originaldatei einige Änderungen vorgenommen habe. Kopiert euch hierzu den Code, öffnet die CSS-Datei (jquery.thumbnailScroller.css) im Editor und tauscht den Code aus. Speichern fertig.

Code: HTML5
  1. @charset"utf-8";/**/.jThumbnailScroller{position:relative;width:940px;height:146px;margin:160px auto 0 auto;border:5px solid #eee;background:#bbb;padding:0;overflow:hidden;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;}.jThumbnailScroller .jTscrollerContainer{position:absolute;}.jThumbnailScroller .jTscroller{position:relative;height:100%;margin:0;left:0;top:0;display:inline-block;*display:inline;}.jThumbnailScroller .jTscrollerNextButton,.jThumbnailScroller .jTscrollerPrevButton{position:absolute;display:block;width:40px;height:40px;-moz-border-radius:20px;-webkit-border-radius:20px;border-radius:20px;opacity:0.7;}.jThumbnailScroller .jTscrollerNextButton{background:#000 url(../assets/images/nextArrow.png) center center;}.jThumbnailScroller .jTscrollerPrevButton{background:#000 url(../assets/images/prevArrow.png) center center;}.jThumbnailScroller .jTscrollerNextButton:hover,.jThumbnailScroller .jTscrollerPrevButton:hover{background-color:#d56916;opacity:1;}.jThumbnailScroller .jTscroller a{display:block;float:left;border:5px solid #ddd;margin:6px 10px 6px 0;background:#fff;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;}.jThumbnailScroller .jTscroller a:hover{border-color:#fff;}.jThumbnailScroller .jTscroller a:first-child{margin-left:10px;}.jThumbnailScroller .jTscroller a img{border:none;}/**//**/.jThumbnailScroller#tS1{width:95%;}.jThumbnailScroller#tS2{margin:30px auto;}.jThumbnailScroller#tS2 .jTscroller a{opacity:0.7;}.jThumbnailScroller#tS2 .jTscroller a:hover{opacity:1;}.jThumbnailScroller#tS2 .jTscrollerNextButton{margin:-20px 10px 0 10px;right:0;top:50%;}.jThumbnailScroller#tS2 .jTscrollerPrevButton{margin:-20px 10px 0 10px;left:0;top:50%;}/**/.jThumbnailScroller#tS3{width:210px;height:750px;margin:0;background:#eee;}.jThumbnailScroller#tS3 .jTscroller{height:auto;margin-bottom:40px;}.jThumbnailScroller#tS3 .jTscroller a{display:block;margin:0 6px 10px 6px;width:190px;overflow:hidden;opacity:0.7;}.jThumbnailScroller#tS3 .jTscroller a:hover{opacity:1;}.jThumbnailScroller#tS3 .jTscroller a:first-child{margin-top:10px;}.jThumbnailScroller#tS3 .jTscrollerNextButton{margin:10px 0 10px -20px;bottom:0;left:50%;-moz-transform:rotate(90deg);-webkit-transform:rotate(90deg);-o-transform:rotate(90deg);-ms-transform:rotate(90deg);}.jThumbnailScroller#tS3 .jTscrollerPrevButton{margin:10px 0 10px -20px;top:0;left:50%;-moz-transform:rotate(90deg);-webkit-transform:rotate(90deg);-o-transform:rotate(90deg);-ms-transform:rotate(90deg);}


Im Anschluss bindet ihr die benötigten Dateien als Assets in euer Projekt ein. Das Selbe gilt für die Bilder, die ihr im Scroller darstellen möchtet.
Eine Anleitung zum Einbinden von Assets findet ihr bei Bedarf hier: www.nof-community.de/index.php/topic,11.0
« Letzte Änderung: 14. Mai 2014, 20:42:01 von nettesekel »

Offline nettesekel

  • Administrator
  • *****
  • Beiträge: 8181
Re: jQuery thumbnail scroller in NOF
« Antwort #2 am: 03. Mai 2014, 16:12:40 »
Im nächsten Schritt verlinkt ihr die benötigten Scripts und die CSS-Datei. Dazu kopiert ihr den folgenden  Code und fügt in zwischen den Head-Tags der Seite ein, in welcher der Thumbnail-Scroller laufen soll. Wer nicht weiß, wie man eine Einfügung zwischen den head-Tags einer Seite vornimmt, kann dies hier nachlesen: www.nof-community.de/index.php/topic,851.0

Code bei Verwendung des Scrollers auf der Startseite

Code: HTML5
  1. <script src="./assets/jquery-ui-1.8.13.custom.min.js"></script>
  2. <link href="./html/jquery.thumbnailScroller.css" rel="stylesheet" type="text/css" />


Code bei Verwendung des Scrollers auf Unterseiten

Code: HTML5
  1. <script src="../assets/jquery-ui-1.8.13.custom.min.js"></script>
  2. <link href="./jquery.thumbnailScroller.css" rel="stylesheet" type="text/css" />

« Letzte Änderung: 14. Mai 2014, 20:42:47 von nettesekel »

Offline nettesekel

  • Administrator
  • *****
  • Beiträge: 8181
Re: jQuery thumbnail scroller in NOF
« Antwort #3 am: 14. Mai 2014, 19:27:34 »
Nun benötigt ihr noch zwei weitere Einfügungen damit euer Scroller funktioniert.

Zum einen ist das der Code für euren Scroller, welchen ihr in ein Textfeld einfügt. Eine Anleitung dazu findet ihr bei Bedarf hier: www.nof-community.de/index.php/topic,47.0


Und zum Zweiten benötigt ihr noch ein kleines Script, welches ihr am Ende des Body-Tags eurer Seite einfügen müsst.
Der nachfolgende Screenshot zeigt, wo diese Einfügung hingehört.
Achtet darauf, dass sich der schließende Body-Tag hinter/nach eurem Code befindet.




Die Codes für beide Einfügungen findet ihr auf der Demoseite. Hier könnt ihr zwischen 4 verschiedenen Scrollervarianten wählen. Da die Codes für die 4 Varianten nicht identisch sind, findet ihr auf jeder Seite den Code der zum jeweiligen Scroller gehört.
Welcher Code an welche Stelle gehört steht über den Code-Containern.
Da sich der Code für die Startseite von dem für Unterseiten minimal unterscheidet, findet ihr jeweils zwei Varianten.

Im Code für das Textfeld müsst ihr allenfalls die Namen eurer Bilddateien abändern.

Hier z.B. wäre es bild1.jpg
Code: HTML5
  1. <a href="#"><img src="./assets/images/bild1.jpg" /></a>

Wollt ihr die Bilder verlinken, dann tragt den Link für das jeweilige Bild statt des #-Zeichens ein.

Beispiel:
Code: HTML5
  1. <a href="http://www.nof-forum.info"><img src="./assets/images/bild1.jpg" /></a>

Möchtet ihr, dass die Links in einem neuen Browsertab/-fenster öffnen dann ergänzt den Link noch um

Code: HTML5
  1. target="_blank"

Beispiel:
Code: HTML5
  1. <a href="http://www.nof-forum.info" target="_blank"><img src="./assets/images/bild1.jpg" /></a>
Viel Spaß und gutes Gelingen! :)
« Letzte Änderung: 14. Mai 2014, 20:50:52 von nettesekel »

Deutschsprachiges NOF - Forum

Support und Tutorials rund um das Thema NetObjects Fusion