3.3. Написання jquery-скрипта. Слайдер зображень
На сьогоднішній день існує багато готових скриптів і плагінів на різну тематику написаних на фреймоворку Jquery, але написання власноруч свого скрипта є одним із методів закріплення навиків та знань в роботі з цим фреймворком, тому й було запропоновано наступне завдання.
Даний скрипт призначений для інтерактивного перегляду зображень на веб-сайті. Даний скрипт працює за наступним принципом, виділяється певна область на сайті в які в ряд розміщені картинки однакових розмірів, оригінальними розмірами картинки можуть відрізнятися але за допомогою CSS вони всі однакові. Перехід на на ступну картинку здійснюється за допомогою навігаційних кнопок «Вперед» та «Назад». Код даного скрипта наведено нище:
$(document).ready(function(){
var $images = $("#slide img");
var $images_show = $("#slide img:visible");
var count_slide = $images.size();
var current = 0;
$images.slice(1).hide();
$("a#prev").hide();
$("a.control").bind("click" , function(){
$images_show.fadeOut(500);
$(this).attr("id")=="next" ? current++ : current--;
$($images[current]).fadeIn(1200);
if (current==0)
{$("a#prev").hide()}
else
{$("a#prev").show()}
if (current==count_slide-1)
{$("a#next").hide()}
else
{$("a#next").show()}
});
})
В даному скрипті оголошено 4 змінні:
var $images = $("#slide img");
var $images_show = $("#slide img:visible");
var count_slide = $images.size();
var current = 0;
var $images = $("#slide img") – це загальна кількість зображень розміщених в блоці який відображає ці зображення, в html розмітці сторінки цей блок описаний так:
<div id="wrapp_slide">
<div id="slide">
<img src="image/img_1.jpg" alt="picture" />
<img src="image/img_2.jpg" alt="picture" />
<img src="image/img_3.jpg" alt="picture" />
<img src="image/img_4.jpg" alt="picture" />
</div>
<a href="#" id="prev" class="control">preview</a>
<a href="#" id="next" class="control">next</a>
</div>
Ці два посилання:
<a href="#" id="prev" class="control">preview</a>
<a href="#" id="next" class="control">next</a>
відповідають за перехід на наступну та попередню картинку. Згідно розмітки можна побачити що вони мають id та class. Нище наведені css-правила цих ідентифікаторів та класу:
a.control {
text-decoration: none;
text-indent: -9000px;
position: absolute;
bottom: 200px;
display: block;
width: 20px;
height: 20px;
z-index: 2;
}
a.control#prev {
background-image:url(image/bg_prev.png);
left: 0px;
}
a.control#next {
background-image:url(image/bg_next.png);
right: 0px;
}
Після оголошення змінних йде наступний код:
$images.slice(1).hide();
$("a#prev").hide();
перший рядок якого приховує всі зображення крім пешого яке буде поточним, а другий рядок приховує кнопку переходу на попередню картинку, оскільки перехід на наступну ще не відбувся то це цілком логічно.
Далі йде:
$("a.control").bind("click" , function(){
$images_show.fadeOut(500);
$(this).attr("id")=="next" ? current++ : current--;
$($images[current]).fadeIn(1200);
if (current==0)
{$("a#prev").hide()}
else
{$("a#prev").show()}
if (current==count_slide-1)
{$("a#next").hide()}
else
{$("a#next").show()}
});
реалізація переходів вперед та назад для перегляду потрібних картинок, які спрацьовують при події «click» на елементах з класом «control» .
Рис. 5 Перегляд першої картинки в слайдері
Рис. 6 Перехід на наступну картинку та її відображення