Erstellen Sie mit jQuery einen Image-Slider für iPad

Wenn Sie kein erfahrener Webentwickler sind, kann es sehr einschüchternd sein, ein Projekt anzusprechen, bei dem Ihr Kunde nach etwas Trendigem und Interaktivem sucht, z. B. nach einer Apple-zentrierten Diashow.

Heute zeigen wir Ihnen, wie Sie ein solches Projekt in nur wenigen Minuten erstellen können, indem Sie kostenlose Ressourcen aus dem gesamten Web nutzen. Wir führen Sie durch zehn super einfache Schritte. Selbst wenn Sie wenig oder keine Web-Erfahrung haben, sollte dieses Projekt ein Kinderspiel sein!

Was wir bauen

Der Zweck dieses Tutorials ist es, Ihnen zu zeigen, wie einfach es ist, eine fantastisch animierte, interaktive Webseite zu erstellen, die vollständig freie Ressourcen und nur sehr wenig Aufwand für das Zusammenstellen aller Elemente bietet. Wir verwenden jQuery, ein kostenloses iPad-Image und ein kostenloses Plugin für Image Slider, um den folgenden Effekt zu erzielen.

• Demo-Seite
• Dateien herunterladen

Schritt 1: Starten Sie den HTML-Code

Als erstes wollen wir eine grundlegende Struktur für unser HTML bekommen. Fügen Sie einfach Ihr typisches HTML-Startdokument ein. Ich habe HTML5 verwendet, aber Sie können etwas älteres verwenden, wenn Sie es für angemessen halten.

Seitentitel

An dieser Stelle habe ich zwei Links hinzugefügt: einen zu einem Stylesheet und einen zu jQuery. Stellen Sie sicher, dass Sie beide einschließen. Viele Entwickler empfehlen auch die Installation einer lokalen Version von jQuery, falls die verknüpfte Version aus irgendeinem Grund fehlschlägt.

Das einzige wirkliche Markup, das wir zu diesem Zeitpunkt haben, ist ein Container-Div. Wir werden später mehr hinzufügen, aber für den Moment ist das perfekt.

Schritt 2: Laden Sie das iPad herunter

Natürlich benötigen wir ein iPad-Image. Das iPad ist so einfach, dass Sie wahrscheinlich ziemlich schnell ein eigenes erstellen können, aber wir brauchen nur eine vorgefertigte Version, um den Prozess zu beschleunigen.

Wenn Sie Google? IPad PSD? Die erste Option, die angezeigt wird, ist eine erstaunliche kostenlose Datei von Teehan + Lax, die nicht nur das iPad selbst enthält, sondern auch eine Reihe von UI-Elementen.

Laden Sie dieses iPad-Bild herunter und werfen Sie es in Photoshop, um sich auf den nächsten Schritt vorzubereiten.

Schritt 3: Bereiten Sie die PSD vor

Schnappen Sie sich die Ebenen, die nur das leere iPad enthalten, und werfen Sie sie in ein neues Dokument mit den Abmessungen auf 883 x 535 Pixel. Legen Sie die Hintergrundfarbe auf # 1b1a1b fest und passen Sie das iPad so an, dass der Bildschirm ungefähr 460 Pixel breit ist.

Um visuelles Interesse hinzuzufügen, habe ich auch einen Schatten und eine Reflexion eingefügt. Beachten Sie, dass die Reflexion ausgeblendet wird, bevor Sie auf den Bildschirmbereich treffen. Dies vereinfacht die Sache erheblich, da keine Live-Reflektion mehr erforderlich ist, die bei jeder Folie aktualisiert wird.

Schritt 4: Starten Sie das CSS

Nachdem wir unser iPad-Hintergrundbild haben, starten Sie eine style.css-Datei und stellen Sie das iPad-Bild als Hintergrund ein.

* {Marge: 0; Polsterung: 0; } body {Hintergrundfarbe: # 1b1a1b; } #container {width: 883px; Höhe: 535px; Hintergrundbild: URL (images / ipad.jpg); Überlauf versteckt; Marge: 30px auto; }

Wie immer habe ich einen grundlegenden CSS-Reset durchgeführt, um sicherzustellen, dass alle Browser auf derselben Seite mit Rändern und Füllungen stehen. Ich habe auch die Hintergrundfarbe auf die gleiche Farbe eingestellt, die wir in unserer PSD hatten. Schließlich habe ich das iPad-Bild eingeworfen und auf der Seite zentriert, indem ich eine Breite eingestellt habe und "auto" verwendet habe. für die Ränder.

Fortschrittsvorschau

An diesem Punkt sollte Ihre Live-Vorschau ungefähr so ​​aussehen wie das Bild unten. Bis jetzt gibt es nur ein zentriertes iPad auf einem soliden Hintergrund, aber es sieht schon ziemlich gut aus!

Schritt 5: Fügen Sie ein Bild hinzu

Bevor wir die eigentliche Diashow importieren, möchten wir unsere Positionierung mit einem einzigen statischen Bild berechnen lassen. Wenn Sie dies jetzt tun, werden uns die Dinge einfacher, sodass wir keinen aktiven Artikel positionieren müssen, der möglicherweise nicht ordnungsgemäß funktioniert.

Zunächst möchten Sie offensichtlich ein Bild von irgendwo erstellen oder erstellen. Ich habe gerade ein Bild meines hässlichen Bechers auf 460 x 345 verwendet. Werfen Sie Ihr Bild in einen "Schieberegler". div im Behälter.

<img src="//lesptitesaffairesdemayl.be/img/images_2/build-an-ipad-themed-image-slider-with-jquery_5.jpg"> <h2>Schritt 6: Laden Sie den Nivo Slider herunter</h2> <p>jQuery macht das Erstellen von benutzerdefinierten Image-Schiebereglern zu einem Kinderspiel, aber vorgefertigte jQuery-Plugins wie Nivo Slider reduzieren die Menge an notwendiger Arbeit auf zilch und können oft ein schönes und professionelles Endergebnis liefern. </p> <img src="//lesptitesaffairesdemayl.be/img/images_2/build-an-ipad-themed-image-slider-with-jquery_6.jpg"> <p>Laden Sie eine kostenlose Kopie von Nivo Slider herunter. Dieser einfach zu implementierende Schieberegler verfügt über neun Übergangsoptionen, unterstützt Untertitel und Links und ist vollständig anpassbar. Es ist ein perfektes Beispiel für die Art von Qualitäts-Freebies, die Sie im Internet finden können, wenn Sie wissen, wo Sie suchen müssen. </p> <p>Holen Sie sich die folgenden beiden Dateien aus dem Download und werfen Sie sie in das Stammverzeichnis Ihrer Seite:</p> <ul> <li>jquery.nivo.slider.pack.js</li> <li>nivo-slider.css</li> </ul> <p>Denken Sie daran, diese Dateien im Kopfbereich Ihres HTML-Codes zu verknüpfen. Sie sollten jetzt vier verknüpfte Dateien wie im folgenden Code haben:</p> <textarea wrap="soft" readonly="">

Schritt 7: Fügen Sie weitere Bilder hinzu

Nun, da wir unsere Diashow haben, wollen wir noch ein paar Bilder einwerfen. Nivo greift automatisch alle Bilder auf, die in Ihrem Schieberegler div enthalten sind, sodass wir hier nichts Besonderes tun müssen, sondern sie ablegen müssen.

<img src="//lesptitesaffairesdemayl.be/img/images_2/build-an-ipad-themed-image-slider-with-jquery_7.jpg"> <h2>Schritt 9: Gestalten der Steuerelemente</h2> <p>Technisch sollten wir wahrscheinlich alle diese Stile selbst erstellen, da uns die guten Leute, die den Nivo-Schieberegler bereitstellen, dazu ermutigen. Um dieses Tutorial schnell abzuschließen, verwenden wir einfach das hier bereitgestellte Beispiel-Stylesheet.</p> <p>Im Download enthalten sind ein paar Bilder und ein weiteres Stylesheet, das in Ihrem HTML-Code mit dem Titel "custom-nivo-slider.css" enthalten ist. Anstatt auf eine Million verschiedene Stylesheets zu verlinken, wäre es in der Praxis wahrscheinlich eine gute Idee, diese zu kombinieren, um Überschneidungen zu vermeiden. </p> <p>Das wichtigste, was Sie mit diesem Stylesheet tun müssen, ist den ersten Abschnitt der Stile, der erscheint, da er die bereits implementierte Positionierung beeinträchtigt. Unten sehen Sie, wie ich alles außer der Hintergrundfarbe und der Ladegrafik auskommentiert habe. </p> <textarea wrap="soft" readonly=""> #Slider {/ * Position: relativ; Marge: 30px 30px 60px 30px; * / Hintergrund: # 1b1a1b URL (loading.gif) Wiederholung 50% 50%; / * - Moz-Box-Schatten: 0px 0px 10px # 333; -webkit-box-shadow: 0px 0px 10px # 333; Box-Schatten: 0px 0px 10px # 333; * /}

Schritt 10: Überprüfen Sie das Endprodukt!

Wie Sie unten sehen können, hat der letzte Satz von Styles die Diashow wirklich gut abgeschlossen. Wir haben jetzt Pfeile, die uns vorwärts und rückwärts führen, sowie eine horizontale Liste von Aufzählungszeichen, um den Fortschritt der Diashow zu navigieren und zu verfolgen.

Schauen Sie sich die Live-Demo an, um sie in Aktion zu sehen. Verbringen Sie auch einige Zeit auf der Nivo Slider-Site und stöbern Sie in den verschiedenen Verbesserungen, die verfügbar sind.

Was sonst möchten Sie sehen?

Dieses Tutorial entsprang mir, ich fand einige großartige Ressourcen im Web und wollte sie mit unseren Lesern teilen. Hinterlasse einen Kommentar und lass mich wissen, ob es andere jQuery-Plugins oder Web-Freebies gibt, die du gerne demonstriert haben würdest.

Möchten Sie den Artikel teilen? Hier ist eine praktische verkürzte URL, die Sie in Twitter oder Facebook einfügen können: http://ow.ly/2xtcZ