Deutschsprachiges NOF - Forum

Support und Tutorials rund um das Thema NetObjects Fusion

collapse

* Alles hat ein Ende...

Eine Weisheit der Dakota-Indianer sagt:
"Wenn Du entdeckst, dass Du ein totes Pferd reitest, steig ab!"

Vor fast fünf Jahren habe ich die NOF-Community gegründet und nachdem just zu diesem Zeitpunkt das „alte NOF-Forum“ quasi über Nacht vom Betreiber geschlossen wurde, war mein Forum für viele Nutzer von NetObjects Fusion eine willkommene Alternative.

Inzwischen sind weit über 5000 NetObjects-Nutzer in der NOF-Community registriert und täglich kommen weitere hinzu. An interessierten Mitgliedern fehlt es also nicht. Was aber fehlt, sind Mitglieder, die Lust haben, anderen Nutzern bei der Lösung ihrer vielfältigen Probleme in der Anwendung von NetObjects Fusion zu helfen. Vielleicht, weil viele von ihnen - ebenso wie ich - das Interesse an NOF verloren haben und zwischenzeitlich mit anderen Programmen arbeiten.

Aktuell ist es so, dass der Support wie die Kosten für den Betrieb der NOF-Community fast ausschließlich von mir übernommen werden. Dies, und die Tatsache, dass ich die Arbeit mit NetObjects Fusion nicht mehr für zeitgemäß halte, veranlasst mich, den aktiven Forenbetrieb zu beenden. Die Beiträge, Tipps und Anleitungen aus den letzten Jahren stehen ab heute nur noch als Nachschlagewerk zur Verfügung.

Ich bedanke mich an dieser Stelle ganz herzlich bei allen, die mich und die NOF-Community in den vergangenen Jahren unterstützt haben.

Beste Grüße nettesekel

Die letzten Beiträge

Autor Thema: jQuery Thumbnail-Scroller in NOF  (Gelesen 1772 mal)

0 Mitglieder und 1 Gast betrachten dieses Thema.

Offline nettesekel

  • Administrator
  • *****
  • Beiträge: 8181
    • Schatznasen- Der Katzenblog
  • NOF-Version: NOF 11
  • System: Windows Vista
  • System-Typ: 32bit
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 »
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: 8181
    • Schatznasen- Der Katzenblog
  • NOF-Version: NOF 11
  • System: Windows Vista
  • System-Typ: 32bit
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 »
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: 8181
    • Schatznasen- Der Katzenblog
  • NOF-Version: NOF 11
  • System: Windows Vista
  • System-Typ: 32bit
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 »
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: 8181
    • Schatznasen- Der Katzenblog
  • NOF-Version: NOF 11
  • System: Windows Vista
  • System-Typ: 32bit
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 »
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... ;)