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ą 🙂
Ha, a ja to chciałbym przepis jak to zrobić w ThickBoksie 🙂
@floorek: nie bawiłem sie ThickBoxem jeszcze 😉 ale jeśli będziesz miał trochę cierpliwości pewnie coś wykombinuję 🙂
Jak wstawić animację *.swf do galerii Lightbox? Mam wrażenie, że się nie da. Nie mam juz siły szukać.
http://subiektyw.blox.pl/2007/08/LightBox-ThickBox-GreyBox-i-LyteBox-overlay-na-WWW.html