Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Designing
Code

Codieren Sie Ihren eigenen Juicy Tabbed Slider (mit dem Nivo Slider)

by
Difficulty:IntermediateLength:LongLanguages:

German (Deutsch) translation by Tatsiana Bochkareva (you can also view the original English article)

Vor einer Woche haben wir Ihnen auf unserer Schwesterseite Webdesigntuts+ gezeigt, wie Sie in Photoshop einen "Juicy Tabbed Slider" entwerfen. Heute zeigen wir Ihnen in wenigen Schritten, wie Sie es tatsächlich codieren. Keine umfangreichen CSS- oder Javascript-Kenntnisse erforderlich - Versprechen! Wir werden den beliebten Nivo Slider verwenden, um die Animation zu verwalten.


Lass uns eintauchen!

Okay, vorausgesetzt, Sie haben die Entwurfsphase dieses Tutorials durchlaufen, sollten Sie jetzt ein ziemlich einfaches Schiebereglerelement im Photoshop- (oder Fireworks-) Format haben. Ich werde dieses Tutorial als "eigenständigen" Schieberegler schreiben - was bedeutet, dass es im Wesentlichen das einzige Element auf der Seite ist, das wir erstellen... aber mit nur ein paar zusätzlichen Schritten sollten Sie in der Lage sein, dies zu tun Fügen Sie dies Ihren eigenen Designs hinzu und positionieren/ändern Sie die Größe nach Ihren Wünschen!

Was besser ist, ist, dass dies vollständig skinnbar und in der Größe veränderbar ist. Wenn Sie also umfangreiche Anpassungen an der kostenlosen PSD vorgenommen haben, die wir verteilt haben, können Sie auch hier Ihre Franken-Modifikationen einbeziehen!


Schritt 1: Laden Sie den Nivo Slider herunter

Laden Sie die neueste Version des Nivo Slider von der entsprechenden Seite herunter. Die Version, die wir verwenden werden, ist Version 2.4, aber wenn sie nicht ihre gesamte Codebasis komplett überarbeiten, stehen die Chancen sehr gut, dass die Schritte in diesem Tutorial in Version 2.5, 2.6 und immer weiter funktionieren.

Es ist wichtig zu beachten, dass wir das Rad hier nicht neu erfinden. Wir werden so ziemlich nur ihre "demo.html" -Datei als unsere eigene Operationsbasis verwenden. Wir werden auch nicht weit von der offiziellen Nutzungsdokumentation abweichen.

Als Webdesigner mache ich eine Menge Arbeit, bei der ich einfach den Open-Source-Code anderer Leute ändere und entführe - wahrscheinlich tun Sie das Gleiche. Dies ist eine wichtige Fähigkeit, es sei denn, Sie möchten jede wichtige Codierungssprache lernen und sind bereit, Ihr Wissen ständig auf dem neuesten Stand zu halten. Ehrlich gesagt finde ich das irgendwie albern - also ist es eine der wichtigsten Fähigkeiten, herauszufinden, wie man den Code anderer Leute verwendet.

In den meisten Fällen (wie in diesem Fall) sind lediglich grobe Kenntnisse in HTML und CSS sowie die Fähigkeit zum Lesen von Dokumentationen erforderlich.

Wir beginnen den nächsten Schritt mit dem Öffnen des Ordners "demo". Machen Sie dies also, bevor Sie fortfahren.


Schritt 2: Grundlegendes zum Setup

In diesem Schritt versuchen wir einfach, eine Vorstellung davon zu bekommen, wie der Nivo Slider funktioniert. Jeder Schieberegler da draußen wird ein bisschen anders funktionieren. Es lohnt sich also, sich ein paar Minuten Zeit zu nehmen, um sich mit dem Skript vertraut zu machen, das Sie für ein Projekt verwenden möchten.

Wenn Sie sich den Code für den Nivo Slider (in der Datei demo.html) kurz ansehen, werden Sie feststellen, dass alle wichtigen Stile und Strukturen aus der Datei "style.css" übernommen werden. Tatsächlich ist der eigentliche HTML-Code ziemlich einfach, sobald Sie auf die entsprechenden Skripte im HEAD-Abschnitt von demo.html verwiesen haben.

Beginnen wir unsere exemplarische Vorgehensweise, indem wir uns die Codezeilen aus der Kopfzeile ansehen. Wir müssen diese nicht ändern, aber sie müssen in jeder Datei vorhanden sein, für die wir den Schieberegler verwenden möchten:

Schauen wir uns als nächstes den rohen HTML-Code an, der den Schieberegler generiert:

Schließlich werden wir uns nicht mit Untertiteln in diesem bestimmten Schieberegler befassen, sodass Sie die nächsten Zeilen so gut wie ignorieren können (es sei denn, Sie möchten den Schieberegler später selbst anpassen):

Alles, was Sie verstehen müssen, ist das grundlegende HTML, das den Schieberegler generiert (siehe oben im zweiten Codeblock). Da wir uns nicht mit Untertiteln in unserem Schieberegler befassen, können Sie den Code weiter vereinfachen:

Das ist doch nicht so schlimm, oder? Es sind im Wesentlichen nur ein paar verpackte DIV-Elemente mit Bildern darin.


Das CSS für den Nivo Slider

Das CSS ist das, was das schwere Heben tun wird, also werfen wir einen Blick darauf:

Wenn Sie mit CSS noch nicht vertraut sind, mag dies zunächst einschüchternd aussehen... aber die meisten von Ihnen werden dies für ein ziemlich einfaches Stück Styling-Code sehen. Alles, was Sie brauchen, um die Größe zu ändern und den Schieberegler neu zu gestalten, ist hier... und wir müssen nur eine Handvoll Skriptzeilen ändern, damit dieses Ding genau wie unsere Version aussieht.

Zuerst müssen wir jedoch die Bilder, die derzeit für den Schieberegler verwendet werden, lokalisieren und neu gestalten. Wenn Sie den Ordner "/demo/images/" öffnen, sehen Sie, dass es nur ein paar Hauptbilder gibt, die wir neu gestalten möchten:

  • arrows.png (die linken/rechten Pfeile)
  • bullets.png (die Punktindikatoren)
  • slider.png (der Hintergrundrahmen)
  • background.png (optional)
  • loading.png (optional)

Das Skinning der Assets

Wenn wir diesen Schieberegler von Grund auf neu codieren würden, würden wir ihn wahrscheinlich Stück für Stück in Photoshop sorgfältig zerhacken. Da wir jedoch mit einem bereits vorhandenen Satz von "assets" arbeiten (auch bekannt als die Bilder, die zum Erstellen des Hintergrunds, der Aufzählungszeichen und der Pfeile verwendet werden), ist es etwas sinnvoller, die bereits vorhandenen Assets zu häuten als von vorne anfangen.

Reskin die Kugeln

Beginnen wir mit der Datei "bullets.png", da es sich um die einfachste Datei handelt. Öffnen Sie es in Photoshop:

Beachten Sie hier die Grundstruktur der Datei. Es gibt zwei Grafiken, die mithilfe von CSS so positioniert werden, dass jeweils eine angezeigt wird.

Wir haben bereits eigene Bullet-Grafiken von unserer eigenen PSD, daher möchten wir sie einfach über den Originalelementen positionieren und die Datei erneut speichern:

In diesem Fall müssen wir die Größe der Datei nicht einmal ändern... also sind wir tatsächlich damit fertig, die Aufzählungszeichen neu zu erstellen! Speichern Sie diese neue Datei über der ursprünglichen "bullets.png".

Reskin die Pfeile

Die Pfeile werden eine Ebene schwieriger, einfach weil unsere Pfeilgrafiken größer sind als die Originalgrafiken. Das ist aber in Ordnung - wir beginnen immer noch damit, die Datei "arrows.png" in Photoshop zu öffnen.


Die Pfeile sind schwer zu erkennen, da sie transparent sind.

Beachten Sie erneut die Struktur der Datei - diesmal zwei Pfeile nebeneinander -, die mithilfe von CSS so positioniert wird, dass jeweils nur einer angezeigt wird.

Die Grafik hat eine Größe von 60x30 Pixel... aber unsere muss groß genug sein, um unsere beiden größeren Pfeile aufzunehmen. Nachdem wir unsere eigenen Pfeile gemessen haben (Sie können dies mit dem Rechteckigen Auswahlwerkzeug und dem Infofenster tun), habe ich beschlossen, dass die neuen Abmessungen 70x65 Pixel betragen sollten. Dies ist groß genug, um beide Pfeile sowie den hellen Schatten zu halten, den wir neben jedem erscheinen möchten.

Wir müssen einige Änderungen an der Größe und Position im CSS vornehmen, aber dies vervollständigt die anfängliche Neugestaltung der Pfeile. Speichern Sie diese neue Datei über dem Original "arrows.png".

Den Hintergrund neu gestalten

Zuletzt lassen Sie uns die Hintergrundgrafik neu gestalten. Die Nivo Slider-Demo verwendet eine abstrakte Art von Kreishintergrund - wir möchten jedoch unsere Grafik "Rahmen und Schatten" für den Hintergrund verwenden.

Dieser Austausch ähnelt dem, was wir mit den Pfeilen gemacht haben, aber anstatt unser Bild vergrößern zu müssen, müssen wir diesmal tatsächlich ein kleineres Dokument speichern. Beachten Sie, wie groß das Originalbild ist:


998x392px - Für die Site verkleinert.

998x392px entspricht den Abmessungen des ursprünglichen Hintergrunds. Wir möchten, dass er näher an 494x310px liegt, um unserem eigenen Rahmen zu entsprechen. Das ist nicht schwer, aber es ist ein Fall, in dem es sinnvoller ist, nur einen direkten Ausschnitt aus unserer ursprünglichen PSD-Datei zu holen.

Schalten Sie ALLE Ebenen (einschließlich des Hintergrunds) außer dem Rahmen und dem Schatten aus und schneiden Sie das Bild dann aus Sicherheitsgründen auf einen Abstand von ca. 20-25 Pixel um den Rahmen zu (wir möchten unseren Schatten nicht versehentlich zuschneiden):

Speichern Sie wie bei den letzten beiden Grafiken direkt über dem Originalbild "slider.png".


Speichern Sie unsere Bildfolien

Der ursprüngliche Schieberegler verwendet Bilder mit einer Größe von 618 x 246. Unser Schieberegler verwendet Bilder mit einer Größe von 430 x 250 Pixel. Daher müssen wir die ursprünglichen Folienbilder mit unseren eigenen beschnittenen Versionen speichern. Sie können hier natürlich Ihre eigenen Bilder verwenden... aber der Einfachheit halber habe ich gerade die Pixar-Bilder zugeschnitten, die in der Demo verwendet wurden.

Wenn Sie Ihre eigenen Bilder verwenden möchten, möchten Sie diese natürlich eindeutig benennen (my_image1.jpg, my_image2.jpg usw.) und dann die Bildpfade im Dokument demo.html ändern.


Passen Sie das CSS an unsere neuen Hautbilder an

Der letzte Schritt ist der schwierigste, da er viel Versuch und Irrtum erfordert. Unser Ziel wird es sein, die ursprüngliche style.css-Datei so zu optimieren, dass unser Schieberegler unserem eigenen Design entspricht. Das Hauptproblem besteht darin, dass der ursprüngliche Schieberegler für die meisten Hauptelemente völlig unterschiedliche Abmessungen verwendet. Daher müssen wir sorgfältig durch Ausprobieren herausfinden, wie unsere eigenen Abmessungen aussehen sollen.

Test und Fehler in CSS können auf verschiedene Arten durchgeführt werden. Der "schwierige" Weg besteht darin, die CSS-Datei einfach weiter zu optimieren, zu speichern und dann im Browser in der Vorschau anzuzeigen. Die einfache Möglichkeit besteht darin, ein Browser-Plugin wie Firebug zu verwenden, um Ihre Anpassungen im Browser selbst zu testen. Wenn Sie Firebug noch nicht gefunden haben, kann ich Ihnen dies jetzt nur empfehlen. Es ist ein einfaches Plugin, das an Ihren Browser angehängt wird.

Ich werde die fertige CSS-Datei jetzt einfach austeilen, dann werden wir sie Schritt für Schritt aufschlüsseln. Ich werde jede Hauptzeile, die bearbeitet wurde, mit einem "/*= NEW =*/" Hinweis markieren:

Bei genauerem Hinsehen werden Sie feststellen, dass alle Änderungen (mit dem Hinweis "/*= NEW =*/") in dieselben grundlegenden Kategorien fallen:

  • Breite
  • Höhe
  • Positionierung (links, rechts, oben, unten)

Die einzigen zwei Ausnahmen sind, wo wir dem ".nivo-controlNav"-Element die Hintergrundfarbe und abgerundeten Ecken hinzugefügt haben und wo wir die Standardpositionierung des ".nivo-directionNav a"-Elements angepasst haben (dieses zweite war zuvor Wird von einem anderen Stylesheet festgelegt, sodass wir die Standardeinstellung von 45% überschreiben, damit unsere Pfeile höher auf dem Schieberegler liegen.

Die andere neue Regel, die wir hinzugefügt haben, sind die Regeln "a.nivo-prevNav:hover{left: -41px;}" für die linke und rechte Schaltfläche. Der Zweck hier ist, jeder Taste einen subtilen Anstoß hinzuzufügen, wenn Sie mit der Maus darüber fahren.

Wenn Sie vorhaben, eine eigene Version des Schiebereglers in der Größe zu erstellen, sollten Sie auf die beiden Stellen achten, an denen die Gesamthöhe und -breite des Schiebereglers festgelegt sind. Kurz gesagt, die Elemente "#slider-wrapper" und "#slider" steuern dies. Passen Sie einfach die Parameter für Höhe und Breite an die Abmessungen Ihres eigenen Schiebereglers an, und schon kann es losgehen.


Letzter Schritt - Ein- und Ausblenden der Pfeile nach links/rechts

Die letzte Änderung, die ich an der ursprünglichen Datei demo.html vorgenommen habe, besteht darin, die Pfeilschaltflächen einzublenden. Standardmäßig verbirgt die Nivo-Folie diese "gerichteten" Navigationssteuerelemente - sie werden nur angezeigt, wenn Sie mit der Maus über den Schieberegler fahren. Für uns sind diese Elemente jedoch eine Schlüsselästhetik, die wir nicht verbergen möchten.

Um dies zu korrigieren, bietet der Nivo Slider eine einfache Methode zum Ausblenden, indem dem Aktivierungsskript eine einzelne Option hinzugefügt wird. Am Ende der Datei demo.html finden Sie Folgendes:

Fügen Sie nun einfach die folgende Option hinzu:

Damit der überarbeitete Code folgendermaßen aussieht:


Abschluss

Das war dieses Tutorial! Obwohl wir kein einziges Element von Grund auf neu codiert haben, haben wir effektiv einen benutzerdefinierten Schieberegler erstellt und ihn dann mithilfe eines der besten vorgefertigten Schiebereglerskripte im Internet im Code realisiert. Ich hoffe, Sie haben in dieser exemplarischen Vorgehensweise einige neue Fähigkeiten erworben - viel Spaß beim Anpassen und Verwenden in Ihrem eigenen Design!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.