JavaScript галерия

Автор: I_V_O

Ще направим една простичка JavaScript галерия.

Направете HTML документ: index.html

<html>

<head>

<title>JavaScript галерия</title>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<link type="text/css" rel="Stylesheet" href="gallery.css" />

<script type="text/javascript" src="gallery.js"></script>

</head>

<body>

<div id="gallery">

<div id="bigImages"><img src="images/Winter.jpg" alt="" id="bossImage" /></div>

<div id="smallImages">

<img src="images/LeftArrow.gif" onclick="go(-1);" title="<-" style="position: absolute; top: 0px; left: 0px; height: 70px; cursor: pointer;" />
<img src="images/RightArrow.gif" onclick="go(1);" title="->" style="position: absolute; top: 0px; right: 0px; height: 70px; cursor: pointer;" />
<img src="images/loading2.gif" alt="" class="smallImage" onclick="changeImage(this);" />
<img src="images/loading2.gif" alt="" class="smallImage" onclick="changeImage(this);" />
<img src="images/loading2.gif" alt="" class="smallImage" onclick="changeImage(this);" />
<img src="images/loading2.gif" alt="" class="smallImage" onclick="changeImage(this);" />
<img src="images/loading2.gif" alt="" class="smallImage" onclick="changeImage(this);" />

</div>

<div id="pagesInfo">

Брой страници: <span id="pagesNumber">12</span>
Вие сте на: <span id="cPageNumber">10</span> страница

</div>

</div>
<script type="text/javascript">
document.getElementById('pagesNumber').innerHTML = pages+1;//popalvame v poleto broq na stranicite
var AllDocumentImages = document.getElementsByTagName('img');//selektirame vsichki kartinki v dokumenta
var galleryImages = new Array();//masiv za kartinkite s klass smallImage
for(i=0;i<AllDocumentImages.length;i++){

if(AllDocumentImages[i].className == 'smallImage'){
galleryImages[galleryImages.length] = AllDocumentImages[i];
}

}//popalvame samo tezi kartinki s klass smallImage

window.onload = function(){
go(0);
}//zarejdame pyrvite 5 kartinki sled kato stranicata e zaredena
</script>
</body>

</html>

CSS файл: gallery.css

div#gallery{width: 700px; border: solid 2px yellow;}
div#gallery div#bigImages{border-bottom: solid 2px orange;}
div#gallery div#bigImages img#bossImage{width: 600px; margin-left: 50px;}
div#gallery div#smallImages{position: relative; text-align: center; border-bottom: solid 2px orange;}
img.smallImage{width: 90px; height: 70px; cursor: pointer;}
div#pagesInfo{text-align: center;}
div#pagesInfo span#pagesNumber{color: red; font: bold 10pt verdana; margin-right: 30px;}
div#pagesInfo span#cPageNumber{color: red; font: bold 10pt verdana;}

И JS файл: gallery.js

var loading = new Image();
loading.src = 'images/loading2.gif';
var i;
//masiv za golemite kartinki
var bigImages = new Array();
bigImages[bigImages.length] = 'images/Winter.jpg';
bigImages[bigImages.length] = 'images/Water lilies.jpg';
bigImages[bigImages.length] = 'images/Blue hills.jpg';
bigImages[bigImages.length] = 'images/Sunset.jpg';
bigImages[bigImages.length] = 'images/azul.jpg';

bigImages[bigImages.length] = 'images/azul.jpg';
bigImages[bigImages.length] = 'images/Sunset.jpg';
bigImages[bigImages.length] = 'images/Water lilies.jpg';
bigImages[bigImages.length] = 'images/Blue hills.jpg';
bigImages[bigImages.length] = 'images/Winter.jpg';

bigImages[bigImages.length] = 'images/loading2.gif';

//masiv zamalkite kartinki
var smallImages = new Array();
smallImages[smallImages.length] = 'images/Winter.jpg';
smallImages[smallImages.length] = 'images/Water lilies.jpg';
smallImages[smallImages.length] = 'images/Blue hills.jpg';
smallImages[smallImages.length] = 'images/Sunset.jpg';
smallImages[smallImages.length] = 'images/azul.jpg';

smallImages[smallImages.length] = 'images/azul.jpg';
smallImages[smallImages.length] = 'images/Sunset.jpg';
smallImages[smallImages.length] = 'images/Water lilies.jpg';
smallImages[smallImages.length] = 'images/Blue hills.jpg';
smallImages[smallImages.length] = 'images/Winter.jpg';

smallImages[smallImages.length] = 'images/loading2.gif';

//na vseki element s opredelen indeks ot ediniq masiv syotvetstva element sys syshtiq indeks ot drugiq masiv

var pages = Math.ceil(bigImages.length/5)-1;//broi na stranicite
var currentPage = 0;//tekushta stranica

function info(){
document.getElementById('cPageNumber').innerHTML = currentPage+1;
} //promqna na tekushtata stranica

function go(where){//funkciq za promqna na malkite kartinki

currentPage += where;
if(currentPage<0) currentPage = 0;
else if(currentPage>pages) currentPage = pages;
else{

for(i=0;i<5;i++){

if(smallImages[i+currentPage*5]){//pokazvane na sledvashtite 5 ili po-malko kartinki
with(galleryImages[i]){
style.visibility = 'visible';
src = smallImages[i+currentPage*5];
alt =bigImages[i+currentPage*5];
}
}else{

galleryImages[i].style.visibility = 'hidden';
//ako broq na kartinkite ne e cheten na 5 praznite praznite kartinki stavat nevidimi

}

}

info();
}

}

function changeImage(obj){//promqna na golqmata kartinka

document.getElementById('bossImage').src = obj.alt;

}

Заместете в масивите с ваши картинки. Еднакъв брой и в двата масива. В кода има обяснения.

Урока е авторски и забранявам преписване!