jQuery – galeria zdjęć
Witam w kolejnym tutorialu z serii jQuery, w którym pokaże jak zrobić prostą, lecz efektownie wyglądającą galerie zdjęć. Posłużymy się jednym z popularniejszych pluginów…
Witam w kolejnym tutorialu z serii jQuery, w którym pokaże jak zrobić prostą, lecz efektownie wyglądającą galerie zdjęć. Posłużymy się jednym z popularniejszych pluginów właśnie do tworzenia animacji obrazków, a także innych elementów znajdujących się na stronie.
Na wstępie chciałbym szybko wytłumaczyć co to jest „plugin”, bo wbrew pozorom nie każdy to wie. Plugin to nic innego jak wtyczka, która automatyzuje żmudne czynności. Oczywiście moglibyśmy się obejść bez pluginu, lecz wtedy musimy się liczyć z pisaniem dłuższych linijek kodu.
Dobra, to zabieramy się za konkrety. Za pomocą pluginu Cycle zrobimy taką oto galerie – kliknij tutaj aby zobaczyć. Pozwolę sobie nie omawiać procesu powstawania layoutu graficznego. Na końcu tego tutorialu znajdziecie link do pobrania całej galerii wraz z plikiem .PSD do którego zachęcam zajrzeć, chociażby tylko po to aby zerknąć jaką metodą ciąłem grafikę.
Etap 1: Poznajemy układ szablonu HTML/CSS.
Na tym etapie chciałbym abyście w miarę możliwości samodzielnie przeanalizowali poniższe źródła kodu html i css. Na pewno nie będziecie mieli z tym problemu.
Kod HTML między tagami <head>…</head>:
- jQuery.js – w tym pliku znajduje się biblioteka jQuery.
- jquery.cycle.all.min.js – plugin Cycle, możecie go pobrać z oficjalnej strony tego pluginu – http://malsup.com/jquery/cycle/download.html.
- nasze-skrypty.js – tu znajdują się nasze skrypty jQuery.
Kod HTML między <body>…</body>:
Kod CSS:
html, body {
background:url(img/bg_body.jpg) center repeat-x #f6f6f6;
}
/* HEADER */
#header {
background:url(img/header.png) bottom left no-repeat;
height:270px;
width:890px;
margin:0 auto;
}
#header .lukasz, .lukasz a {
padding-top:75px;
color:#d1cfd6;
text-decoration:none;
font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size:1.0em;
margin-left:190px;
}
/*DIV GALERIA*/
#galeria {
width:896px;
margin:0 auto;
position:relative;
}
#galeria .gora {
background:url(img/top_cont.jpg) bottom left no-repeat;
height:35px;
width:100%;
padding-left:9px;
padding-right:9px;
}
#galeria .gora .autor, .autor a {
font-family:Corbel, "Times New Roman", Times, serif;
font-size:0.9em;
letter-spacing:0.1em;
color:#6d7075;
padding-top:7px;
position:relative;
}
/*NUMEROWANIE ZDJEĆ */
#galeria .gora .pager {
position:absolute;
height:30px;
right:10px;
top:0px;
}
#galeria .gora .pager a {
background:url(img/pager.jpg) top left no-repeat;
height:28px;
width:45px;
margin-left:2px;
padding-top:8px;
text-align:center;
font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size:0.9em;
color:#959595;
display:block;
float:left;
text-decoration:none;
}
#galeria .gora .pager a.activeSlide {
background:url(img/pagerh.jpg) top left no-repeat;
}
/* BOX ZE ZDJĘCIAMI */
#galeria .zdjecia {
background:url(img/_cont.jpg) top left repeat-y;
width:100%;
padding-left:9px;
position:rrelative;
}
.zdjecia_pokaz img {
height:350px;
width:878px;
}
/* TYTUŁY ZDJĘĆ */
#galeria .zdjecia .info {
height:20px;
width:100%;
font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size:1.05em;
letter-spacing:0.36em;
color:#454545;
padding:15px;
text-align:center;
}
/* PRZYCISKI */
#galeria .prev {
background:url(img/prev.jpg) top left no-repeat;
height:41px;
width:47px;
position:absolute;
left:-46px;
top:175px;
}
#galeria .next {
background:url(img/next.jpg) top left no-repeat;
height:41px;
width:47px;
position:absolute;
right:-46px;
top:175px;
}
#galeria .prev:hover {
background:url(img/prevh.jpg) top left no-repeat;
}
#galeria .next:hover {
background:url(img/nexth.jpg) top left no-repeat;
}
#galeria .dol {
background:url(img/bottom_cont.png) top left no-repeat;
height:125px;
width:100%;
padding-top:35px;
text-align:center;
dfont-family:Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size:0.8em;
color:#767586;
}
Etap 2: Wdrażamy i poznajemy plugin Cycle.
Kod JavaScript (nasze-skrypty.js):
$(document).ready(function (){
$(".zdjecia_pokaz").cycle({
fx: 'scrollHorz',
speed: 'slow',
prev: '.prev',
next: '.next',
pager: '.pager',
timeout: 100000,
before: tytul
});
function tytul() {
$('.info').html(this.alt);
}
});Powyższe linijki kodu powodują, że nasza galeria działa, niewiarygodnie krótki kod jak na taką galerie zdjęć, prawda? 🙂 to właśnie najbardziej kocham w jQuery i pluginach, że nie muszę siedzieć i „dziergać” skomplikowanego kodu w JavaScript aby uzyskać takie efekty.. Powiem Wam szczerze, gdy opracowałem materiały do tego tutorialu najdłużej zejeło mi zaprojektowanie i pocięcie grafiki, a samo zakodowanie, bagatela 15 minut.
Ok., zajmijmy się omówieniem powyższego kodu jQuery.
- $(".zdjecia_pokaz").cycle … - pokazujemy Cycle gdzie ma szukać naszych zdjęć (img).
W środku funkcji cycle(); :
- fx: ‘scrollHorz’, - za pomocą fx ustawiamy efekt animacji zdjęć, w naszym przypadku jest to przewijanie w poziomie. Możemy również mieszać efekty w ten sposób ‘scrollHorz, scrollVert’. Więcej efektów znajdziecie tutaj.
- speed: ‘slow’, - prędkość odtwarzania animacji, w tym przypadku jest ustawione na wolną animacje. Możemy także ustawić szybkość w milisekundach np. 455 .
- prev: ‘.prev’, - poprzednie zdjęcie po kliknięciu w div o klasie prev. Nazwy klas mogą być dowolne.
- next: ‘.next’, - następne zdjęcie po kliknięciu w div o klasie next.
- pager: ‘.pager’, - tworzy numerowanie zdjęć w divie o klasie pager.
- timeout: 10000, - czas w milisekundach po którym następuje samoczynna zmiana zdjęcia, timeout ustawiony na 0 powoduje zablokowanie automatycznej zmiany zdjęć.
- before: tytul – dodatkowa funkcja, którą opiszę poniżej.
function tytul ();
- $('.info').html(this.alt); - pobiera i wyświetla (w div o klasie info) tekst, który się znajduje w atrybucie alt=”…” obecnie wyświetlającego się zdjęcia.
Na koniec chciałbym o czymś wspomnieć, a mianowicie galeria może po pierwszym uruchomieniu źle funkcjonować – niektóre zdjęcia są czasami pomniejszane przez plugin Cycle, prawdopodobnie plugin ma problem w automatycznym pobraniu rozmiarów galerii, więc zalecam aby „ręcznie” podać rozmiar w img – Ja to zrobiłem w CSS, ponieważ wszystkie zdjęcia mają taką samą szerokość i wysokość.
Mam nadzieje, że powyższy tutorial jest zrozumiały pozwoli Wam tworzyć nie tylko własne galerie, ale również inne dynamiczne elementy strony.