Fotograferingswebbplatser kör nästan alltid på Flash. Adobes alltmer ökända teknik gör helt enkelt ett utmärkt jobb att visa bilder på ett dynamiskt sätt som är perfekt för fotoutställningar. Det finns dock några nackdelar.
För det första är det inte alltid lätt att hitta en kvalitet, gratis bildspelsmall för att börja från och om du inte är en Flash-utvecklare kan detta leda till betydande kostnader. För det andra är världen i ganska kärlek / hatrelationen med Flash för tillfället, med många utvecklare som om möjligt byter till JavaScript, CSS3 och HTML5.
Så idag ska vi bygga en vacker, Javascript-driven fotograferingssida med ett bildskärm i helskärm. Bokstavligen kommer alla tunga lyftningar att göras av en fantastisk fri jQuery-resurs, så vårt jobb blir mestadels anpassning. Låt oss börja!
Vad vi bygger
Det är alltid bra att se var det är att du går innan du kommer dit, klicka på länken nedan för att se en levande demo av sidan vi ska bygga idag.
Klicka för Live Demo
Komma igång: Hitta den perfekta plugin
Det stora med att arbeta med jQuery är den enorma mängd gratis resurser där ute som du måste jobba med. Andra utvecklare har gått förbi dig och spenderat timmar med att skapa kvalitets plugins som du kan använda helt gratis.
Vi har tagit upp tanken på en helskärmsbildbakgrund på Design Shack i det förflutna, men det plugin vi använde hade ingen bildspelfunktion så vi var ganska fast med en statisk bild. Fotograferingswebbplatser vill ofta visa upp så mycket av sitt arbete som möjligt strax utanför fladdermusen, och inget ger ett starkt intryck som ett jätte bildspel som fyller webbläsarfönstret.
Efter en liten sökning, kom jag över ett enkelt fantastiskt plugin från killarna på BuildInternet som heter Supersized, du kanske har märkt det här pluginet i den här veckans freebie roundup.
Om du vill följa med, ladda ner det här pluginet och duplicera? Default.html? filen ligger inuti. Det finns några exempel på HTML-filer, och det här är det bästa stället att starta för vårt projekt.
Öppna sedan den här filen i din webbläsare för att få en känsla av vad vi ska jobba med. Som du kan se finns det redan en fantastisk bildskärm i helskärmen på plats och några riktigt fina kontroller längst ner.
Jag älskar verkligen dessa kontroller, men för att visa att du inte fastnar i den här designen, skrotar vi dem och låter bildspelet springa autonomt. Vi kommer in i användbarhetsimplikationerna av detta senare. Låt oss först lägga till plugin för nu och designa några bilder.
Slide Design
Layouten på vår grundläggande hemsida blir nästan helt upptagen av vårt bildspel. Om du har bra fotografering att arbeta med kan ditt jobb som designer ha potential att bli betydligt enklare eftersom du bara behöver utnyttja den bilderna korrekt.
För att göra det enkelt ska vi kasta in det lilla meddelandet vi vill ha i bilderna. Det kommer inte att vara direkt text så SEO lider lite, så du kan ta med den faktiska texten och lägga den över bilderna om du tycker att det här är ett stort problem. I grund och botten skulle du bara skapa en helt positionerad div, fylla den med lite text och se till att den sticker ut ordentligt mot dina bakgrundsbilder. Vi får se den här processen i åtgärd senare med vår navigationsmeny.
Till att börja med skapar vi innehållsskärmarna. Dessa hjälper i grund och botten bara att presentera webbplatsen och innehåller inte riktigt någon information som du inte skulle kunna hitta på sidan Om i ett mer användarvänligt format. Dessa bilder kommer att spridas bland fotogliderna och hjälper till att bryta upp innehållet lite.
Skapa ett nytt 1200px med 800px-dokument i Photoshop och fyll det med # 0e1120. Använd sedan en riktigt tung inre skugga för att ge den en fin vignettad känsla som i bilden nedan.
Fyll nu den här bilden med lite text och en logotyp för att presentera webbplatsen. I bilden nedan skapade jag ett enkelt välkomstmeddelande. För den mindre typen jag använde Trajan (kliché men effektiv) och för logotypen använde jag ett fritt teckensnitt som heter Angelic War. Du kan ladda ner den här fonten på DaFont.com.
Lägg märke till att jag gav en liten yttre glöd till logotypen. detta hjälper till att skilja det från resten av texten och ger en fin effekt på den mörka bakgrunden.
Därefter duplicerade jag denna design två gånger och placerade alternativa meddelanden på dessa bilder som diskuterar de andra tjänsterna som erbjuds av fotograferingsföretaget. Texten följer noggrant samma formatering som den första bilden. Upprepning är en enkel och mycket viktig aspekt av designen och du bör alltid leta efter sätt att implementera det.
Välja foton
För resten av bilderna vill vi naturligtvis använda fotografering. Efter det första introglaset (välkommen / bröllop) lägger vi några bröllopsbilder. Efter det andra introglaset (engagemang) lägger vi några bilder av glada par och efter det tredje introglaset (familj / senior) lägger vi några familjefoton.
Vårt fotograferingsföretag är fiktivt, men jag råkar bara vara en fotograf, så jag tar några bilder från min egen portfölj för att användas som fyllmedel för detta projekt. Jag valde följande sex bilder och sparade vardera i samma storlek som våra intro-bilder.
Skrapning av bildspelskontrollerna
Nu kan man göra bildspelet helt autonomt, vilket gör att användbarhetspolitiet kan bli lite litet. Om du inte håller med, lämna bara kontrollerna där! Djupare på platsen där de enskilda projektbildspelet skulle vara, skulle jag definitivt placera kontroller så att kunder och potentiella kunder lätt kan gå fram och tillbaka och välja specifika bilder.Men på hemsidan vill jag bara ha ett snyggt och enkelt rullningsmeddelande som upprepar sig utan någon nödvändig användarinteraktion.
För att uppnå detta, gå in i filen Defautl.html och kommentera eller ta bort allt under "supersized"? div och över den stängande kropps taggen. Följande kod ska vara allt som finns i din kropp.
Sätta in egna bilder
Bläddra nu upp till den övre delen av HTML-sidan där alla skriptkoder är placerade. Här hittar du kontrollerna för bildspelet, det ska vara lätt att se listan med bilder. Observera att de aktuella bilderna har titlar, länkar etc. Vi vill inte att vår bild ska länka någonstans och vi skrapade bottenfältet som visade titeln så att vi kan drastiskt förenkla det här avsnittet och lista våra bilder som följer:
Lägg märke till att jag har satt? Startbredd? och? starthöjd? till storleken på våra bilder. Jag har också satt? Slide_interval? till 6000. Detta kommer att sakta ner bildspelet lite från standardinställningen. Du kan lämna resten av dessa inställningar direkt där de är, bara se till att dina bilder är listade längst ner och att bildskärms-JPG-filerna finns i bildskärmskatalogen.
Navigering HTML
Nu ska ditt bildspel vara igång med dina egna skräddarsydda bilder. Det är dock inte en hemsida förrän du kan hitta resten av innehållet. För att slutföra vår webbplats bygger vi en enkel navigationsmeny och placerar den längst ner på sidan där bildspelskontroller brukade vara.
HTML här är super enkel, bara kasta en oorderad lista under? Loading? div i din kropp.
Navigation CSS
Nu vill vi stile detta för att vara en stapel längst ner. Lyckligtvis var det redan en stapel längst ner när vi först nedladdade plugin så att vi bara kan stjäla några av denna styling och tweak det för våra egna ändamål. Nedan gjorde jag baren 40px hög och satte sin färg med RGBa så jag kunde ha lite genomskinlighet.
Därefter måste vi tillämpa mycket styling på olika delar av den oordnade listan. Vi måste ställa in själva listan, flyta listobjekten så att de visas inline och definiera länk / svängfärgerna.
Nu, för mitt sista trick, vill jag ställa det första elementet i listan lite annorlunda. Detta kommer att fungera som en allmänt närvarande identifierare för webbplatsen och en länk tillbaka till hemsidan. Genom att utforma det första barnet i listan kan jag ge detta element olika marginaler och en annan typ av behandling för att skilja den från de andra.
Du kan se effekten av detta i bilden nedan. Föremålet tjänar fortfarande samma grundläggande syfte som allt annat i listan, det ges helt enkelt speciell visuell behandling eftersom det också är webbplatsens namn.
Slutsats
Med det är vi alla färdiga. Härifrån skulle du koda ut resten av sidorna för att matcha den design du har inställt på hemsidan. Återigen, var noga med att sluta med demoen för att se den i åtgärd.
Lämna en kommentar och låt oss veta hur du skulle förbättra det jag har gjort här. Jag skulle gärna höra vad du skulle förändra och vad du tycker borde vara densamma. Tack för att du läser!