Websivuilla voi käyttää valmiita JavaScript koodeja valokuvien ja videoiden näyttämiseen. Ne toimivat yleensä hyvin perusasetuksilla. Joskus tulee eteen tilanteita, jolloin perusasetuksiin pitää tehdä muutoksia. Tämä ei aina ole ihan yksinkertaista.

Tässä tapauksessa avautuvan kuvakehyksen sulje-painike pitää saada siirrettyä kehyksen alalaidasta kehyksen ylälaitaan. Voisi kuvitella, että tämän pystyy tekemään helposti tyylitiedostoa muokkaamalla. Asia ei ole kuitenkaan niin, vaan myös JavaScript koodia pitää muuttaa. bottomNavClose id-määrite solmu pitää siirtää koodissa toiseen kohtaan. Koko prosessin voi tehdä alla olevan ohjeen mukaisesti.

 

1. Avaa lightbox.css tyylitiedosto ja lisää sen loppuun seuraava id määritys.

#outerImageContainer #bottomNav{ position: absolute; top: 0px; right: 0px; z-index: 200; padding:8px; background-color:#FFFFFF; font-size: 35px; }

 

2. Avaa lightbox.js tiedosto ja tee siihen seuraava muutos.

Hae koodista kohta (rivin 134 tuntumassa)

Builder.node('div',{id:'bottomNav'},
    Builder.node('a',{id:'bottomNavClose', href: '#' },
        Builder.node('img', { src: LightboxOptions.fileBottomNavCloseImage })
    )
),

 

Siirrä se alla olevan solmun alle (leikkaa ja liimaa) Kannattaa olla tarkkana, että liittää koodin []-merkkien sisään.

objBody.appendChild(Builder.node('div',{id:'lightbox'}, []