jQuery Lightbox 0.5

23 maja 2010, o 22:44 przez Patrycjusz Różański

sNews jest najlepszym cms na świecie. Jego możliwości są tak duże jak php sam w sobie.

Ale mimo, że możemy robić 1000 skryptów, najprostsze są najpiękniejsze

Z ważywszy na fakt iż jestem fanatykiem SEO polecam wam jQuery. A więc jQuery LightBox.

Ściągamy pliki instalacji z tej strony
Rozpakowujemy i umieszczamy pliki .js w folderze /snews_root/js/ a plik jquery.lightbox-0.5.css do /snews_root/css (choć polecam w kompilowanie jego zawartości do swojego pliku style.css)

W pliku głównym index.php umieszczamy następujący kod w sekcji <head>:

Kod:: <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script> <link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" />

przed </head> umieszczamy kod jQuery:

Kod:: <script type="text/javascript"> $(function() { $('#gallery a').lightBox(); }); </script> <style type="text/css"> /* jQuery lightBox plugin - Gallery style */ #gallery { background-color: #C0C0C0; padding: 10px; width: 520px; } #gallery ul { list-style: none; } #gallery ul li { display: inline; } #gallery ul img { border: 5px solid #3e3e3e; border-width: 5px 5px 20px; } #gallery ul a:hover img { border: 5px solid #fff; border-width: 5px 5px 20px; color: #fff; } #gallery ul a:hover { color: #fff; } </style>

i już gotowe. Teraz w treści jakiegoś artykułu umieszczamy id=gallery który będzie uruchamiał funkcje. Przykład: wszystkie zdjęcia w tym div będą wyświetlały funcję lightbox:

Kod:: <h3>Galeria</h3> <div id="gallery"> <a title="sample" href="images/sample.jpg"><img title="sample" src="images/tn/sample.jpg" alt="sample"></a> <a title="sample" href="images/sample.jpg"><img title="sample" src="images/tn/sample.jpg" alt="sample"></a> </div>

24 maja 2010, o 11:42 przez Paweł Landzberg

Ja używam do tego celu Slimboxa. Tak jakoś wypadło, ale tam trzeba do każdego pliku graficznego (a raczej odnośnika) dodać fragment powiadamiający, że grafikę należy wyświetlić przy pomocy Slimboxa. Tu widzę jest trochę lepiej - wystarczy w diva z odpowiednim id wpakować grafiki. Generalnie jest to lepsze, jeśli na stronie masz przykładowo masę fotek - w jednym miejscu tylko oznaczasz, że należy uruchomić lightboxa.

19 wrz 2010, o 10:45 przez xaoc

A czy jest opcja aby któryś z tych programów sam sobie tworzył miniaturkę?
Albo jest coś o czym nie wiem. :p

A i mam pytanie: mianowicie jeśli dodam opcję width i height, to najpierw przeglądarka pobierze cały obraz a potem go pomniejszy?
Bo jeśli tak to mija się to z celem.

19 wrz 2010, o 23:39 przez Patrycjusz Różański

Witaj

ad1. To nie są do końca zewnętrzne programy to proste skrypty jQuery które tylko wyświetlają to co się im każe nie robią miniaturek ani nie prowadza działań na zdjęciach a jedynie na przeglądarce
ad2. Jak na zdjęciu (średnio) 640x480 dasz w miniaturce 200x130 to i tak pobiera całe zdjęcie bo jest tylko jedno

Proste rozwiązanie
Utwórz folder "galeria"
w nim zrób "nazwa_1"
w nim zrób "tn" i "lg"
na win używając prostych i darmowych narzędzi do masowego zmieniania rozmiarów zrób z oryginalnego np. 4000x3400 zrób 640x480 i daj te pliki do folderu "LG" a następnie zdjęcia oryginalne zmieniamy na pożądany rozmiar miniaturki np. 200x130 i dajemy do folderu "tn" i postępujemy dalej jak wyjaśniono w pierwszym poście

masz prostą galerie z pełną kontrolą.

Ja jeszcze daje znaki wodne i zrobienie 10 galeri z 12 zdjęciami każde (czyli 240 fotek) zmieniam średnio w 20 min

a potem przez 30-40 min dodaje do strony kod galeri i już... ;D

20 wrz 2010, o 13:18 przez Paweł Landzberg

Dokładnie. Miniaturki musisz sobie sam potworzyć i wstawić na stronkę.

jQuery Lightbox 0.5

jQuery Lightbox 0.5

Slimbox a lightbox

Re: jQuery Lightbox 0.5

Re: jQuery Lightbox 0.5

Miniaturki

Kto przegląda forum