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.
<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>
#gallery {
width: 400px;
height: 300px;
border: 4px solid silver;
}
$(window).load(function(){
$('#gallery').rvnGallery({effect: ['randomBoxes', 'tiles', 'alphaRect'], verticalSlices: 6, horizontalSlices: 4});
});
Ponieważ:
Skrypt galerii zdjęć jQuery można pobrać stąd (tutaj jest do pobrania poprzednia wersja).
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.
Skrypt udostępniony na licencji GPL 2.0.
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.
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.
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.
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
}
Na chwilę obecną skrypt ma wbudowane 42 unikalne efekty.
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)
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 ;)
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).
Jeśli chcesz się skontaktować ze mną, napisz na adres .