Lytebox
Stronę można urozmaicić na różne sposoby. Jednym z takich sposobów jest wstawienie dodatku (Lightbox) powodującego wyświetlenie dużych zdjęć pośrodku ekranu na tej samej stronie gdzie wstawione są miniatury. Dodatek tak spodobał się ludziom, że pojawiło się sporo (50+) podobnych rozwiązań. Niektóre wymagają osadzenia na stronie jQuery lub Mootools, inne są kombajnami, które potrafią wyświetlać filmiki flashowe albo pobierać dane poprzez AJAXa.
Jednym z najprostszych „boksów” jest Lytebox, który składa się z dwóch głównych plików (js i css) oraz kilku dodatkowych obrazków (przejście pomiędzy obrazkami, zamknięcie okienka, animacja wczytywania). Osadzenie go na stronie wymaga wykonania dwóch czynności. W nagłówku strony, w sekcji mieszczącej się pomiędzy znacznikami <head></head> należy umieścić wpis:
<script type="text/javascript" language="javascript" src="lytebox.js"></script> <link rel="stylesheet" href="lytebox.css" type="text/css" media="screen" />
(należy zwrócić uwagę na ścieżki). W głównej części strony pozostaje jedynie podpięcie się do odpowiednich obrazków. Powiedzmy, że na stronie mamy zapis:
<a href=”pełnowymiarowy_obrazek” title=”jakiś_opis”><img src=”miniatura” alt=”” /></a>
Zmieniamy go dodając rel do linka:
<a href=”pełnowymiarowy_obrazek” title=”jakiś_opis” rel=”lytebox”><img src=”miniatura” alt=”” /></a>
Po przeładowaniu strony kliknięcie na link spowoduje wyświetlenie boksa zawierającego pełnowymiarowy obrazek*.
Dodatkowo lytebox pozwala grupować obrazki do pokazu ręcznego: lytebox[nazwa_grupy] oraz automatycznego: lyteshow[nazwa_grupy].
Listę zawierającą klony Lightboxa znaleźć można pod adresem: http://planetozh.com/projects/lightbox-clones/.
* pełnowymiarowy obrazek może zostać przeskalowany tak, aby zmieścił się na ekranie (wliczając ramki Lyteboxa, tytuł oraz guzik zamykania)
Właśnie jestem w trakcie testowania i dostosowywania tego skrypciku pod swoje potrzeby i w związku z tym mam pytanie: który parametr odpowiada za położenie całego okna ze zdjęciem, chciałbym aby wyświetlało się ciut wyżej. Gdzie szukać? Mógłby mi ktoś podpowiedzieć?
lytebox.js (około linii 270):
var object = this.doc.getElementById(’lbMain’);
object.style.top = (this.getPageScroll() + (pageSize[3] / 15)) + „px”;
(zaznaczony fragment)
Bardzo dziękuję, działa 🙂
P.s. Gratuluję strony, bardzo pomocna.
Witam,
Staram się – korzystając z lyteboxa – zbudować galerię na stronie złożonej z ramek. Niestety nijak nie jestem w stanie dojść do tego, jak zmodyfikować kod strony, by okienko lyteboxa otwierało się ponad wszystkimi ramkami ( w tej chwili otwiera się jedynie w ramce, gdzie umieszczona jest galeria).
Czy mogę prosić o jakieś wskazówki?
Spróbuj osadzić Lyteboxa w ramce zawierającej zdjęcia (i tylko w tej jednej ramce), css od lyteboxa w ramce i na stronie rodzicielskiej. Jeśli nie zadziała, albo ramek ze zdjęciami jest więcej, to warto rozważyć przebudowę strony.
Witam ponownie,
Próbowałem już sposobów znalezionych na różnych forach. Podaję adres strony, żeby mógł Pan zobaczyć o co mi chodzi.
Po otwarciu galerii i wybraniu którejś z 3, zdjęcia otwierają się w tej dolnej ramce, zamiast na całym ekranie.
Zamiast frameseta iframe. Chociaż zdecydowanie lepszym rozwiązaniem byłoby zrobienie strony bez użycia jakichkolwiek ramek.
WItam , mam do zrobienia banner inforamcyjny (jakiś poup) czyli po wejsciu na stronkę wyświetla mi się ten baner – to już mam, ale w tym banerze chce umieścić plik .swf, czy uda mi się to zrobić w Lyteboox, jeśli tak to czy moge prosić o jakieś wskazówki??
Albo iframe albo http://www.nickstakenburg.com/projects/lightview/