Hvordan legge ved bilder til Shadowbox

Shadowbox JS er en Javascript som legger bildene i en svart boks over toppen av en webside. Selv om lik mange såkalte Lightbox skript tilgjengelig, er Shadowbox JS kompatibel med videoer samt bilder. Dette skriptet er også bakoverkompatibel med Lightbox JS, så hvis du trenger å bytte til Shadowbox å støtte videoer eller bare bruke sin mørkere stil, kan du gjøre det uten å endre rel attributter i linkene til bildene dine. Videre gjør Shadowbox JS ikke krever en Javascript-bibliotek som jQuery eller Prototype å arbeide. Du kan legge den til dine websider som rett Javascript.

Bruksanvisning

1 Åpne websiden i Notepad eller en kode editor og legge til denne koden ovenfor den avsluttende </ head> tag:

<Link rel = "stylesheet" href = "sti / til / shadowbox.css" type = "text / css">
<Script src = "sti / til / shadowbox.js" type = "text / javascript"> </ script>

2 Legg denne Javascript-kode mellom et par av <script> tagger i HTML:

Shadowbox.init ();

Kontroller at <script> koder du legge inn dette inne ikke inneholder en src attributt. Hvis du trenger å legge til et nytt par, skrive dem ut som "<script> </ script>" og sette dem under andre <script> koder.

3 Rull ned i kroppen koden på websiden og finne noen linker til bilder som du ønsker knyttet til Shadowbox. Legg rel attributt med verdien "shadowbox":

<a href="path/to/image.jpg" rel="shadowbox"> Bilde link </a>

Dette fungerer også på lenker når <a> tag er pakket rundt en <img> -taggen, slik som med miniatyr koblinger.

4 Legg noen bildeteksten du vil bruke tittelen attributt inne i <a> tag:

<a href="path/to/image.jpg" rel="shadowbox" title="This er min image!"> Bilde link </a>

5 Koble flere bilder til samme Shadowbox bruker et gruppenavn:

<a href="path/to/image1.jpg" rel="shadowbox[group_name]"> Bilde Link 1 </a>
<a href="path/to/image2.jpg" rel="shadowbox[group_name]"> Bilde Link to </a>

Som i dette eksemplet må gruppenavnet gå inni parentes. Gi gruppen et navn som du selv velger, men sørg for at du skriver det ut det samme i hver link hvis du ønsker å koble alle bildene sammen.

Hint

  • Hvis nettstedet brukes Lightbox JS før, trenger du ikke å endre innholdet i rel attributter. Shadowbox plass tidligere Lightbox JS brukere ved å la "lightbox" i stedet for "shadowbox" i linken koden.
  • Når du bruker WordPress, kan du installere Shadowbox JS plug-in hvis du ønsker å bruke den uten å redigere en hvilken som helst webside kode.