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

jQuery Thumbnail-Scroller in NOF

(1/1)

nettesekel:
Mit dem jQuery Thumbnail-Scroller kann man eine Reihe kleiner Fotos horizontal oder vertikal scrollen lassen und z.B. als Navigationsleiste nutzen.

***Quelle***
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: https://www.nof-community.de/sonstige-tutorials-fuer-netobjects-fusion/so-publiziert-man-eine-nof-seite-unter-dem-doctype-loose/

nettesekel:
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 ---@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

nettesekel:
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 ---<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script><script src="./assets/jquery-ui-1.8.13.custom.min.js"></script><link href="./html/jquery.thumbnailScroller.css" rel="stylesheet" type="text/css" />

Code bei Verwendung des Scrollers auf Unterseiten

--- Code: HTML5 ---<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script><script src="../assets/jquery-ui-1.8.13.custom.min.js"></script><link href="./jquery.thumbnailScroller.css" rel="stylesheet" type="text/css" />

nettesekel:
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 ---<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 ---<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 ---target="_blank"
Beispiel:

--- Code: HTML5 ---<a href="http://www.nof-forum.info" target="_blank"><img src="./assets/images/bild1.jpg" /></a>Viel Spaß und gutes Gelingen! :)

Navigation

[0] Themen-Index