<style> img {
cursor: pointer; cursor: -webkit-zoom-in; cursor: -moz-zoom-in;
} .zoom-img, .zoom-img-wrap {
position: relative; z-index: 1001; -webkit-transition: all 300ms; -o-transition: all 300ms; transition: all 300ms;
} img.zoom-img {
cursor: pointer; cursor: -webkit-zoom-out; cursor: -moz-zoom-out;
} .zoom-overlay {
z-index: 1000; background: #292929; position: fixed; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; filter: "alpha(opacity=0)"; opacity: 0; -webkit-transition: opacity 300ms; -o-transition: opacity 300ms; transition: opacity 300ms;
} .zoom-overlay-open .zoom-overlay {
filter: "alpha(opacity=100)"; opacity: 1;
}
</style>
<script> $(function(){
$('.mdui-typo img').attr('data-action','zoom');
}) +function ($) {
'use strict'; function transitionEnd() { var el = document.createElement('bootstrap'); var transEndEventNames = { WebkitTransition : 'webkitTransitionEnd', MozTransition : 'transitionend', OTransition : 'oTransitionEnd otransitionend', transition : 'transitionend' }; for (var name in transEndEventNames) { if (el.style[name] !== undefined) { return { end: transEndEventNames[name] } } }; return false } $.fn.emulateTransitionEnd = function (duration) { var called = false; var $el = this; $(this).one('bsTransitionEnd', function () { called = true }); var callback = function () { if (!called) $($el).trigger($.support.transition.end) }; setTimeout(callback, duration); return this }; $(function () { $.support.transition = transitionEnd(); if (!$.support.transition) return; $.event.special.bsTransitionEnd = { bindType: $.support.transition.end, delegateType: $.support.transition.end, handle: function (e) { if ($(e.target).is(this)) return e.handleObj.handler.apply(this, arguments); } } });
}(jQuery);
+function ($) { “use strict”;
function ZoomService () { this._activeZoom = this._initialScrollPosition = this._initialTouchPosition = this._touchMoveListener = null; this._$document = $(document); this._$window = $(window); this._$body = $(document.body); } ZoomService.prototype.listen = function () { if (!imgzoom){ this._$body.on('click', '[data-action="zoom"]', $.proxy(this._zoom, this)) } imgzoom = true; }; ZoomService.prototype._zoom = function (e) { var target = e.target; if (!target || target.tagName != 'IMG') return; if (e.metaKey) return window.open(e.target.src, '_blank'); if (target.width >= (window.innerWidth - Zoom.OFFSET)) return; this._activeZoomClose(true); this._activeZoom = new Zoom(target); this._activeZoom.zoomImage(); this._$window.on('scroll.zoom', $.proxy(this._scrollHandler, this)); this._$document.on('click.zoom', $.proxy(this._clickHandler, this)); this._$document.on('keyup.zoom', $.proxy(this._keyHandler, this)); this._$document.on('touchstart.zoom', $.proxy(this._touchStart, this)); e.stopPropagation(); }; ZoomService.prototype._activeZoomClose = function (forceDispose) { if (!this._activeZoom) return; if (forceDispose) { this._activeZoom.dispose(); } else { this._activeZoom.close(); } this._$window.off('.zoom'); this._$document.off('.zoom'); this._activeZoom = null; }; ZoomService.prototype._scrollHandler = function (e) { if (this._initialScrollPosition === null) this._initialScrollPosition = window.scrollY; var deltaY = this._initialScrollPosition - window.scrollY; if (Math.abs(deltaY) >= 40) this._activeZoomClose(); }; ZoomService.prototype._keyHandler = function (e) { if (e.keyCode == 27) this._activeZoomClose(); }; ZoomService.prototype._clickHandler = function (e) { e.stopPropagation(); e.preventDefault(); this._activeZoomClose(); }; ZoomService.prototype._touchStart = function (e) { this._initialTouchPosition = e.touches[0].pageY; $(e.target).on('touchmove.zoom', $.proxy(this._touchMove, this)); }; ZoomService.prototype._touchMove = function (e) { if (Math.abs(e.touches[0].pageY - this._initialTouchPosition) > 10) { this._activeZoomClose(); $(e.target).off('touchmove.zoom'); } }; function Zoom (img) { this._fullHeight = this._fullWidth = this._overlay = this._targetImageWrap = null; this._targetImage = img; this._$body = $(document.body); } Zoom.OFFSET = 80; Zoom._MAX_WIDTH = 2560; Zoom._MAX_HEIGHT = 4096; Zoom.prototype.zoomImage = function () { var img = document.createElement('img'); img.onload = $.proxy(function () { this._fullHeight = Number(img.height); this._fullWidth = Number(img.width); this._zoomOriginal(); }, this); img.src = this._targetImage.src; }; Zoom.prototype._zoomOriginal = function () { this._targetImageWrap = document.createElement('div'); this._targetImageWrap.className = 'zoom-img-wrap'; this._targetImage.parentNode.insertBefore(this._targetImageWrap, this._targetImage); this._targetImageWrap.appendChild(this._targetImage); $(this._targetImage) .addClass('zoom-img') .attr('data-action', 'zoom-out'); $('.k-postcontent').css('overflow','visible'); this._overlay = document.createElement('div'); this._overlay.className = 'zoom-overlay'; document.body.appendChild(this._overlay); this._calculateZoom(); this._triggerAnimation(); }; Zoom.prototype._calculateZoom = function () { this._targetImage.offsetWidth ; var originalFullImageWidth = this._fullWidth; var originalFullImageHeight = this._fullHeight; var scrollTop = window.scrollY; var maxScaleFactor = originalFullImageWidth / this._targetImage.width; var viewportHeight = (window.innerHeight - Zoom.OFFSET); var viewportWidth = (window.innerWidth - Zoom.OFFSET); var imageAspectRatio = originalFullImageWidth / originalFullImageHeight; var viewportAspectRatio = viewportWidth / viewportHeight; if (originalFullImageWidth < viewportWidth && originalFullImageHeight < viewportHeight) { this._imgScaleFactor = maxScaleFactor; } else if (imageAspectRatio < viewportAspectRatio) { this._imgScaleFactor = (viewportHeight / originalFullImageHeight) * maxScaleFactor; } else { this._imgScaleFactor = (viewportWidth / originalFullImageWidth) * maxScaleFactor; } }; Zoom.prototype._triggerAnimation = function () { this._targetImage.offsetWidth ; var imageOffset = $(this._targetImage).offset(); var scrollTop = window.scrollY; var viewportY = scrollTop + (window.innerHeight / 2); var viewportX = (window.innerWidth / 2); var imageCenterY = imageOffset.top + (this._targetImage.height / 2); var imageCenterX = imageOffset.left + (this._targetImage.width / 2); this._translateY = viewportY - imageCenterY; this._translateX = viewportX - imageCenterX; $(this._targetImage).css('transform', 'scale(' + this._imgScaleFactor + ')'); $(this._targetImageWrap).css('transform', 'translate(' + this._translateX + 'px, ' + this._translateY + 'px) translateZ(0)'); this._$body.addClass('zoom-overlay-open'); }; Zoom.prototype.close = function () { this._$body .removeClass('zoom-overlay-open') .addClass('zoom-overlay-transitioning'); $(this._targetImage).css('transform', ''); $(this._targetImageWrap).css('transform', ''); $(this._targetImage) .one($.support.transition.end, $.proxy(this.dispose, this)) .emulateTransitionEnd(300); }; Zoom.prototype.dispose = function () { if (this._targetImageWrap && this._targetImageWrap.parentNode) { $(this._targetImage) .removeClass('zoom-img') .attr('data-action', 'zoom'); $('.k-postcontent').css('overflow','hidden'); this._targetImageWrap.parentNode.replaceChild(this._targetImage, this._targetImageWrap); this._overlay.parentNode.removeChild(this._overlay); this._$body.removeClass('zoom-overlay-transitioning'); } }; new ZoomService().listen();
}(jQuery);
</script>