Witam
Tworzę sobie stronkę www i natrafiłam na moment, w którym chcę wstawić miniaturkę zdjęcia a po jej kliknięciu ma wyświetlać się estetycznie powiększone zdjęcie w formie jakby alertu. Przeszukując googlarkę znalazłam informację o Lightbox2. http://lokeshdhakar.com/projects/lightbox2/
Faktycznie pokazane tam efekty są dokładnie tym czego szukałam. Niestety mam problem z prawidłową implementacją tego.
Po ściągnięciu i rozpakowaniu dostaję 3 istotne foldery z plikami. CSS, w którym jest plik lightbox.css z ustawieniami. Folder images z potrzebnymi obrazami i animacjami do wyświetlania obrazków. Oraz folder js, w którym są pliki:
.DS_Store
builder.js
effects.js
lightbox-web.js
prototype.js
scriptaculous.js
Na podanej przeze mnie stronie jest napisane jak powinno się zaimplementować to wszystko. Cóż więc robię:
Pliki z folderu js wklejam do głównego folderu, w którym znajduje się plik index.html Dzięki temu mam bezpośredni dostęp. Do głównego folderu kopiuję cały folder images, więc dostęp do tych obrazów jest przez src=“images/plik.jpg” (przykładowo). Plik stylów css kopiuję bezposrednio do głównego folderu. Następnie:
Podane cztery kody:
wstawiam między znaczniki Zaglądam wg poradnika do pliku css i nie widzę bym musiała zmieniać tam jakąś ścieżkę dostępu ponieważ skopiowałam cały folder images więc ścieżka dostępu do prev.gif i next.gif pozostaje bez zmian czyli:
#prevLink:hover, #prevLink:visited:hover { background: url('images/prevlabel.gif') left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url('images/nextlabel.gif) right 15% no-repeat; }
Teoretycznie wg mnie zrobiłam wszystko poprawnie. Niestety wynik mojego działania nie jest taki jak pokazane na stronie przykłady ślicznego wyświetlania się na szarym, półprzezroczystym tle powiększonych obrazków, tylko po kliknięciu miniaturki otwiera mi się zupełnie nowa strona w przeglądarce (firefox) i w lewym górnym rogu, na białym tle jest wyświetlone powiększone zdjęcie, czyli druga grafika. Kod jaki wstawiam już w divie przy próbie wyświetlania:
[/code]
Jak widać obrazy wyświetlane są w osobnym folderze graphics, a miniaturka nie jest tworzona jako osobny obrazek tylko ten sam pomniejszony parametrami width i height (dzięki temu na stronę wgrywam mniej grafiki).
Grafika po kliknięciu w miniaturkę zamiast wyświetlać się w postaci animacji na tej samej stronie, do zamknięcia potem iksem, otwiera się na pustej nowej białej stronie.
Gdzie popełniam błąd, lub czego jeszcze nie zrobiłam, że otrzymuję taki efekt?
