Idag ska vi slutföra vår två-deliga cu3er-handledning.
För dem som inte vet är Cu3er en fantastisk 3D-bildreglage som är fri att använda och lätt att installera.
Det här avsnittet kommer att undersöka hur du anpassar ditt bildspel med några av Cu3ers många anpassningsalternativ. Vi redigerar mestadels en XML-sida, men oroa dig inte om att det blir för techie. Även om du inte vet vad XML är, är det allt ganska enkelt och lätt att förstå.
Tidigare på Design Shack
I del 1 i Cu3er-handledningen hämtade vi Cu3er och ändrade exempelsidan för att se hur enkelt det är att integrera bildspelet i dina mönster.
Innan vi börjar, kanske du vill kolla in demoen och ladda ner källfilerna.
Konfigfilen
Om du följde förra gången skulle din config.xml-fil vara orörd från den ursprungliga filen som vi hämtade från cu3er-webbplatsen.
Demon och associerade filer ovan har ändrats något för att inkludera en startfunktion men idag börjar vi tillbaka till standardfilen bara för att ha en ren skiffer.
Få ditt exempel redo att gå och öppna konfigurationsfilen och vi kommer igång! Det ska bara finnas två avsnitt i den här filen: inställningar och diabilder. Som standard innehåller inställningsdelen endast koden för föregående och nästa knapp för att navigera i bildspelet. Känn dig fri att spela med eller eliminera dessa inställningar på egen hand, men vi lämnar dem eftersom det är för att jag tycker om att ha möjlighet att manuellt navigera i bildspelet.
Autostart
Som standard är Cu3er-bildspelet statiskt och kommer inte att ändra bilder tills du klickar på nästa knapp. Det finns dock många exempel där du kanske vill att bildspelet bara ska köras automatiskt när sidan laddas.
För att uppnå detta, kopiera och gå igenom följande kod från Cu3er-dokumentationen till inställningsdelen av din XML-fil.
Den första delen av den här koden styr hur länge timern är på varje bild och hur den ser ut. Du har två alternativ här: linjär eller cirkulär. Det cirkulära alternativet är ett cirkeldiagram som fylls gradvis upp och det linjära alternativet är en rektangel med ett horisontellt svep. Tiden är det antal sekunder som bilden ska visas innan du går vidare.
Tweening-delen är en animationsprincip och har att göra med linjäriteten av animationshastigheten över tiden. De viktigaste värdena här är x, y-koordinaterna, som gör det möjligt att ställa in timerns position, höjd och bredd, vilket gör att du kan ställa in timerns storlek och nyans, vilket ger dig kontroll över timerens färg.
Så om vi ville ha en cirkulär timer, en varaktighet på två sekunder, med en storlek på 50px och en blåfärg, skulle vi använda följande kod:
Anpassa bilder
Lägga till extra bilder är super lätt. Gå bara till objektglaset och kopiera och klistra in en del den del av koden mellan diabilden och ändra bildnamnet till namnet på din jpg.
Om du vill placera en bild som heter sunrise.jpg så ser koden ut så här:
Lägga till länkar till bilder
Använd följande kod för att lägga till en länk så att när en användare klickar på en bild öppnas länken (ersätt länken med din egen).
Lägga till beskrivningar i bilder
Cu3er ger dig möjlighet att lägga till både en rubrik och ett stycke till varje bild. Den här beskrivningen kan eventuellt ha en tillhörande länk som skiljer sig från länken som är kopplad till objektglaset.
Kodbiten för att uppnå detta kommer strax efter bildskärmsadressen.
Detta ger ett resultat som liknar det nedan.
Anpassa beskrivningsrutan
För att anpassa beskrivningsinställningarna, sätt in följande kod i inställningsområdet och tweak det till dina egna inställningar.
Här kan du tilldela teckensnitt, textstorlek, textfärg och textmarginal för både rubriken och stycket. Tween-informationen gör att du kan placera rutan som håller texten och bestämma dess höjd-, färg- och animeringsegenskaper. Eftersom mina bilder är 600px breda ställer jag in mitt x-värde och min bredd så att x gånger två plusbredder är lika med 600 (150 * 2 + 300) för att centrera beskrivningen horisontellt på bilden.
Dessa inställningar ger mig följande resultat:
Definiera 3D-övergången
Det sista anpassningsbara attributet vi ska gå över är det roligaste: 3D-övergångarna. Cu3er ger dig fullständig kontroll över arten av dessa övergångar. För att illustrera, låt oss titta på följande kod:
Som du kan se har vi här placerat några övergångsattribut mellan två diabilder. Först berättar vi Cu3er hur många skivor vi vill ha i övergången. Det här kan vara vilket som helst nummer du vill ha, bara kom ihåg animeringen börjar bli hakig runt 30. Du kan också bestämma om du vill skära bilden vertikalt eller horisontellt. Om vertikalt väljer du om du vill att riktningen ska vara upp eller ner. Om horisontellt väljer du vänster eller höger riktning.
Också visad ovan är skuggaren. Alternativen här är ingen, platt och phong, den senare av dessa är en slags vignett.
Du kan också ställa in kubefärgen (0x333333), längd (i sekunder) och fördröjning (i sekunder) för varje övergång. Kom bara ihåg att alltid placera övergångsegenskaperna mellan två bilder och inte i en bild.
Slutsats
Förhoppningsvis kan du nu enkelt kasta ett Cu3er-bildspel till en webbsida och anpassa de flesta av dess inställningar. För mer information om tweaking av bildspelet, var noga med att sluta på dokumentationssidan.
Cu3er är ganska hett objekt och används i ett antal toppsäljande teman på ThemeForest.Att arbeta i din portfölj av erbjudanden är ett bra och enkelt sätt att wow potentiella kunder.
Låt oss veta om det finns några andra plugins eller glänsande webbleksaker du skulle vilja se oss gå över. Vi letar alltid efter cool ny teknik för att lära och dela!