Разработка простой галереи на JQuery со списком миниатюр. Переход между изображениями должен производится как при нажатии кнопок управления "вперед" и "назад", так и нажатии на миниатюру.
<div class="gallery-box"> <div class="view"> <div class="big-image"><img src="images/img11.jpg" alt="image11"></div> <a href="#" class="prev"></a> <a href="#" class="next"></a> </div> <div class="thumbnails"> <a href="images/img1.jpg" class="active"><img src="images/img11.jpg" alt="image11"></a> <a href="images/img2.jpg"><img src="images/img12.jpg" alt="image12"></a> <a href="images/img3.jpg"><img src="images/img13.jpg" alt="image13"></a> <a href="images/img4.jpg"><img src="images/img14.jpg" alt="image14"></a> <a href="images/img5.jpg"><img src="images/img15.jpg" alt="image15"></a> <a href="images/img6.jpg"><img src="images/img16.jpg" alt="image16"></a> <a href="images/img7.jpg"><img src="images/img17.jpg" alt="image17"></a> <a href="images/img8.jpg"><img src="images/img18.jpg" alt="image18"></a> <a href="images/img9.jpg"><img src="images/img19.jpg" alt="image19"></a> <a href="images/img10.jpg"><img src="images/img20.jpg" alt="image20"></a> </div> </div>
.gallery-box{ width:600px; padding:25px 0 0; margin:0 auto; } .view{ position:relative; margin:0 0 5px; } .big-image img{ display:block; width:600px; height:300px; } .prev, .next{ position:absolute; width:40px; height:40px; } .prev{ bottom:20px; left:20px; background:url(../images/controls.png) no-repeat 0 0; } .next{ bottom:20px; right:20px; background:url(../images/controls.png) no-repeat -48px 0; } .thumbnails{ width:605px; } .thumbnails a{ float:left; margin:0 5px 0 0; } .thumbnails a img{ width:142px; height:80px; border: 2px solid transparent; display:block; } .thumbnails .active img{ border-color:#069; }
Работа скрипта делится на 3 основных блока:
- обработка нажатия на кнопку "назад"
- обработка нажатия на кнопку "вперед"
- обработка нажатия на миниатюру изображения.
$(function(){ $('.thumbnails a').click(function(){ // При нажатиина миниатюру var images = $(this).find('img'); var imgSrc = images.attr('src'); $(".big-image img").attr({ src: imgSrc }); // Подменяем адрес большого изображения на адрес выбранного $(this).siblings('a').removeClass('active'); // Удаляем класс .active со ссылки чтоб убрать рамку images.parent().addClass('active'); // Добавляем класс .active на выбранную миниатюру return false; }); $('.next').click(function(){ // При нажатии на кнопку "вперед" var count = $('.thumbnails a').length; // Общее количество изображений var n = parseInt($('.thumbnails a').index($('.active')) + 1); // Порядковый номер текущего изображения var activeImg = $('.thumbnails .active'); // Активное на данный момент изображение var nextSrc; if (count != n){ // - Если изображение не последнее nextSrc = activeImg.next().find('img').attr('src'); // В переменную записывается адрес следующего изображения $('.thumbnails .active').removeClass('active'); // Удаляется класс .active с предыдущей миниатюры activeImg.next().addClass('active'); // На миниатюру следующего изображения вешается класс .active }else{ // - Если текущее изображение последнее в списке nextSrc = $('.thumbnails a').first().find('img').attr('src'); // В переменную записывается адрес первого изображения $('.thumbnails .active').removeClass('active'); // Удаляется класс .active с предыдущей миниатюры $('.thumbnails a').first().addClass('active'); // На первую миниатюру вешается класс .active } $('.big-image img').attr({ src: nextSrc }); // Подменяем адрес большого изображения на адрес следующего return false; }); $('.prev').click(function(){ // При нажатии на кнопку "назад" var count = $('.thumbnails a').length; // Общее количество изображений var n = parseInt($('.thumbnails a').index($('.active')) + 1); // Порядковый номер текущего изображения var activeImg = $('.thumbnails .active'); // Активное на данный момент изображение var prevSrc; if (n != 1){ // - Если текущее изображение не первое prevSrc = activeImg.prev().find('img').attr('src'); // В переменную записывается адрес предыдущего изображения $('.thumbnails .active').removeClass('active'); // Удаляется класс .active активной до этого миниатюры activeImg.prev().addClass('active'); // На миниатюру изображения слева вешается класс .active }else{ // - Если текущее изображение первое prevSrc = $('.thumbnails a:last').find('img').attr('src'); // В переменную записывается адрес последнего изображения $('.thumbnails .active').removeClass('active'); // Удаляется класс .active с предыдущей миниатюры $('.thumbnails a:last').addClass('active'); // На последнюю миниатюру вешается класс .active } $('.big-image img').attr({ src: prevSrc }); // Подменяется адрес большого изображения на адрес следующего return false; }); })
Комментарии
Да не вопрос) Добавил ссылку на архив.
Вы видимо не подключили JQuery на странице.
Согласен. Отличная работа.