2. Реализация

   1. Исследовательская часть

Исследование составляет немалую часть моего дипломного проекта. Так как для разработки проекта используются на сегодняшний день современные технологии веб-программирования. В частности было произведено:

• Изучение языка разметки веб-страниц – XHTML;

• Изучение технологии описания внешнего вида документа – CSS3;

• Изучение скриптового языка общего назначения – PHP5;

• Изучение скриптового языка объектно-ориентированного программирования – JavaScript;

• Изучение взаимодействия скриптов и плагинов библиотеки jQuery;

• нахождение оптимального варианта отображения среди средств, перечисленных выше технологий.

2.1.1. Изучение взаимодействия скриптов и плагинов библиотеки jQuery

jQuery – библиотека JavaScript, фокусирующаяся на взаимодействии JavaScript и HTML. Библиотека jQuery помогает легко получать доступ к любому элементу DOM, обращаться к атрибутам и содержимому элементов DOM, манипулировать ими.

Плагин, который я подключил имеет следующие функции:

• возможность автоматического переключения картинок(использовал именно эту функцию для реализации слайд-шоу);

• переключение картинок при помощи навигации;

• пауза;

• отображение в слайдах не только картинок, но и различный контент;

• отображение номера текущего слайда.

HTML код:

<div class="slide">

<div class="gallery gallery2">

<ul class="img-holder">

<li class="active">

<img src="images/1nsk.jpg" alt="" />

</li>

<li>

<img src="images/2nsk.jpg" alt="" />

</li>

<li>

<img src="images/3nsk.jpg" alt="" />

</li>

</ul>

</div>

</div>

Соответственно для этого кода я применил такие CSS свойства:

.gallery .img-holder {

position: relative;

width: 314px;

height: 235px;

margin: 0;

padding: 0;

list-style: none;

}

.gallery ul.img-holder li {

position: absolute;

top: 0;

left: 0;

z-index: 0;

}

.gallery .img-holder .active {

z-index: 1;

}

Для активного элемента я поставил z-index:1, а для остальных z-index:0, это сделано для того чтобы при загрузке сайта лежала первая картинка, а не последняя.

На данный момент прокручивается 31 фото с видами Новосибирска.

Подключение и настройка плагина:

Для работы плагина подключил два скрипта, файл основной библиотеки jQuery (начиная с версии 1.2.*), скрипт jquery.slideShow, а также сделал инициализацию плагина:

<script type="text/javascript" src="js/jquery-1.3.1.pack.js"></script>

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

<script type="text/javascript">

$(document).ready(function(){

/* инициализация плагина при загрузки DOM документа */

$('.gallery').slideShow({

slideEl: 'div.img-holder li',

duration: 2000,

autoSlideShow: true,

switchTime: 5000

});

});

</script>

• $(‘.gallery’).slideShow() – в качестве главного объекта, для слайд-шоу, указывается селектор главного родителя;

• slideEl – параметр в который передается селектор слайда;

• duration – время fade эффекта (1000 – 1сек);

• autoSlideShow – Булево значение, которое включает autoslide;

• switchTime – время переключения между слайдами (1000 – 1сек).