Yshopnoosa.com

Hur du kopplar bilder för att Shadowbox

Shadowbox JS är ett JavaScript som placerar bilder i en svart låda över toppen av en webbsida. Men liknar många så kallade lightbox skript finns tillgängliga, är Shadowbox JS kompatibel med video samt bilder. Detta skript är också bakåtriktade förenlig med Lightbox JS, så om du behöver växla till Shadowbox support videor eller bara använda sin mörkare stil, du kan göra det utan att ändra de rel attribut i länkar till dina foton. Dessutom kräver Shadowbox JS inte en JavaScript-bibliotek som jQuery eller prototyp att arbeta. Du kan lägga till dina webbsidor som raka JavaScript.

Instruktioner

1 Öppna webbsidan i anteckningar eller ett kodredigeraren och lägga till denna kod ovan den avslutande < / head >-taggen:

< länka rel = "stylesheet" href="path/to/shadowbox.css" type = "text/css" >< script src="path/to/shadowbox.js" type = "text/javascript" >< / script >

2 Lägg till detta JavaScript kod mellan ett par av < script >-Taggar i HTML:

Shadowbox.init();

Se till att taggarna < script > du placera koden inuti inte innehåller ett src-attribut. Om du behöver lägga till ett par nya, skriva dem som "< script >< / script >" och sätta dem under andra < script >-taggar.

3 Bläddra nedåt i kroppen koden av webbsidan och hitta länkar till bilder som du vill bifogas Shadowbox. Lägga till rel attribut med värdet "shadowbox":

< en href="path/to/image.jpg" rel = "shadowbox" > bildlänk < /a >

Detta fungerar även på länkar när taggen < en > är virad runt en < img >-taggen, som med thumbnail länkar.

4 Lägga till bildtext text du vill använda title attribut i < en >-taggen:

< en href="path/to/image.jpg" rel = "shadowbox" title = "Detta är min bild!" > bild länk < /a >

5 Länka flera bilder i samma Shadowbox med ett gruppnamn:

< en href="path/to/image1.jpg" rel = "shadowbox [group_name]" > bild länk 1 < /a >< en href="path/to/image2.jpg" rel = "shadowbox [group_name]" > bild länk 2 < /a >

Som i detta exempel, måste gruppnamnet gå inom parentes. Ge gruppen ett namn som du väljer, men se till att du skriver den ut samma i varje länk om du vill länka alla bilder tillsammans.

Tips & varningar

  • Om din webbplats används Lightbox JS innan, behöver du inte ändra innehållet i din rel attribut. Shadowbox rymmer tidigare Lightbox JS användare genom att låta "lightbox" istället för "shadowbox" i koden till.
  • När du använder WordPress, kan du installera Shadowbox JS plugin-om du vill använda det utan att redigera alla webbsidans kod.