модификация Lightbox 2

’tag’

Зацикливаем галерею на Lightbox 2

Август 26, 2012

Встала задача зациклить галерею на 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-го изображения.

Tags: ,
Записано в JavaScript, Программирование    |    Постоянная ссылка