Skocz do zawartości
"Idzie nowe..." - o zmianach i nie tylko ×
Przeniesienie zakupów z IPS Marketplace / Moving bought items from IPS Marketplace ×

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


Rekomendowane odpowiedzi

Opublikowano

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ść *

Opublikowano

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.

Opublikowano
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ę.

"Przyjaciel zawsze powinien nie doceniać naszych zalet...

...wróg zawsze przeceniać nasze wady."

Don Vito Corleone

Dlaczego for, a nie forów? Nie daj się powielanym stereotypom.

† Będziemy bronić SB po kres naszych sił †

  • 2 tygodnie później...
Opublikowano (edytowane)

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: 2ijkfo6.png

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 przez TRACKER
  • 1 rok później...
Opublikowano

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.

Opublikowano

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).

Opublikowano

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ć...

  • Manager
Opublikowano

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. :)

intermedia - profesjonalne rozwiązania Invision Power Board

---

Chcesz uzyskać szybko i sprawnie pomoc? Uzupełnij wersję i adres w profilu.

  • 4 tygodnie później...
Opublikowano

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:

problem_lbx+chrome.jpg

Jeśli chcesz dodać odpowiedź, zaloguj się lub zarejestruj nowe konto

Jedynie zarejestrowani użytkownicy mogą komentować zawartość tej strony.

Zarejestruj nowe konto

Załóż nowe konto. To bardzo proste!

Zarejestruj się

Zaloguj się

Posiadasz już konto? Zaloguj się poniżej.

Zaloguj się
  • Ostatnio przeglądający   0 użytkowników

    • Brak zarejestrowanych użytkowników przeglądających tę stronę.
×
×
  • Dodaj nową pozycję...

Powiadomienie o plikach cookie

Umieściliśmy na Twoim urządzeniu pliki cookie, aby pomóc Ci usprawnić przeglądanie strony. Możesz dostosować ustawienia plików cookie, w przeciwnym wypadku zakładamy, że wyrażasz na to zgodę.