Mike Bogdanovsky Blog Dev Image Enlarge (jQuery)

Image Enlarge (jQuery)

Я очень страдаю от навороченных плагинов для простых действия. Мне очень нравится простое увеличение картинки, без всяких модальных окон, без настроек галереи. Просто – нажал на картинку, она увеличилась до оригинальных размеров, нажал еще раз – картинка стала такой, какой ее вписали в дизайн.

Давайте разбираться, что за бред я несу и о чем речь. И так, вот например картинка:

Наведите мышку на картинку и кликните

Как видно, картинка просто увеличивается на одно нажатие, и если нажать на большую картинку еще один раз, то она вернется на место. Для этого волшебства нужно jQuery, который и так по умолчанию везде имеется. Можно переписать без jQuery, но мне лениво.

/**
 * Image enlarge on click
 */
(function( $ ){

	var _settings = {
		cursor: 'crosshair',
		animationTime: 300,
		watchResize: true
	}

	var _toggleImage = function(img, ev){
		if(img.hasClass('_jquery-img-enlarged') || img.parent().prop("tagName") == 'A') return;

		img.addClass('_jquery-img-enlarged');
        var offset = $(img[0]).offset();
        var originLeft = offset.left;
        var originTop = offset.top;
		var $img = img.clone().addClass('_jquery-img-enlarged-copy').appendTo('body').removeClass('_jquery-img-enlarged');       

		$img.css({
			width: img[0].clientWidth,
			height: img[0].clientHeight,
			position: 'absolute',
            top: img.offset().top,
			left: img.offset().left
		}).animate({
			top: $(window).scrollTop() + 40,
            left: ($(window).width() >= img[0].naturalWidth)? ($(window).width() - img[0].naturalWidth)/2 : 0,
			width: img[0].naturalWidth,
			height: img[0].naturalHeight
		}, _settings.animationTime, function(){ img.css({opacity: 0}); }).one('click', function(ev){
			ev.preventDefault();
			$img.animate({
                top: originTop,
                left: originLeft,
				height: img[0].clientHeight,
				width: img[0].clientWidth
			}, _settings.animationTime, function(){
				$img.remove();
				img.removeClass('_jquery-img-enlarged');
                img.css({opacity: 1});
			});
		})
	}

	$.fn.imgEnlarge = function( options ) {
		var that = this;
		if(options) $.extend(_settings, options);

		var _bindImages = function(){
			return that.each(function(index, img){
				if(img.clientWidth < img.naturalWidth){
					$(img).css({cursor: _settings.cursor});
					$(img).on('click', function(ev){
						ev.preventDefault();
						_toggleImage($(this), ev);
					});
				} else {
					$(img).css({cursor: 'default'});
					$(img).off('click');
				}
			});
		};


		if(_settings.watchResize){
			$(window).on('resize', function(){
				$('._jquery-img-enlarged-copy').remove();
				$('._jquery-img-enlarged').removeClass('_jquery-img-enlarged');
				_bindImages();
			});
		}

		return _bindImages();

	};

})( window.jQuery );

jQuery(function() {
   jQuery('img').imgEnlarge();
});

Когда нибудь у меня будет нужное настроение и 20 минут свободного времени и я обязательно уменьшу и причешу этот кусок кода, но пока он работает и не болеет – не трогаем.