 |
| rys.1 |
Aktualnie można już używać Lightboxa wbudowanego w Blogera.
Sprawdź jak to zrobić czytając tego posta.
Ale jak? wiec zabieramy się do roboty... Na początku zaglądamy na stronę dynamicdrive.com skąd pobierzemy pakiet lightbox v2.03a rozpakowujemy go i zamieszczamy na dowolnym serwerze FTP - jeśli ktoś niema może skorzystać z mojego ale nie gwarantuje że pliki będą tam wiecznie leżeć :P
Tak więc po publikacji gdzieś na ftp-ie naszych plików dołączamy stosowne wpisy do kodu HTML szablonu
- w dniu dzisiejszym [ 25-02-2011 ] raczej to niemożliwe bo Blogger ma właśnie awarię edytora ;)
wracając do tematu HTML w kodzie wyszukujemy więc <head> i zaraz poniżej tuż po znacznikach <mata tagów dodajemy poniższy wpis [rys.1] odpowiednio zmodyfikowany gdy korzystamy z własnego FTP:
<script src='http://stani_c1.republika.pl/GGadget/prototype.js' type='text/javascript'/>
<script src='http://stani_c1.republika.pl/GGadget/lightbox.js' type='text/javascript'/>
<script src='http://stani_c1.republika.pl/GGadget/scriptaculous.js?load=effects' type='text/javascript'/>
<link href='http://stani_c1.republika.pl/GGadget/mlightbox.css' media='screen' rel='stylesheet' type='text/css'/>
<script src='http://stani_c1.republika.pl/GGadget/lightbox.js' type='text/javascript'/>
<script src='http://stani_c1.republika.pl/GGadget/scriptaculous.js?load=effects' type='text/javascript'/>
<link href='http://stani_c1.republika.pl/GGadget/mlightbox.css' media='screen' rel='stylesheet' type='text/css'/>
Zapisujemy nowe zmiany i przechodzimy do edycji HTML postów - teraz najlepsze wszystkich po kolei przynajmniej tych ze zdjęciami :) jak podaje nam autor skryptu do poprawnego działania potrzebne są odpowiednie tagi w kodzie HTML posta lub strony i teraz musimy je dodać tam gdzie Lightbox ma działać, ręcznie poprzez edycję kodu HTML grafiki zamieszczonej w poscie. Czyli czeka nas kawał ciężkiej roboty ;)
Np. nasz obrazek wyżej i jego kod HTML: przyjrzyjmy się mu z bliska i w kolorze :)
<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: right; margin-left: 1em; text-align: right;"><tbody>
<tr><td style="text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0R216WNAEmJdN3S8u2G3g7MrsDWVDuJ1OB6tPwGb0EnoAC9EYAw2SvVXjFqc2aNsbwINTqLsGPUTpeOSkHZotCYTSRr45PoI7oeS3y4sedDnh_HOTY0W6-kwsAhecIpY05wT5qoGz9kyL/s1600/lightbox_add_link.png" imageanchor="1" style="clear: right; margin-bottom: 1em; margin-left: auto; margin-right: auto;">
<img border="0" height="130" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0R216WNAEmJdN3S8u2G3g7MrsDWVDuJ1OB6tPwGb0EnoAC9EYAw2SvVXjFqc2aNsbwINTqLsGPUTpeOSkHZotCYTSRr45PoI7oeS3y4sedDnh_HOTY0W6-kwsAhecIpY05wT5qoGz9kyL/s200/lightbox_add_link.png" width="200" />
</a>
</td></tr>
<tr><td class="tr-caption" style="text-align: center;">rys.1</td></tr>
</tbody></table>
<tr><td style="text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0R216WNAEmJdN3S8u2G3g7MrsDWVDuJ1OB6tPwGb0EnoAC9EYAw2SvVXjFqc2aNsbwINTqLsGPUTpeOSkHZotCYTSRr45PoI7oeS3y4sedDnh_HOTY0W6-kwsAhecIpY05wT5qoGz9kyL/s1600/lightbox_add_link.png" imageanchor="1" style="clear: right; margin-bottom: 1em; margin-left: auto; margin-right: auto;">
<img border="0" height="130" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0R216WNAEmJdN3S8u2G3g7MrsDWVDuJ1OB6tPwGb0EnoAC9EYAw2SvVXjFqc2aNsbwINTqLsGPUTpeOSkHZotCYTSRr45PoI7oeS3y4sedDnh_HOTY0W6-kwsAhecIpY05wT5qoGz9kyL/s200/lightbox_add_link.png" width="200" />
</a>
</td></tr>
<tr><td class="tr-caption" style="text-align: center;">rys.1</td></tr>
</tbody></table>
Podobnie jak podałem w tym poście nasz kod składa się z kilku elementów celowo nieco inaczej, by nie powielać informacji, bo w tym przypadku nasza grafika ma podpis.
kolor czerwony to opis stylu i gdzie ma być umieszczony nasz obrazek względem tekstu oraz podpis
kolor zielony to nic innego jak nasz znajomy adres do pliku graficznego oraz
kolor niebieski czyli obrazek wyświetlanej miniatury.
do poprawnego działania Lightbox'a musimy dopisać co najmniej jeden tag: rel="lightbox" do adresu wyświetlanego pliku. tak więc po edycji nasz kod powinien wyglądać tak:
<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: right; margin-left: 1em; text-align: right;"><tbody>
<tr><td style="text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0R216WNAEmJdN3S8u2G3g7MrsDWVDuJ1OB6tPwGb0EnoAC9EYAw2SvVXjFqc2aNsbwINTqLsGPUTpeOSkHZotCYTSRr45PoI7oeS3y4sedDnh_HOTY0W6-kwsAhecIpY05wT5qoGz9kyL/s1024/lightbox_add_link.png" imageanchor="1" style="clear: right; margin-bottom: 1em; margin-left: auto; margin-right: auto;" rel="lightbox" >
<img border="0" height="130" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0R216WNAEmJdN3S8u2G3g7MrsDWVDuJ1OB6tPwGb0EnoAC9EYAw2SvVXjFqc2aNsbwINTqLsGPUTpeOSkHZotCYTSRr45PoI7oeS3y4sedDnh_HOTY0W6-kwsAhecIpY05wT5qoGz9kyL/s200/lightbox_add_link.png" width="200" />
</a>
</td></tr>
<tr><td class="tr-caption" style="text-align: center;">rys.1</td></tr>
</tbody></table>
<tr><td style="text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0R216WNAEmJdN3S8u2G3g7MrsDWVDuJ1OB6tPwGb0EnoAC9EYAw2SvVXjFqc2aNsbwINTqLsGPUTpeOSkHZotCYTSRr45PoI7oeS3y4sedDnh_HOTY0W6-kwsAhecIpY05wT5qoGz9kyL/s1024/lightbox_add_link.png" imageanchor="1" style="clear: right; margin-bottom: 1em; margin-left: auto; margin-right: auto;" rel="lightbox" >
<img border="0" height="130" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0R216WNAEmJdN3S8u2G3g7MrsDWVDuJ1OB6tPwGb0EnoAC9EYAw2SvVXjFqc2aNsbwINTqLsGPUTpeOSkHZotCYTSRr45PoI7oeS3y4sedDnh_HOTY0W6-kwsAhecIpY05wT5qoGz9kyL/s200/lightbox_add_link.png" width="200" />
</a>
</td></tr>
<tr><td class="tr-caption" style="text-align: center;">rys.1</td></tr>
</tbody></table>
Aby nasze zdjęcie w lightbox-ie wyglądało ładnie musimy ustalić jego wielkość - fotki o rozmiarach większych niż przeciętny format ekranu nie są widoczne w całości.
Wzorując się na tym opisie ustawiamy odp wielkość zdjęcia najlepiej mniejszą lub równą 1024
 |
| rys.2 |
To nie wszystkie opcje możliwe do wprowadzenia w Lightbox'ie, zmieniając tag rel="" możemy utworzyć album - rel="lightbox[identyfikator_albumu]" tak oznaczone kilka zdjęć zostanie zgrupowane z sobą i będzie możliwe nawigowanie pomiędzy nimi. Jako identyfikatora albumu możemy użyć nawet jednego dowolnego znaku np rel="lightbox[a]"
Nasz album może zawierać jedną tylko miniaturkę lub nawet sam odsyłacz, a wszystkie pozostałe zdjęcia z takim samym identyfikatorem zostaną dodane automatycznie.
Przykład:link do albumu graficznego lub miniatura [rys.2]
użyte kody - odsyłacz z miniaturką graficzną:
<a href="https://lh6.googleusercontent.com/_J3fBybyMMVM/SkfXrZ41iQI/AAAAAAAAKzo/4lzAC0e0JAs/s800/DSC_0504.JPG" rel="lightbox[cx]" title="kwiatek 1"><img src="https://lh6.googleusercontent.com/_J3fBybyMMVM/SkfXrZ41iQI/AAAAAAAAKzo/4lzAC0e0JAs/s144/DSC_0504.JPG" border="0" width="144"></a>
lub odsyłacz tekstowy
<a href="https://lh3.googleusercontent.com/_XhQKNKvJQaM/Sh59mRSr5uI/AAAAAAAAArw/CReqxjbGjoQ/s800/IMG_0050.JPG" rel="lightbox[cx]" title="kwiatek 6"/>link do albumu</a>
pozostałe zdjęcia w tej samej galerii:
<a href="https://lh5.googleusercontent.com/_J3fBybyMMVM/Sk9SQMLlpwI/AAAAAAAALRA/NW5m2R2ADoQ/s800/DSC_0029.JPG" rel="lightbox[cx]" title="kwiatek 2"/></a>
<a href="https://lh6.googleusercontent.com/_J3fBybyMMVM/Sk9Su7tff3I/AAAAAAAALRg/Qw0MIlk5MFg/s800/DSC_0071.JPG" rel="lightbox[cx]" title="kwiatek 3"/></a>
<a href="https://lh6.googleusercontent.com/_qeSDNRYIxeE/SAURFTgH9OI/AAAAAAAABrg/HbBt2Cm86Nw/s800/IMG_1429.JPG" rel="lightbox[cx]" title="kwiatek 4"/></a>
<a href="https://lh4.googleusercontent.com/_KS4K8GXIWhU/SD5QPNWBZaI/AAAAAAAADmk/elZcsn3fp4Y/s800/IMG_1874.JPG" rel="lightbox[cx]" title="kwiatek 5"/></a>
<a href="https://lh3.googleusercontent.com/_XhQKNKvJQaM/Sh59mRSr5uI/AAAAAAAAArw/CReqxjbGjoQ/s800/IMG_0050.JPG" rel="lightbox[cx]" title="kwiatek 6"/></a>
<a href="https://lh6.googleusercontent.com/_J3fBybyMMVM/Sk9Su7tff3I/AAAAAAAALRg/Qw0MIlk5MFg/s800/DSC_0071.JPG" rel="lightbox[cx]" title="kwiatek 3"/></a>
<a href="https://lh6.googleusercontent.com/_qeSDNRYIxeE/SAURFTgH9OI/AAAAAAAABrg/HbBt2Cm86Nw/s800/IMG_1429.JPG" rel="lightbox[cx]" title="kwiatek 4"/></a>
<a href="https://lh4.googleusercontent.com/_KS4K8GXIWhU/SD5QPNWBZaI/AAAAAAAADmk/elZcsn3fp4Y/s800/IMG_1874.JPG" rel="lightbox[cx]" title="kwiatek 5"/></a>
<a href="https://lh3.googleusercontent.com/_XhQKNKvJQaM/Sh59mRSr5uI/AAAAAAAAArw/CReqxjbGjoQ/s800/IMG_0050.JPG" rel="lightbox[cx]" title="kwiatek 6"/></a>
Skąd wziąć ten kod HTML - wyślij wszystkie zdjęcia do postu a następnie oczyść kod ze zbędnych śmieci pozostawiając tylko to co potrzebujesz - doklej oczywiście tagi Lightbox'a
W poście możesz mieć kilka takich galerii wystarczy każdej nadać unikatowy identyfikator.
Pamiętaj że na stronie głównej wszystkie posty są zgrupowane więc i Lightbox pogrupuje zdjęcia - używanie takich samych identyfikatorów w postach spowoduje połączenie wszystkich zdjęć w jedna całość - aby tego uniknąć staraj się w każdym poście używać unikalnego identyfikatora. Przykład i przykład grupowania
Kolejną opcją jaką możemy dodać analogicznie do kodu grafiki to title="opis zdjęcia" czyli nic innego jak podpis do naszej grafiki. Dodajemy go analogicznie jak tag rel co ładnie widać powyżej, aby uprościć sobie to zadanie - Blogger sam ustawi go we właściwym miejscu po zakończeniu edycji.
Nasze zdjęcie może też zawierać odsyłacz do dowolnej strony lub wersji oryginalnej zdjęcia opisujemy go w tagu rev="http://nasz_adres_URL" np: rev="http://edytuj.blogspot.com/" lub podając ten z href będziemy mieć odsyłacz do zdjęcia.
Nasz kod więc będzie wyglądał np tak:
<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: right; margin-left: 1em; text-align: right;"><tbody>
<tr><td style="text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0R216WNAEmJdN3S8u2G3g7MrsDWVDuJ1OB6tPwGb0EnoAC9EYAw2SvVXjFqc2aNsbwINTqLsGPUTpeOSkHZotCYTSRr45PoI7oeS3y4sedDnh_HOTY0W6-kwsAhecIpY05wT5qoGz9kyL/s1024/lightbox_add_link.png" imageanchor="1" style="clear: right; margin-bottom: 1em; margin-left: auto; margin-right: auto;" rel="lightbox[a]" title="opis zdjęcia" rev="http://edytuj.blogspot.com/" >
<img border="0" height="130" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0R216WNAEmJdN3S8u2G3g7MrsDWVDuJ1OB6tPwGb0EnoAC9EYAw2SvVXjFqc2aNsbwINTqLsGPUTpeOSkHZotCYTSRr45PoI7oeS3y4sedDnh_HOTY0W6-kwsAhecIpY05wT5qoGz9kyL/s200/lightbox_add_link.png" width="200" />
</a>
</td></tr>
<tr><td class="tr-caption" style="text-align: center;">rys.1</td></tr>
</tbody></table>
<tr><td style="text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0R216WNAEmJdN3S8u2G3g7MrsDWVDuJ1OB6tPwGb0EnoAC9EYAw2SvVXjFqc2aNsbwINTqLsGPUTpeOSkHZotCYTSRr45PoI7oeS3y4sedDnh_HOTY0W6-kwsAhecIpY05wT5qoGz9kyL/s1024/lightbox_add_link.png" imageanchor="1" style="clear: right; margin-bottom: 1em; margin-left: auto; margin-right: auto;" rel="lightbox[a]" title="opis zdjęcia" rev="http://edytuj.blogspot.com/" >
<img border="0" height="130" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0R216WNAEmJdN3S8u2G3g7MrsDWVDuJ1OB6tPwGb0EnoAC9EYAw2SvVXjFqc2aNsbwINTqLsGPUTpeOSkHZotCYTSRr45PoI7oeS3y4sedDnh_HOTY0W6-kwsAhecIpY05wT5qoGz9kyL/s200/lightbox_add_link.png" width="200" />
</a>
</td></tr>
<tr><td class="tr-caption" style="text-align: center;">rys.1</td></tr>
</tbody></table>
Jak ułatwić sobie nieco pracę - jeśli dodajemy sporo grafiki i za każdym razem dopisujemy ww tagi. Jest na to proste rozwiązanie Szablon Posta - przechodzimy do zakładki Ustawienia - Formatowanie - i w polu szablonu posta wklejamy te wszystkie tagi - pojawią się one automatycznie podczas pisania nowego posta wystarczy je teraz wkleić w odp miejsce lub usunąć :)
Miejsce gdzie mają być wklejone dodatkowe tagi łatwo odnajdziesz wyszukując w kodzie HTML <img teraz wystarczy wkleić dodatkowe tagi przed znakiem >
PS. Lightbox zamieszczony na moim FTP nie wspiera tagu rev - jeśli chcesz mieć jego obsługę musisz upload-ować własne pliki .js pobrane z dynamicdrive.com na serwer FTP
Pozdrawiam...
Napisano już 4 komentarze/y. Dyskusja powoli się rozwija...
Już teraz przyłącz się do dyskusji i dodaj nowy komentarz
Podoba ci się modyfikacja sekcji komentarzy - opis znajdziesz tutaj: Tuning komentarzy
Super, że dodałeś informacje jak ustawić aby zdjęcia wyświetlały się tak jak na tym blogu. Tylko szkoda, że trwa ta awaria, a już bym sobie ustawił te wyświetlanie zdjęć ;]
Więc przy obecności setek zdjęć na blogu chyba lepiej tego zaniechać lub poczekać aż podobną dogodnościa obdarzy bloggera sam Google :)
a w pliku lightbox.ccs czegoś nie trzeba zmienić ?
Mam prośbę , gdzie w w lytebox wstawić takie coś jak na Twoim serwerze w lightbox wyświetlają się reklamy-
Tak wygląda plik lytebox.js
http://www.maly3city.yoyo.pl/lytebox.js
Prześlij komentarz
Zapraszam do komentowania i wyłapywania ew. błędów... Twoje IP: