Galeria zdjęć javascript (jQuery) - rvnGallery 2.3

Pobierz i zainstaluj na swojej stronie skrypt galerii zdjęć rvnGallery, która przykuje uwagę do Twojej strony dzięki 42 unikalnym efektom. Skrypt nie korzysta z flash'a i działa również na starszych przeglądarkach. Pokaz slajdów na Twojej stronie sprawi, że stanie się ona bardziej atrakcyjna.

Ostatnia aktualizacja: .

25.03.2013
Od teraz możesz połączyć ten skrypt z lightboxem.

Spis treści

  1. Spis treści
  2. Przykładowa galeria
    1. Podgląd
    2. HTML
    3. CSS
    4. Javascript
  3. Dlaczego ten skrypt?
  4. Pobieranie
  5. Licencja
  6. Instalacja skryptu
  7. Kod HTML
  8. Kod CSS
  9. Kod javascript
  10. Parametry
  11. Efekty
  12. Dodatkowe funkcje
  13. Kompatybilność
  14. Przykłady zastosowania
  15. Lightbox
  16. Kontakt

Przykładowa galeria

Podgląd

HTML

<ul id="gallery" class="rvnGallery">
	<li>
		<img src="img/1.png" alt="pierwszy obrazek" />
		<p>Pierwszy obrazek.</p>
	</li>
	<li>
		<img src="img/2.png" alt="drugi obrazek" />
	</li>
	<li>
		<img src="img/3.png" alt="trzeci obrazek" />
		<p><strong>Pogrubiony podpis.</strong></p>
	</li>
	<li>
		<a href="http://rvn-gallery.krukowski.me"><img src="img/6.png" alt="czwarty obrazek" /></a>
		<p>Tutaj jest link do tej strony.</p>
	</li>
	<li>
		<img src="img/5.png" alt="piąty obrazek" />
	</li>
	<li>
		<img src="img/4.png" alt="szósty obrazek" />
		<p>Ostatni obrazek.</p>
	</li>
</ul>

CSS

#gallery {
	width: 400px;
	height: 300px;
	border: 4px solid silver;
}

Javascript

$(window).load(function(){
	$('#gallery').rvnGallery({effect: ['randomBoxes', 'tiles', 'alphaRect'], verticalSlices: 6, horizontalSlices: 4});
});

Dlaczego ten skrypt?

Ponieważ:

Pobieranie

Skrypt galerii zdjęć jQuery można pobrać stąd (tutaj jest do pobrania poprzednia wersja).

Instalacja skryptu

Najpierw upewnij się, że na Twojej stronie jest umieszczona biblioteka jQuery. Jeśli nie, zainstaluj ją, możesz w tym celu dodać poniższy kod do sekcji head:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>

Następnie potrzebujesz właściwych plików skryptu. W udostępnionym archiwum znajdziesz dwa foldery examples i rvn-gallery. Ten drugi zawiera wszystkie niezbędne pliki - skopiuj go do katalogu ze stroną na serwerze, a do nagłówka (sekcja head) dodaj taki kod:

<script type="text/javascript" src="rvn-gallery/rvn-gallery.js"></script>
<link rel="stylesheet" type="text/css" href="rvn-gallery/rvn-gallery.css" />

Oczywiście jeśli ścieżka dostępu do tych plików jest inna, to należy odpowiednio zmienić atrybuty href i src.

W prezentowanym przykładzie założyłem, że tworzonej galerii dodasz atrybut id="gallery". Oczyście nie jest to wymagane i jeśli jesteś bardziej zaawansowanym użytkownikiem możesz wykonać to na własny sposób.

Licencja

Skrypt udostępniony na licencji GPL 2.0.

Kod HTML

W celu lepszej jakości strony pod kątem SEO zmieniłem tutaj odrobinę podejście w stosunku do poprzedniej wersji. Obecnie kod html jest tworzony na wzór:

<ul id="gallery" class="rvnGallery">
	<li>
		<img src="img/1.png" alt="alternatywny podpis" />
		<p>Podpis obrazka</p>
	</li>
	<li>
		<a href="http://rvn-gallery.krukowski.me"><img src="img/2.png" alt="alternatywny podpis" /></a>
	</li>
	<li>
		<img src="img/3.png" alt="alternatywny podpis" />
	</li>
</ul>

Jak widzisz jest to zwykła lista w HTML-u. W pokazanym przypadku pierwszy obrazek będzie miał dodatkowy podpis, a drugi zostanie opatrzony odnośnikiem.

Kod CSS

Z tego względu, że różne obrazki mogę mieć różne wymiary, a skrypt galerii rvnGallery radzi sobie z takimi przypadkami uznałem, że lepiej będzie definiować wymiary tworzonej galerii ręcznie. Zatem gdzieś w kodzie css musisz dodać jeszcze coś na wzór:

#gallery {
	width: 400px;
	height: 300px;
}

Przy czym parametry width i height ustawiasz oczywiście według własnego uznania.

Kod javascript

Kiedy już wykonasz wszystkie poprzednie punkty musisz poinformować przeglądarkę, żeby w danym miejscu wygenerowała galerię. Wykonasz to za pomocą poniższego kodu:

$(window).load(function(){
        $('#gallery').rvnGallery();
});

lub tak:

$(window).load(function(){
        $('#gallery').rvnGallery(params);
});

gdzie zmienna params oznacza przekazywane parametry.

Parametry

Poniżej znajduje się lista domyślnych parametrów wraz z krótkim opisem zastosowania. Jeśli chcesz zmienić tylko jeden, to nie musisz podawać wszystkich przy wywoływaniu funkcji rvnGallery - pominięte przez Ciebie parametry przyjmą wartości domyślne.

var params = {
        effect: 'random', //efekt przejść, podajemy 'nazwaEfektu' jeśli jeden, lub ['efektPierwszy', 'efektDrugi', 'efektTrzeci'] jeśli więcej
        verticalSlices: 10, //ilość pasków pionowych
        horizontalSlices: 8, //ilość pasków poziomych
        boxCols: 6, //ilość kolumn
        boxRows: 4, // ilość wierszy
        delay: 5000, //czas opóźnień pomiędzy kolejnymi animacjami
        animSpeed: 600, //czas animacji
        sliceDelay: 50, //czas opóźnień między animacją kolejnych pasków
        backgroundColor: '#ffffff', //kolor tła
        slider: true, //automatyczny pokaz slajdów
        captionOpacity: 0.8, //przezroczystość paska z tekstem, wartość z zakresu od 0 do 1
        navButtons: true //widoczność przycisków nawigacyjnych
}

Lista dostępnych efektów:

  1. random (losowy efekt)
  2. alternatelyRight
  3. alternatelyLeft
  4. alternatelyBottom
  5. alternatelyTop
  6. blindsRight
  7. blindsLeft
  8. blindsBottom
  9. blindsTop
  10. tiersBottomRight
  11. tiersBottomLeft
  12. tiersTopRight
  13. tiersTopLeft
  14. tiersRightBottom
  15. tiersRightTop
  16. tiersLeftBottom
  17. tiersLeftTop
  18. alphaRectRight
  19. alphaRectLeft
  20. alphaRectBottom
  21. alphaRectTop
  22. fade
  23. teethVertical
  24. teethHorizontal
  25. newTiersBottomRight
  26. newTiersBottomLeft
  27. newTiersTopRight
  28. newTiersTopLeft
  29. newTiersRightBottom
  30. newTiersRightTop
  31. newTiersLeftBottom
  32. newTiersLeftTop
  33. snake
  34. gridLeftTop
  35. gridLeftBottom
  36. gridRightTop
  37. gridRightBottom
  38. chessboard
  39. randomBoxes
  40. tilesLeftTop
  41. tilesRightTop
  42. tilesLeftBottom
  43. tilesRightBottom
  44. alternately (losowy z zaczynających się na alternately)
  45. blinds (losowy z zaczynających się na blinds)
  46. tiers (losowy z zaczynających się na tiers)
  47. alphaRect (losowy z zaczynających się na alphaRect)
  48. teeth (losowy z zaczynających się na teeth)
  49. newTiers (losowy z zaczynających się na newTiers)
  50. grid (losowy z zaczynających się na grid)
  51. tiles (losowy z zaczynających się na tiles)

Na chwilę obecną skrypt ma wbudowane 42 unikalne efekty.

Dodatkowe funkcje

W wersji 2.1 zostały wprowadzone dodatkowe funkcje:

$('#gallery').rvnGalleryPrev(); //następny obrazek, można zamiennie używać $('#gallery').rvnGalleryGoTo('prev');
$('#gallery').rvnGalleryNext(); //poprzedni obrazek, można zamiennie używać $('#gallery').rvnGalleryGoTo('next');
$('#gallery').rvnGalleryGoTo(4); //idź do obrazka o indeksie 4 (indeksujemy od 0)

Kompatybilność

Pisząc wtyczkę udało mi się osiągnąć kompatybilność z Internet Explorer-em w wersji 6, dzięki czemu można mieć pewność, że strona będzie się wyświetlać poprawnie nawet u użytkowników nie aktualizujących swojej przeglądarki od 11 lat ;)

Przykłady zastosowania

Jeśli wykorzystałeś mój skrypt galerii na swojej napisz mi o tym - wrzucę tutaj link do Twojej strony. Będę wdzięczny jeśli umieścisz u siebie link zwrotny, ale nie jest to konieczne.

Przykłady:

Jeśli chcesz dodać obslugę skryptu lightbox do zdjęć musisz opatrzyć je w odpowiedni znacznik a i dodać właściwą bibliotekę, polecam przejrzeć przykład w załączonej paczce.
Zauważ, że możesz w ten sposób do skryptu galerii zdjęć przkazać miniaturki, natomiast do skryptu lightboxa obrazki faktycznej wielkości.

<li>
	<a href="img/big-1.png" rel="lightbox[all]"><img src="img/snall-1.png" alt="first image" /></a>
</li>

Uwaga
Zastowoany skrypt lightbox nie jest kompatybilny z najnowszą wersją jQuery (najnowsza kompatybilna wersja to 1.8.3).

Kontakt

Jeśli chcesz się skontaktować ze mną, napisz na adres .