Галерија со jQuery

Креирањето на галерија со jQuery е навистина едноставно, а тоа може да го видете од следниот пример. Крајниот резултат можете да го погледнете тука или пак преземете го.

jquery-galerija

Најпрво ќе ни треба обичен HTML документ:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Галерија - Delicon Interactive Blog</title>
<script type="text/javascript" src="js/jquery.js"></script> <!-- Се прикачува jQuery библиотеката на страната -->
<script type="text/javascript">
<!-- jQuery -->
</script>
<style type="text/css">
<!-- CSS -->
</style>
</head>

<body>
<div id="pozadina"><img id="golemaSlika" src="sliki/1.jpg" alt="Слика 1" /></div>
Слики
<div class="maliSliki">
<a href="sliki/1.jpg"><img src="sliki/1-mala.jpg" alt="Слика 1" /></a>
<a href="sliki/2.jpg"><img src="sliki/2-mala.jpg" alt="Слика 2" /></a>
<a href="sliki/3.jpg"><img src="sliki/3-mala.jpg" alt="Слика 3" /></a>
<a href="sliki/4.jpg"><img src="sliki/4-mala.jpg" alt="Слика 4" /></a>
<a href="sliki/5.jpg"><img src="sliki/5-mala.jpg" alt="Слика 5" /></a></div>
</body>
</html>

Сега ќе треба да напишеме CSS стил за нашиот HTML:

* {
margin: 0;
padding: 0;
}

body {
margin: 50px auto;
width: 566px;
font: 100% Arial, Helvetica, sans-serif;
}

p {
font-size: 0.75em;
background: #F5F5F5;
padding: 5px;
margin: 10px 0;
border: 1px solid #CCC;
text-align: center;
display: block;
}

#pozadina {
width: 550px;
height: 400px;
border: solid 1px #CCC;
padding: 7px;
}

.maliSliki img {
padding: 4px;
border: solid 1px #CCC;
}

.maliSliki img:hover { border-color: #C33; }

Целата тајна на галеријата се крие во jQuery кодот. Разгледајте го внимателно:

$(function(){

$(".maliSliki a").click(function(){ // При кликнување на линк се извршува кодот подолу

var pateka = $(this).attr("href"); // Се одредува патеката на сликата
var alt = $(this).find("img").attr("alt"); // Се одредува alt текстот на сликата

$("#golemaSlika").fadeOut(function() {    // Сликата исчезнува постепено
$(this).attr({ src: pateka, alt: alt }); // Се заменува сликата со избраната слика
}).fadeIn(); // Сликата се појавува постепено

$("p.naslov").html(alt); // Се заменува текстот на сликата со нов
return false; // Се оневозможува пренасочувањето од линкот
});
});

И тоа е се! Целиот код сега треба да ви изгледа како овој:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Галерија - Delicon Interactive Blog</title>
<script type="text/javascript" src="js/jquery.js"></script> <!-- Се прикачува jQuery библиотеката на страната -->
<script type="text/javascript">
$(function(){

$(".maliSliki a").click(function(){ // При кликнување на линк се извршува кодот подолу

var pateka = $(this).attr("href"); // Се одредува патеката на сликата
var alt = $(this).find("img").attr("alt"); // Се одредува alt текстот на сликата

$("#golemaSlika").fadeOut(function() {    // Сликата исчезнува постепено
$("#golemaSlika").attr({ src: pateka, alt: alt }); // Се заменува сликата со избраната слика
}).fadeIn(); // Сликата се појавува постепено

$("p.naslov").html(alt); // Се заменува текстот на сликата со нов
return false; // Се оневозможува пренасочувањето од линкот
});
});
</script>
<style type="text/css">
* {
margin: 0;
padding: 0;
}

body {
margin: 50px auto;
width: 566px;
font: 100% Arial, Helvetica, sans-serif;
}

p {
font-size: 0.75em;
background: #F5F5F5;
padding: 5px;
margin: 10px 0;
border: 1px solid #CCC;
text-align: center;
display: block;
}

#pozadina {
width: 550px;
height: 400px;
border: solid 1px #CCC;
padding: 7px;
}

.maliSliki img {
padding: 4px;
border: solid 1px #CCC;
}

.maliSliki img:hover { border-color: #C33; }
</style>
</head>

<body>
<div id="pozadina"><img id="golemaSlika" src="sliki/1.jpg" alt="Слика 1" /></div>
Слики
<div class="maliSliki">
<a href="sliki/1.jpg"><img src="sliki/1-mala.jpg" alt="Слика 1" /></a>
<a href="sliki/2.jpg"><img src="sliki/2-mala.jpg" alt="Слика 2" /></a>
<a href="sliki/3.jpg"><img src="sliki/3-mala.jpg" alt="Слика 3" /></a>
<a href="sliki/4.jpg"><img src="sliki/4-mala.jpg" alt="Слика 4" /></a>
<a href="sliki/5.jpg"><img src="sliki/5-mala.jpg" alt="Слика 5" /></a></div>
</body>
</html>
gravatar
Автор: Даниел Брзанов
За авторот: Здраво! Јас сум Даниел a.k.a. Delicon, се занимавам со веб дизајн и програмирање повеќе од 10 години и сакам да го споделам своето знаење со сите што се заинтересирани за тоа.

3 Коментари

  1. браво мајсторе, само напред.

  2. Одлично!

    Неколку предлози за подобрување:

    1. Би требало да имаш config објект во кој корисникот би можел да зададе колку сака слики за целата галерија; можеби го немаш тоа направено бидејки ова го имаш организирано како туторијал, но во вистинска апликација ова би требало да биде како екстензија на jQuery или обична класа која сама ке го генерира HTML кодот наместо хард кодирано и ограничено на 5 слики.

    Пр, new Galerija([{thmb: 'url', image: 'url'}, {}….])

    2. fadeIn се случува пред да се вчита новата слика. Навистина img src сетираш после fadeOut, што на прв поглед е ок, но fadeIn може да се случи уште пред да се вчита новата слика. Можеби треба да погледнеш на onload event-от на img.

    3. Ако имаме повеќе од 5 слики, thubnails би требало да се прикажуваат низ scroll…

    Како и да е, ова е одличен пример да jQuery, многу малку вакви содржини има на македонски, само напред блогов ти е одличен.