nagradzam tutoriale

  • Zastosowanie jQuery lightBox plugin

    dodano 21.12.2007 / komentarzy: 11 / autor: agressiva

    Aby zaprezentować działanie JqueryLightbox posłuzymy się przykładową stroną.

    JqueryLightbox jest pluginem stosowanym do prezentacji obrazków w galeriach fotograficznych gdzie po kliknięciu na miniaturkę wyskakuje stylizowane okienko z pełnowymiarowym zdjęciem.
    Jest to jedna z wielu odmian istniejącego bardzo podobnego pluginu Lightbox, ale tym razem wykorzysujacą w swoim działaniu lekką bibliotekę programistyczną dla języka JavaScript ułatwiającą współdziałanie JavaScript oraz HTML - Jquery.

    Jak użyć?

    Aby na naszej stronie użyć tego pluginu na początku należy pobrać paczkę z całym mechanizmem ze strony autora.
    Kiedy już wszystko mamy na dysku, musimy ją rozpakować i zawartość dodać do katalogu głównego w którym jest nasza strona.

    Teraz w index w części musimy umieścić

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

    I to właściwie wystarcz do pełnego działania tego plugina.
    Nalezy uważać gdzie wrzuca się poszczególne pliki i katalogi ze ściągniętej paczki, aby dobrze podać ścieżki dostępu w wyżej podanych scriptach i link-relach.

    Dodatkowy plus

    Dzięki tej wtyczce jesteśmy w stanie nadać efekty lightboxa tylko wybranym elementom strony. Czyli nie wszystkie zdjęcia muszą się otwirać w taki sposób.
    Aby tak było należy albo w części albo w osobnym pliku js (dopisując w ) podać następujący skrypt:

    <script type="text/javascript">
      $(function() {
          $(‘#gallery a’).lightBox();
      });
      </script>

    Zamiast #gallery należy podac nazwę fragmentu strony (diva, tabeli, spana, linka) w którym efekt ten ma być stosowany.

    Efekt końcowy zobaczysz tutaj

    Uwaga - nowa wersja jQuery LightBox Plugin (0.5)

    Wraz z nowym formatem plików w części należy umieścić:

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

    Inne informacje na stronie: http://leandrovieira.com/projects/jquery/lightbox/

    Komentarze / dodaj komentarz


    • autor: jQuery Lightbox
      dodano: 18.01.2008

      [...] jQuery Lightbox to jeden z wielu modyfikowanych skryptów do bardziej oryginalnego prezentowania swoich prac graficznych niż okienka popup. Zasada działania jest bardzo podobna jak przy pozostałych wersjach, różni się tylko tym, że użyta jest tutaj biblioteka jQuery (lekka biblioteka programistyczna dla języka JavaScript, ułatwiająca współdziałanie JavaScript oraz HTML), dzieki której można uzyskać efektu zniekształcenia, przechodzenia płynnego z elementu do elementu i odczuc wrażenie jakby był to plik flashowy. Instalacja jest bardzo prosta, wszystko dokładnie opisane jest na stronie oficjalnej oraz na Vivee.info - http://vivee.info/2007/12/21/zastosowanie-jquery-lightbox-plugin/ [...]


    • autor: przyciemnianie szyb
      dodano: 14.08.2008

      własnie szukałem ligtboxa na jquery bo ten na mootools gryzł sięz moimi skryptami w jquery :/


    • autor: agressiva
      dodano: 14.08.2008

      Bo jak jedno to nie drugie :)


    • autor: Flacktub
      dodano: 28.08.2008

      Wiecie może gdzie gdzie się ten lightbox podział ?
      Nie mogę go znikąd pobrać :(


    • autor: palmiak
      dodano: 29.08.2008

      Już poprawione. Autor troszkę zmienił format linków.


    • autor: Skel
      dodano: 06.10.2008

      Witam,
      Chciałbym tylko zauważyc że wyszła już nowa wersja lightBoxa z tego też powodu jak ktoś ściąga ze strony autora paczkę trzeba by zmienic kod jaki wklejamy na stronę na taki z 0.5:

      wiem że się mądrze i wtrącam ale mnie to trochę krwi napsuło gdy chciałem zrobic szybko taką galerię ;) Pozdrawiam


    • autor: Skel
      dodano: 06.10.2008

      Witam,
      Chciałbym tylko zauważyc że wyszła już nowa wersja lightBoxa z tego też powodu jak ktoś ściąga ze strony autora paczkę trzeba by zmienic kod jaki wklejamy na stronę na taki z 0.5:

      script type=”text/javascript” src=”js/jquery.lightbox-0.5.pack.js”
      link rel=”stylesheet” type=”text/css” href=”css/jquery.lightbox-0.5.css”

      wiem że się mądrze i wtrącam ale mnie to trochę krwi napsuło gdy chciałem zrobic szybko taką galerię ;) Pozdrawiam


    • autor: agressiva
      dodano: 07.10.2008

      Milo, ze zauwazyłeś. W momencie pisania tego artykułu aktualna wersja byla wersja 0.4.
      Do artykułu została dodana informacja o wersji 0.5.


    • autor: Grzesiek
      dodano: 17.10.2008

      Ok ok wszystko ładnie pięknie, ale może to, dlatego że ja młody dziobak jestem i się uczę, ale cos mi nie gra, próbuję na razie oprzeć swoja zabawę na indexie, który jest zawarty w folderze, podaje ścieżki do zdjęć i jak odpalam index na komputerze wszystko ślicznie działa aż sie cieszą oczka, wysyłam index wraz ze wszystkimi plikami z paczki plus zdjęcia, których użyłem na serwer i? I koniec strona sie otwiera miniaturki sie pokazują, a jak kliknę to otwierają sie w nowym oknie… Proszę o jakąś pomoc…


    • autor: agressiva
      dodano: 18.10.2008

      Jak możesz to podaj adrs tej stronki testowej, abym mogłalooknąć na na wszystkie ścieżki dostępowe. Bo teraz trudno jest mi coś powiedzieć, a domyśły nie zawsze są celne.


    • autor: Grzesiek
      dodano: 18.10.2008

      http://www.kolczykiani.friko.pl/jquery-lightbox-0.5/index.htm - nie wiem jak to dalej ugryźć.. od kilku dni siedze i nic.. proszę o pomoc..

    Napisz komentarz