Встала задача зациклить галерею на Lightbox 2. Задача откладывалась, поэтому над собственным решением не думаю. Выдалась минутка, нашел решение:
Когда же время дошло до практики, данный метод сразу откинул.
Алгоритм зацикливания элементарный:
- когда галерея доходит до краев – перематываем ее;
- всегда отображаем кнопки прокрутки, если более 1-го изображения.
lightbox.js
. Находим следующий код:$lightbox.find('.lb-prev').on('click', function(e) { _this.changeImage(_this.currentImageIndex - 1); return false; }); $lightbox.find('.lb-next').on('click', function(e) { _this.changeImage(_this.currentImageIndex + 1); return false; });
Заменяем его на:
$lightbox.find('.lb-prev').on('click', function(e) { // cay if(_this.currentImageIndex == 0) _this.changeImage(_this.album.length - 1); else _this.changeImage(_this.currentImageIndex - 1); return false; }); $lightbox.find('.lb-next').on('click', function(e) { // cay if (_this.currentImageIndex == _this.album.length - 1) _this.changeImage(0); else _this.changeImage(_this.currentImageIndex + 1); return false; });
Эта замена позволит по достижении пользователем краев галереи двигаться далее.
В завершение находим следующий код:
Lightbox.prototype.updateNav = function() { var $lightbox; $lightbox = $('#lightbox'); $lightbox.find('.lb-nav').show(); if (this.currentImageIndex > 0) $lightbox.find('.lb-prev').show(); if (this.currentImageIndex < this.album.length - 1) { $lightbox.find('.lb-next').show(); } };
Заменяем его:
Lightbox.prototype.updateNav = function() { var $lightbox; $lightbox = $('#lightbox'); // cay -block- if ( this.album.length > 1 ) { $lightbox.find('.lb-nav').show(); $lightbox.find('.lb-prev').show(); $lightbox.find('.lb-next').show(); } //~ if (this.currentImageIndex > 0) $lightbox.find('.lb-prev').show(); //~ if (this.currentImageIndex < this.album.length - 1) { //~ $lightbox.find('.lb-next').show(); //~ } // cay -block- # };
Эта модификация позволит отображать кнопки навигации только если в галерее более 1-го изображения.