Lightbox 2 - nowy sposób na wyświetlania obrazków...

[TRACKER]

Witam, dzisiaj przedstawię jak w prosty sposób uzyskać ciekawy efekt wyświetlania obrazków tj. Lightbox 2 -

**DEMO ORAZ INFORMACJA

Demo można znaleźć np. tu: KLIK

Efekt Lightbox'a działa najlepiej na dużych obrazkach tj. powyżej 500 x 500 pixeli...

** INSTALACJA PLIKÓW ORAZ DODANIE ODPOWIEDNIEGO KODU W SKÓRCE

Należy pobrać i rozpakować w katalogu głównym strony / forum owe archiwum ; następnie przejść do: Admin CP > Look & Feel > Twoja skórka> Edit Board Header & Footer Wrapper, znaleźć:

<% JAVASCRIPT %>

oraz dodać następnie ten oto kod:

<script type="text/javascript" src="js/prototype.js"></script>
			<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
			<script type="text/javascript" src="js/lightbox.js"></script>
			<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

** DODANIE TAGU BBCODE

Przejdź do: Admin CP > Management > Custom BBcode > Add New BBcode, następnie wypełnij wszystkie pola w ten sposób:

Custom BBCode Title: lightbox
Custom BBCode Description: Dodaj obrazek w efektownym wyświetlaniu.
Custom BBCode Example: [lightbox]Link do obrazka[/lightbox]
Custom BBCode Tag: lightbox
Use Option in tag?: No
Switch option around?: No
Custom BBCode Replacement: <a href="{content}" rel="lightbox[roadtrip]"><img src="{content}" border="0" width="500" height="500"/></a>

* W ostatniej linijce możesz dopasować rozmiar wyświetlanej miniatury - width - szerokość ; height - wysokość *

[kris2005a]

A może podałbyś co to za mod, który trzeba zainstalować by wykorzystać ten tutorial!

[DawPi]

A może byś doczytał wszystko i zrozumiał, że wszystko jest podane?

[kris2005a]

Mój błąd. Sorki

[kris2005a]

A czy istnieje możliwość ustawienia tutaj optymalnej wielkości dla obrazka? Tak aby Obrazek mały za dużo się nie powiększył a duży był ładnie wyglądał gdy się pomniejszy.

[TRACKER]

Szczerze, to nie próbowałem, pobaw się w plikach lightboxa i zobacz... mnie to nie potrzebne, więc bawić się nie będę...

Pozdrawiam.

[godfather]

A czy istnieje możliwość ustawienia tutaj optymalnej wielkości dla obrazka? Tak aby Obrazek mały za dużo się nie powiększył a duży był ładnie wyglądał gdy się pomniejszy.

Pewny nie jestem, ale pewnie zamiast pikseli wpisujesz procentową wartość. Inaczej tego nie widzę.

[TRACKER]

Witam, proszę oto inna wersja, do wyświetlania z Lightboxie ;-) (działa dopiero od momentu zmian w ACP, na nowy kod)

Każdy używa modyfikacji Lightbox'a na własne ryzyko, jednocześnie gwarantuję że ta 1 wersja działa sprawnie na 100 %, ta nowa działa na 80 % !!

Lightbox v.2 Testowa !!!! - Efektowny styl wyświetlania obrazków, na Twoim forum by: ~TRACKER

Custom BBCode Title: lightbox
Custom BBCode Description: Dodaj obrazek w efektownym wyświetlaniu.
Custom BBCode Example: [lightbox]Link do obrazka[/lightbox]
Custom BBCode Tag: lightbox
Use Option in tag?: No
Switch option around?: No
Custom BBCode Replacement: <p><strong>###Kliknij tutaj, aby powiększyć obrazek###</strong><br><br>

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

<a href="{content}" rel="lightbox" title="{content}"><img src="{content}" width="45%" height="45%"/></a>

</p>

Screen:

Jest możliwość również taka, że nie będzie ramki (tej siwej xD)*, oraz napisu "Kliknij tutaj, aby powiększyć obrazek"

Aby to zrobić uzupełnij nowe pole (/ lub nadpisz istniejące/) z BBCode w ten oto sposób:

Custom BBCode Title: lightbox
Custom BBCode Description: Dodaj obrazek w efektownym wyświetlaniu.
Custom BBCode Example: [lightbox]Link do obrazka[/lightbox]
Custom BBCode Tag: lightbox
Use Option in tag?: No
Switch option around?: No
Custom BBCode Replacement: 
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

<a href="{content}" rel="lightbox" title="{content}"><img src="{content}" width="45%" height="45%"/></a>

Screena nie ma, ale niczym się nie różni, oprócz tego, że nie ma ramki i wspomnianego wcześniej napisu

*OT::: Sorki, że walnąłem to "Copyright" ale chyba wam nie przeszkadza? Acha... nie będzie i jej, po prostu walnąłem to coś tylko do screena ;-) :::

Uwaga! Testowałem LBoxa teraz troszkę dłużej i są niekiedy problemy(dlatego to wersja testowała [beta]), nie wiem niestety co jest przyczyną, ponieważ kod jest Ok... lepiej jednak pobrać najnowszą wersję Lightbox 2, powinna naprawić wszelkie problemy: http://www.huddletogether.com/projects/lightbox2/#download

Edytowane 14 Grudnia 2008 przez TRACKER

[Kaluza]

Witam,

Zamiast pikseli wstawiłem procenty, ale obrazki albo się nie pojawiają, albo są prawdziwych rozmiarów. Próbowałem ustawić 10%, 30%, 80% i nic.

[DawPi]

Witaj,

pokaż kod, jaki wstawiałeś.

[Kaluza]

<a href="{content}" rel="lightbox[roadtrip]"><img src="{content}" border="0" width="50%" height="50%"/></a>

[DawPi]

Dlaczego próbujesz ustawiać z %, a nie z pikselami?

[Kaluza]

Bo z pikselami kijowo mi pomniejsza. A chcę żeby był obrazek pomniejszony o 25% - np.

Po prostu że robi się miniaturka (taka sama nie zależnie od wielkości obrazka).

[TRACKER]

Ja mam u Siebie taki oto kod:

<a href="{content}" rel="lightbox[roadtrip]"><img src="{content}" border="0" width="50%" height="50%"/></a>

i wszystko jest poprawnie pokazywane... wysłałeś wszystkie pliki na serwer w odpowiednie miejsce itp itd? Musi działać...

[Jediet]

Nie wgrany jest tylko plik index.html ponieważ całe forum wtedy się wyłączało ale tak to wszystkie pliki są wgrane próbowałem tym sposobem dalej nie działa

[DawPi]

Skoro nie działa to nie zadziała, bo kod nie jest dobry, tak sądzę.

Nie psuje się forum po wgraniu index.html tylko ten plik jest domyślnie ładowany na większości serwerów, jako pierwszy. Najpierw index.html, potem index.php. Można to oczywiście zmienić, ale nie o tym mowa.

Podałem Ci link do działającej modyfikacji - skorzystaj z niej, jeśli koniecznie tego potrzebujesz.

[Jediet]

Tak masz rację przejęzyczyłem się nie psuje się tylko ładuje się index.html sory za błąd a mam pytanie czy za tą modyfikację trzeba płacić ?

[DawPi]

Którą?

[Jediet]

Do tej do której podałeś link

[DawPi]

Do tej do której podałeś link

Nie pomyliłeś sobie tematów?

[Jediet]

Możliwe ale jeżeli tak to sory

[DawPi]

Nic się nie dzieje. Wystarczy przejrzeć temat.

[abarthi]

Witam,

a mój problem polega na tym, ze wyświetlany duzy obrazek jest znacznie poniżej góry strony (dolna granica paska adresu) i za żadne skarby nie mogę do "podnieść" do góry. Ponadto problem występuję jedynie w przegladarce Chrome3.0. Czy mogłbyś mi pomóc, Tracker?

LBX jest osadzony w kodzie HTML.

Poniżej screen:

[DawPi]

To w tle to na pewno IP.Board?

[abarthi]

To w tle to na pewno IP.Board?

Yy, IP Board? To czysty HTML, jeśli o to pytasz.

Edytowane 13 Stycznia 2010 przez abarthi