När du bygger ditt eget WordPress-tema finns det ett antal saker att överväga. Ett sådant sidelement är ett dynamiskt bildgalleri, antingen med hjälp av en ljuskälla eller någon typ av glidande panel. Båda dessa användargränssnitt mäter snyggt i innehållet i en artikel. Eftersom de båda kan arbeta på typiska webbplatser är det trevligt att få koden redo för användning i något annat bloggtema.
För denna handledning vill jag fokusera på att använda ljusboksseffekten med ett plugin som heter jQuery lightBox. Det här är väldigt enkelt att installera och få skräddarsy på din egen hemsida. Beviljas det finns några besvärliga korrigeringar inom CSS, men överlag fungerar plugin perfekt. Det finns även några alternativa parametrar där du kan ange egenskaper som animationshastigheten eller bakgrundsdeaciteten.
Live Demo - Hämta källkod
Komma igång
Det första steget är att ladda ner en kopia av huvudkoden från plugin hemsidan. Du kan även hitta dessa filer i min demokällkod ovan. Det finns en anpassad CSS-fil som följer med för att formatera de olika ljusboxelementen. Annars är dokumentrubriken ganska ren för andra extra beroenden.
För det här exemplet hämtade jag en lokal kopia av den senaste versionen av jQuery. Detta är det enda kravet att få denna lightbox-plugin att fungera smidigt. En annan viktig punkt att notera är markeringen av HTML på sidan. Vi behöver formatera bildgalleriet med hjälp av miniatyrer som är kopplade till bilden med högre upplösning.
Syntaxen är ganska enkel och jag har kopierat över ett prov nedan. Detta ska gå någonstans i din sidokropp och du kan teoretiskt använda några element för att innehålla miniatyrer. Jag gick med en orörd lista eftersom schemat är meningsfullt i en lista med slumpmässiga Dribbble-skott.
Alt text som bifogas varje bild visas bara när miniatyren inte har laddat in ännu. Men titelelementet fungerar som både ett verktygstips och som en bildtext för bilden. Det här är en väldigt snygg funktion om du gillar idén om tecknade ljusbox gallerier. Och du kan manuellt ställa in texttexten som skiljer sig från titeln med hjälp av funktionsparametrar.
Anpassa CSS
Inuti filen jquery.lightbox-0.5.css Vi kan hitta ett antal viktiga väljare för ljusboxgränssnittet. Du behöver inte redigera någon av denna CSS-kod för plugin till arbete. Men jag tycker att det är värt att förstå vad varje ID och klass kommer att rikta sig på sidan. På så sätt kan du lägga till nya CSS3-effekter eller ändra storlek på ikonerna efter behov.
Min typiska CSS-kod ingår i huvuddokumentarket. Lägg märke till att jag har inställt en annan väljare för # Ljus-container-image-data-box element. Denna div innehåller faktiskt bildtexten för bilden som utför en dropdown-animation. jag använder border-box för alla mina sidelement och det här kan skruva upp bildtexten där den inte kommer att visas korrekt.
Men en snabbkorrigering kan tillämpas genom att helt enkelt rikta in den här behållaren och återställa till innehåll-box. Då är det mycket lättare att tvinga det här ljusboxelementet att fungera som vanligt, men ändå hålla layouten utrustad med hjälp av ramkanter och polstring. Annat än den här snabbkorrigeringen gick jag inte in i några andra problem med plugin CSS.
Så kör LightBox ()
Det sista segmentet vi behöver titta på kallar detta plugin med dess JavaScript-funktion. Det finns bara en obligatorisk väljare som ska rikta in alla element med hjälp av denna ljusboxteknik. Mitt exempel är fäst på alla ankarlänkar inom #thumbnails element. Du kan vara ännu mer specifik och bara rikta länkar till vissa klassnamn.
Observera att funktionen själv inte kräver några extra parametrar. Detta är det absoluta grundläggande standardbeteendet för plugin. Och eftersom det är så enkelt att installera kan du enkelt skapa flera separata gallerier som körs på samma sida! Om du har extra tid titta igenom plugin extra inställningar för att få en uppfattning om vad mer är möjligt.
Du kan anpassa knappstilen, bakgrundsopaciteten, bildtexttexten och så mycket mer. Nedan visas ett exempel från webbplatsen som använder bara några av dessa parametrar. Leksak runt och se vad du kan bygga.
Live Demo - Hämta källkod
Slutgiltiga tankar
Jag hoppas att denna handledning kan vara användbar för vissa utvecklare där ute. Jag älskar att hitta bildgallerier i blogginlägg eftersom det kan vara en fantastisk inspirationskälla. Men det kräver också mycket hårt arbete och ansträngning.Du behöver ha en plan från början om hur du vill bygga ett rent och balanserat användargränssnitt. Du är gratis att ladda ner en kopia av källkoden och se om du kan omforma det här pluginet för att arbeta i din egen blogg eller webbsidayta.