Jakiś czas temu znalazłem zlecenie(zlecenia.przez.net) dot. dodania logo dla Lightbox’a v2.0. Nie jestem specjalistą od CSS i JS/DOM, ale rozwiązanie, które zamierzam przedstawić działa(testowane tylko na Firefox 2.0.0.1 :P). Sam proces instalacji Lightboxa ominę, ze względu na fakt, że można znaleźć wiele informacji na ten temat przy pomocy google 🙂 Kiedy Lightbox już działa dokonajmy właściwej instalacji naszego loga 😉

Otwórzmy do edycji plik lightbox.js

Znajdźmy linię:

objOuterImageContainer.appendChild(objImageContainer);

i tuż za nią dodajmy:

objLogoImageContainer = document.createElement("div");
objLogoImageContainer.setAttribute('id','imageLogo');
objImageContainer.appendChild(objLogoImageContainer);

Następnie stwórzmy plik o nazwie lightbox.css który odpowiedzialny będzie za odpowiednie wyświetlanie naszego loga. Wstawimy do niego poniższy tekst:

#imageLogo {
    position: absolute;
    background: url(../images/some_image.png) no-repeat;
    width: 100px;
    height: 35px;
    border: 0px;
}

Ścieżka w „background: url” wskazuje nam miejsce gdzie będzie znajdować się nasze logo. Parametry width i height są odpowiednikami szerokości i wysokości naszego loga.

Na głównej stronie naszej witryny dodajmy jeszcze odpowiednie linki do naszego pliku CSS:

Na tym powinniśmy skończyć dodawanie loga. Sprawdźmy czy wszystko działa i czy nasze logo pojawia się w lewym górnym rogu naszego obrazka. W rezultacie cieszmy się wykonaną robotą 🙂