Bygg en iPad-Themed Image Slider med jQuery

Om du inte är en erfaren webbutvecklare, kan det vara ganska skrämmande att närma sig ett projekt där din klient letar efter något trendigt och interaktivt, till exempel ett Apple-centrerat bildspel.

Idag lär vi dig hur du kan skapa ett sådant projekt på bara några minuter med hjälp av några fantastiska gratis resurser från hela webben. Vi går igenom tio super enkla steg så även om du har liten eller ingen webbupplevelse, borde det här vara ett bris!

Vad vi bygger

Syftet med denna handledning är att visa dig hur enkelt det är att bygga en väldigt animerad, interaktiv webbsida med helt gratis resurser och mycket liten ansträngning att kasta dem alla tillsammans. Vi använder jQuery, en gratis iPad-bild och ett gratis bildreglage-plugin för att uppnå följande effekt.

• Demo-sida
• Hämta filer

Steg 1: Starta HTML

Det första vi vill göra är att få en grundläggande struktur för vår HTML. Klistra in bara i ditt typiska HTML-startdokument. Jag använde HTML5 nedan men du kan använda något äldre om du tycker att det är lämpligt.

Sidans titel

Observera att jag på denna punkt har inkluderat två länkar: en till ett stylesheet och en till jQuery. Se till att du inkluderar båda dessa. Många utvecklare rekommenderar också att inkludera en lokal version av jQuery om den länkade versionen misslyckas av någon anledning.

Den enda riktiga markeringen vi har vid denna punkt är en container div. Vi lägger till senare men för nu är det perfekt.

Steg 2: Ladda ner iPad

Självklart behöver vi en iPad-bild. IPad är enkelt nog att du säkert kan skapa din egen ganska snabbt, men vi tar bara en förbyggd version för att påskynda processen.

Om du använder Google? IPad PSD ,? Det första alternativet som dyker upp är en fantastisk gratis fil från Teehan + Lax med inte bara iPad själv, utan också en massa UI-element.

Hämta den här iPad-bilden och släng den i Photoshop för att förbereda sig för nästa steg.

Steg 3: Förbered PSD

Ta tag i skikten som bara innehåller den tomma iPad och släng dem i ett nytt dokument med måtten som är inställda på 883px med 535px. Ställ bakgrundsfärgen till # 1b1a1b och storlek på iPad så att skärmen är ca 460px bred.

För att lägga till visuellt intresse kastade jag också en skugga och reflektion. Observera att reflektionen avsvinner innan du träffar skärmdelen. Detta förenklar saker mycket genom att avbryta behovet av en levande reflektion som uppdaterar med varje bild.

Steg 4: Starta CSS

Nu när vi har vår iPad-bakgrundsbild, startar du en style.css-fil och ställer in iPad-bilden som bakgrund.

* {marginal: 0; vaddering: 0; } kropp {bakgrundsfärg: # 1b1a1b; } #container {width: 883px; höjd: 535px; bakgrundsbild: url (bilder / ipad.jpg); överflöde: gömd; marginal: 30px auto; }

Som alltid har jag kastat i en grundläggande CSS-återställning för att se till att alla webbläsare är på samma sida med marginaler och vadderingar. Jag har också satt bakgrundsfärgen till samma färg som vi hade i vår PSD. Slutligen kastade jag iPad-bilden och centrerade den på sidan genom att ställa in en bredd och använda? Auto? för marginalerna.

Progress Preview

Vid den här tiden borde din live-förhandsvisning se något som bilden nedan. Ännu finns det bara en centrerad iPad på en solid bakgrund men det börjar redan se ganska snyggt ut!

Steg 5: Lägg till en bild

Innan vi importerar det faktiska bildspelet, vill vi få vår positionering utarbetad med en enda statisk bild. Att göra det här gör det bara lättare för oss, så vi behöver inte placera ett aktivt objekt som kanske inte fungerar korrekt.

Först måste du självklart skapa eller ta tag i en bild från någonstans. Jag brukade bara använda en bild på min fula rån på 460 x 345. Kasta din bild i en? Reglage? div inuti behållaren.

<img src="//lesptitesaffairesdemayl.be/img/images_1/build-an-ipad-themed-image-slider-with-jquery_5.jpg"> <h2>Steg 6: Ladda ner Nivo Slider</h2> <p>jQuery gör det möjligt att bygga anpassade bildreglage en bris, men förbyggda jQuery-plugins som Nivo Slider bandar verkligen ner det nödvändiga arbetet runt zilch och kan ofta ge ett vackert och professionellt slutresultat. </p> <img src="//lesptitesaffairesdemayl.be/img/images_1/build-an-ipad-themed-image-slider-with-jquery_6.jpg"> <p>Gå ladda ner en gratis kopia av Nivo Slider. Den här lättanvända skjutreglaget har nio övergångsalternativ, stöder bildtexter och länkar och kan anpassas fullt ut. Det är ett perfekt exempel på vilken typ av kvalitet freebies du kan hitta på webben om du vet var du ska leta efter. </p> <p>Ta tag i följande två filer från hämtningen och släng dem i rotkatalogen på din sida:</p> <ul> <li>jquery.nivo.slider.pack.js</li> <li>nivo-slider.css</li> </ul> <p>Kom ihåg att länka till dessa filer i huvuddelen av din HTML. Du borde nu ha fyra länkade filer som i koden nedan:</p> <textarea wrap="soft" readonly="">

Steg 7: Lägg till fler bilder

Nu när vi har vårt bildspel, vill vi kasta i några fler bilder. Nivo kommer automatiskt ta tag i alla bilder som finns i din slider div, så vi behöver inte göra något speciellt här men släppa dem in.

<img src="//lesptitesaffairesdemayl.be/img/images_1/build-an-ipad-themed-image-slider-with-jquery_7.jpg"> <h2>Steg 9: Stil in kontrollerna</h2> <p>Tekniskt sett borde vi förmodligen skapa alla dessa stilar själva eftersom de bra som tillhandahåller Nivo-reglaget uppmuntrar oss att göra det. Men för att omsluta denna handledning snabbt använder vi bara det typsnitt som de tillhandahåller här.</p> <p>Ingår i hämtningen finns några bilder och ännu ett stilark som ska inkluderas i din HTML-titel? Custom-nivo-slider.css.? Istället för att länka till en miljon olika stylesheets, skulle det i praktiken vara en bra idé att kombinera dessa för att undvika överlappning. </p> <p>Den viktigaste sak som du behöver göra med det här formatet är diken den allra första delen av stilar som visas som de kommer att störa placeringen som vi redan har implementerat. Nedan kan du se hur jag kommenterade allt utom bakgrundsfärgen och laddningsgrafen. </p> <textarea wrap="soft" readonly=""> #slider {/ * position: relative; marginal: 30px 30px 60px 30px; * / background: # 1b1a1b url (loading.gif) no-repeat 50% 50%; / * - moz-box-skugga: 0px 0px 10px # 333; -webkit-box-skugga: 0px 0px 10px # 333; boxskugga: 0px 0px 10px # 333; * /}

Steg 10: Kolla in den slutliga produkten!

Som du kan se nedan slutade den slutliga uppsättningen stilar verkligen av bildspelet snyggt. Vi har nu pilar som tar oss framåt och bakåt samt en horisontell lista över kulor för att navigera och följa framstegen i bildspelet.

Var noga med att kolla in live demo för att se den i aktion. Också spendera lite tid på Nivo Slider-sidan och bläddra bland de olika förbättringar som finns tillgängliga.

Vad annat skulle du vilja se?

Denna handledning sprouted från mig att hitta några bra resurser på webben och vilja dela dem med våra läsare. Lämna en kommentar nedan och låt mig veta om det finns andra jQuery-plugins eller webb-freebies som du skulle vilja se demonstreras här och jag ska se om jag kan piska upp en snabb handledning för att komma igång.

Vill du dela artikeln? Här är en praktisk förkortad URL som du kan klistra in i Twitter eller Facebook: http://ow.ly/2xtcZ