Lightbox bez użycia linków, rel i title

We wszyst­kich swoich projek­tach WWW mają­cych mieć wodo­try­ski zapewne używa­cie jakichś biblio­tek Java­scrip­to­wych. Ja używam jQuery. Do wywo­ła­nia efektu powięk­sza­ją­cego się obrazka na przy­ciem­nio­nym tle przy­jął się powszech­nie skrypt Light­box. Korzy­sta niestety z biblio­tek Proto­type i Scrip­ta­cu­lous. W efek­cie stwo­rze­nie kilku prostych efek­tów + efekt light­box gene­ro­wał potrzebę pobra­nia przez użyt­kow­nika trzech sporych biblio­tek ze skryp­tami JS.

Dzisiaj chcia­łem zare­kla­mo­wać skrypt, który używa wyłącz­nie jQuery przy tworze­niu light­boksa. Zwie się jQuery light­Box plugin. Sama instruk­cja użycia jest dosyć prosta i nie będę o niej pisał. Zamiast tego napi­szę jak zrobić żeby nie trzeba było otaczać obraz­ków linkami, chociażby po to, że nie chcemy oficjal­nie chwa­lić się adre­sami url do dużych obraz­ków. Opis do ramki weźmiemy z atry­butu alt="", czyli osta­tecz­nie nie musimy doko­ny­wać żadnych zmian w kodzie HTML strony.

Stan­dar­dowe przy­go­to­wa­nie kodu HTML wygląda tak: <a href="duzy_obrazek.jpg" rel="lightbox" title="Tytuł obrazka" ><img src="maly_obrazek.jpg"></a<. Wyżej wymie­nioną przeze mnie biblio­tekę da się w miarę łatwo zmusić do współ­pracy z samymi elemen­tami <img>, a samo wywo­ła­nie light­boksa może robić się auto­ma­gicz­nie na podsta­wie rodzica <div> otacza­ją­cego obrazki. Potrzeba tylko kilku prze­ró­bek kodu biblioteki.

Bierzemy na warsz­tat plik jquery.lightbox-0.5.js. Inte­re­sują nas okolice 77 linijki kodu (lub 15 w wersji zminia­tu­ry­zo­wa­nej pliku), a dokład­niej trzy miej­sca zaczy­na­jące się od objClicked.getAttribute('href'). Zamie­niamy je na objClicked.getAttribute('src').replace("small", "big"), czyli frag­ment orygi­nal­nego linka do zdję­cia w locie zamie­niany jest z small na big. Jeżeli chcemy żeby opis fotek brany był z atry­butu alt="", to musimy dodat­kowo zamie­nić w dwóch miej­scach objClicked.getAttribute('title') na objClicked.getAttribute('alt').

Zakła­damy oczy­wi­ście, że pliki z małymi obraz­kami trzy­mamy w kata­logu images/small/obrazek.jpg, a duże obrazki z taką samą nazwą jak małe mamy w kata­logu images/big/obrazek.jpg.

Taką biblio­tekę trzeba jesz­cze wystar­to­wać, czyli podać jej jakie obrazki powinny być powięk­szane. W sekcji <head> doda­jemy sobie taki skrypt:

$(document).ready(function() {
    $('div.ramkanazdjecia > img').lightBox();
});

Cała zawar­tość „obraz­kowa” <div class="ramkanazdjecia"> stanie się lightboksowa.

Podobne wpisy:

  1. Pierw­szy projekt WWW zrealizowany :-)
  2. Wygrze­bane z GitHuba (2) : Imagine
  3. MySQL, PDO i proce­dury składowane
  4. Po prze­no­si­nach na WP 2.5…

3 Comments

  • 23 marca 2011 - 08:45 | Permalink

    Ułatwie­nie fajne, ale nie podoba mi się mody­fi­ka­cja orygi­nal­nej biblio­teki. Tak samo, jak w PHP — jak chcesz zmie­nić funk­cjo­nal­ność czyjeś biblio­teki, to zazwy­czaj dzie­dzi­czysz, a nie mody­fi­ku­jesz główny kod.

    Moim zdaniem lepszym rozwią­za­niem będzie napi­sa­nie własnego pluginu, który np. na DOMRe­ady dyna­micz­nie „opakuje” wska­zane przez Ciebie elementy znacz­ni­kami wyma­ga­nymi przez Light­boxa. Ideal­nie nadaje się do tego metoda wrap() z funk­cją anoni­mową jako para­me­trem.
    A przy wyko­rzy­sta­niu chainingu możesz to zrobić naprawdę ładnie:

    $('.section img').myWrapper().lightbox();
    

    W sumie, wydaje mi się, że funk­cja opako­wu­jąca byłaby tak prosta, że nawet nie musiał­byś pisać kilku­li­nij­ko­wego pluginu — tylko podmie­nić powyż­sze „myWrap­per” na wrap(function() {//…/}).

  • Śpiechu
    25 marca 2011 - 01:52 | Permalink

    @singles
    wrap() dobry pomysł. Mnie raczej chodziło o lekkie zmyle­nie kogoś chcą­cego dobrać się do linków (nie będzie szukał zmian w orygi­nal­nej biblio­tece). Wrapem daję mu wszystko na tacy jaki element w jaki jest transformowany.

  • 25 marca 2011 - 09:01 | Permalink

    @spiechu — a — tego nie napi­sa­łeś, że chcesz ukry­wać. Ale jak komuś zależy, to i tak znaj­dzie co to go inte­re­suje :) Nawet jeśli zamiast mody­fi­ka­cji biblio­teki zrobisz własny kod na bazie map(), a nie wrap(), i prze­pu­ścisz go przez jakiś obsfucator ;)

  • Dodaj komentarz

    Twój adres e-mail nie zostanie opublikowany.

    Możesz użyć następujących tagów oraz atrybutów HTML-a: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <p> <pre lang="" line="" escaped=""> <q cite=""> <strike> <strong>