+
+Preview Image
+Preview your images directly in Odoo.
+MuK IT GmbH - + www.mukit.at
+
+ 
+
+
+
+
+
+
+ Overview
+Extendes the Preview Dialog to support images. + Currently the following image extensions are supported:
+
+ ☑ CIS-Cod-Dateien (*.cod,
+ image/cis-cod)
☑
+ CMU-Raster-Dateien (*.ras, image/cmu-raster)
☑ FIF-Dateien (*.fif,
+ image/fif)
☑
+ GIF-Dateien (*.gif, image/gif)
+ ☑ IEF-Dateien (*.ief, image/ief)
☑ JPEG-Dateien (*.jpeg *.jpg
+ *.jpe, image/jpeg)
+ ☑ PNG-Dateien (*.png, image/png)
☑ TIFF-Dateien (*.tiff *.tif,
+ image/tiff)
☑
+ Vasa-Dateien (*.mcf, image/vasa)
+ ☑ Bitmap-Dateien (WAP) (*.wbmp, image/vnd.wap.wbmp)
+ ☑ Freehand-Dateien (*.fh4
+ *.fh5 *.fhc, image/x-freehand)
+ ☑ Icon-Dateien (*.ico, image/x-icon)
☑ PBM Anymap Dateien (*.pnm,
+ image/x-portable-anymap)
+ ☑ PBM Bitmap Dateien (*.pbm, image/x-portable-bitmap)
+ ☑ PBM Graymap Dateien
+ (*.pgm, image/x-portable-graymap)
☑ PBM Pixmap Dateien (*.ppm,
+ image/x-portable-pixmap)
+ ☑ RGB-Dateien (*.rgb, image/x-rgb)
☑ X-Windows Dump (*.xwd,
+ image/x-windowdump)
+ ☑ XBM-Dateien (*.xbm, image/x-xbitmap)
☑ XPM-Dateien (*.xpm,
+ image/x-xpixmap)
+
Help and Support
+
+
+ Email
+
+
+ Contact
+
+
+ 
+' + '
' + '' + '' + '
' + '';
+
+ //add a full screen view
+ $(function () {
+ if(!$body.length) $body = $('body');
+ $body.append('
' + imageViewHtml + '
');
+ });
+
+ function Slider(container, options) {
+ this.container = container;
+ this.onStart = options.onStart || noop;
+ this.onMove = options.onMove || noop;
+ this.onEnd = options.onEnd || noop;
+ this.sliderId = options.sliderId || 'slider' + Math.ceil(Math.random() * 1000000);
+ }
+
+ Slider.prototype.init = function () {
+ var self = this,
+ container = this.container,
+ eventSuffix = '.' + this.sliderId;
+
+ //assign event on snap image wrap
+ this.container.on('touchstart' + eventSuffix + ' mousedown' + eventSuffix, function (estart) {
+ estart.preventDefault();
+ var touchMove = (estart.type == "touchstart" ? "touchmove" : "mousemove") + eventSuffix,
+ touchEnd = (estart.type == "touchstart" ? "touchend" : "mouseup") + eventSuffix,
+ eOrginal = estart.originalEvent,
+ sx = eOrginal.clientX || eOrginal.touches[0].clientX,
+ sy = eOrginal.clientY || eOrginal.touches[0].clientY;
+
+ var start = self.onStart(estart, {
+ x: sx,
+ y: sy
+ });
+
+ if (start === false) return;
+
+ var moveListener = function (emove) {
+ emove.preventDefault();
+
+ eOrginal = emove.originalEvent;
+
+ //get the cordinates
+ var mx = eOrginal.clientX || eOrginal.touches[0].clientX,
+ my = eOrginal.clientY || eOrginal.touches[0].clientY;
+
+ self.onMove(emove, {
+ dx: mx - sx,
+ dy: my - sy,
+ mx: mx,
+ my: my
+ });
+
+ };
+
+ var endListener = function () {
+ $document.off(touchMove, moveListener);
+ $document.off(touchEnd, endListener);
+ self.onEnd();
+ };
+
+ $document.on(touchMove, moveListener);
+ $document.on(touchEnd, endListener);
+ });
+
+ return this;
+ }
+
+
+ function ImageViewer(container, options) {
+ var self = this;
+
+ if (container.is('#iv-container')) {
+ self._fullPage = true;
+ }
+
+ self.container = container;
+ options = self.options = $.extend({}, ImageViewer.defaults, options);
+
+ self.zoomValue = 100;
+
+ if (!container.find('.snap-view').length) {
+ container.prepend(imageViewHtml);
+ }
+
+ container.addClass('iv-container');
+
+ if (container.css('position') == 'static') container.css('position', 'relative');
+
+ self.snapView = container.find('.iv-snap-view');
+ self.snapImageWrap = container.find('.iv-snap-image-wrap');
+ self.imageWrap = container.find('.iv-image-wrap');
+ self.snapHandle = container.find('.iv-snap-handle');
+ self.zoomHandle = container.find('.iv-zoom-handle');
+ self._viewerId = 'iv' + Math.floor(Math.random() * 1000000);
+ }
+
+
+ ImageViewer.prototype = {
+ constructor: ImageViewer,
+ _init: function () {
+ var viewer = this,
+ options = viewer.options,
+ zooming = false, // tell weather we are zooming trough touch
+ container = this.container;
+
+ var eventSuffix = '.' + viewer._viewerId;
+
+ //cache dom refrence
+ var snapHandle = this.snapHandle;
+ var snapImgWrap = this.snapImageWrap;
+ var imageWrap = this.imageWrap;
+
+ var snapSlider = new Slider(snapImgWrap, {
+ sliderId: viewer._viewerId,
+ onStart: function () {
+
+ if (!viewer.loaded) return false;
+
+ var handleStyle = snapHandle[0].style;
+
+ this.curHandleTop = parseFloat(handleStyle.top);
+ this.curHandleLeft = parseFloat(handleStyle.left);
+ this.handleWidth = parseFloat(handleStyle.width);
+ this.handleHeight = parseFloat(handleStyle.height);
+ this.width = snapImgWrap.width();
+ this.height = snapImgWrap.height();
+
+ //stop momentum on image
+ clearInterval(imageSlider.slideMomentumCheck);
+ cancelAnimationFrame(imageSlider.sliderMomentumFrame);
+ },
+ onMove: function (e, position) {
+ var xPerc = this.curHandleLeft + position.dx * 100 / this.width,
+ yPerc = this.curHandleTop + position.dy * 100 / this.height;
+
+ xPerc = Math.max(0, xPerc);
+ xPerc = Math.min(100 - this.handleWidth, xPerc);
+
+ yPerc = Math.max(0, yPerc);
+ yPerc = Math.min(100 - this.handleHeight, yPerc);
+
+
+ var containerDim = viewer.containerDim,
+ imgWidth = viewer.imageDim.w * (viewer.zoomValue / 100),
+ imgHeight = viewer.imageDim.h * (viewer.zoomValue / 100),
+ imgLeft = imgWidth < containerDim.w ? (containerDim.w - imgWidth) / 2 : -imgWidth * xPerc / 100,
+ imgTop = imgHeight < containerDim.h ? (containerDim.h - imgHeight) / 2 : -imgHeight * yPerc / 100;
+
+ snapHandle.css({
+ top: yPerc + '%',
+ left: xPerc + '%'
+ })
+
+ viewer.currentImg.css({
+ left: imgLeft,
+ top: imgTop
+ })
+ }
+ }).init();
+
+
+ /*Add slide interaction to image*/
+ var imageSlider = viewer._imageSlider = new Slider(imageWrap, {
+ sliderId: viewer._viewerId,
+ onStart: function (e, position) {
+ if (!viewer.loaded) return false;
+ if (zooming) return;
+ var self = this;
+ snapSlider.onStart();
+ self.imgWidth = viewer.imageDim.w * viewer.zoomValue / 100;
+ self.imgHeight = viewer.imageDim.h * viewer.zoomValue / 100;
+
+ self.positions = [position, position];
+
+ self.startPosition = position;
+
+ //clear all animation frame and interval
+ viewer._clearFrames();
+
+ self.slideMomentumCheck = setInterval(function () {
+ if (!self.currentPos) return;
+ self.positions.shift();
+ self.positions.push({
+ x: self.currentPos.mx,
+ y: self.currentPos.my
+ })
+ }, 50);
+ },
+ onMove: function (e, position) {
+ if (zooming) return;
+ this.currentPos = position;
+
+ snapSlider.onMove(e, {
+ dx: -position.dx * snapSlider.width / this.imgWidth,
+ dy: -position.dy * snapSlider.height / this.imgHeight
+ });
+ },
+ onEnd: function () {
+ if (zooming) return;
+ var self = this;
+
+ var xDiff = this.positions[1].x - this.positions[0].x,
+ yDiff = this.positions[1].y - this.positions[0].y;
+
+ function momentum() {
+ if (step <= 60) {
+ self.sliderMomentumFrame = requestAnimationFrame(momentum);
+ }
+
+ positionX = positionX + easeOutQuart(step, xDiff / 3, -xDiff / 3, 60);
+ positionY = positionY + easeOutQuart(step, yDiff / 3, -yDiff / 3, 60)
+
+
+ snapSlider.onMove(null, {
+ dx: -((positionX) * snapSlider.width / self.imgWidth),
+ dy: -((positionY) * snapSlider.height / self.imgHeight)
+ });
+ step++;
+ }
+
+ if (Math.abs(xDiff) > 30 || Math.abs(yDiff) > 30) {
+ var step = 1,
+ positionX = self.currentPos.dx,
+ positionY = self.currentPos.dy;
+
+ momentum();
+ }
+ }
+ }).init();
+
+
+ /*Add zoom interation in mouse wheel*/
+ var changedDelta = 0;
+ imageWrap.on("mousewheel" + eventSuffix + " DOMMouseScroll" + eventSuffix, function (e) {
+ if(!options.zoomOnMouseWheel) return;
+
+ if (!viewer.loaded) return;
+
+
+ //clear all animation frame and interval
+ viewer._clearFrames();
+
+ // cross-browser wheel delta
+ var delta = Math.max(-1, Math.min(1, (e.originalEvent.wheelDelta || -e.originalEvent.detail))),
+ zoomValue = viewer.zoomValue * (100 + delta * ZOOM_CONSTANT) / 100;
+
+ if(!(zoomValue >= 100 && zoomValue <= options.maxZoom)){
+ changedDelta += Math.abs(delta);
+ }
+ else{
+ changedDelta = 0;
+ }
+
+ if(changedDelta > MOUSE_WHEEL_COUNT) return;
+
+ e.preventDefault();
+
+ var contOffset = container.offset(),
+ x = (e.pageX || e.originalEvent.pageX) - contOffset.left,
+ y = (e.pageY || e.originalEvent.pageY) - contOffset.top;
+
+
+
+ viewer.zoom(zoomValue, {
+ x: x,
+ y: y
+ });
+
+ //show the snap viewer
+ showSnapView();
+ });
+
+
+ //apply pinch and zoom feature
+ imageWrap.on('touchstart' + eventSuffix, function (estart) {
+ if (!viewer.loaded) return;
+ var touch0 = estart.originalEvent.touches[0],
+ touch1 = estart.originalEvent.touches[1];
+
+ if (!(touch0 && touch1)) {
+ return;
+ }
+
+
+ zooming = true;
+
+ var contOffset = container.offset();
+
+ var startdist = Math.sqrt(Math.pow(touch1.pageX - touch0.pageX, 2) + Math.pow(touch1.pageY - touch0.pageY, 2)),
+ startZoom = viewer.zoomValue,
+ center = {
+ x: ((touch1.pageX + touch0.pageX) / 2) - contOffset.left,
+ y: ((touch1.pageY + touch0.pageY) / 2) - contOffset.top
+ }
+
+ var moveListener = function (emove) {
+ emove.preventDefault();
+
+ var touch0 = emove.originalEvent.touches[0],
+ touch1 = emove.originalEvent.touches[1],
+ newDist = Math.sqrt(Math.pow(touch1.pageX - touch0.pageX, 2) + Math.pow(touch1.pageY - touch0.pageY, 2)),
+ zoomValue = startZoom + (newDist - startdist) / 2;
+
+ viewer.zoom(zoomValue, center);
+ };
+
+ var endListener = function () {
+ $document.off('touchmove', moveListener);
+ $document.off('touchend', endListener);
+ zooming = false;
+ };
+
+ $document.on('touchmove', moveListener);
+ $document.on('touchend', endListener);
+
+ });
+
+
+ //handle double tap for zoom in and zoom out
+ var touchtime = 0,
+ point;
+ imageWrap.on('click' + eventSuffix, function (e) {
+ if (touchtime == 0) {
+ touchtime = Date.now();
+ point = {
+ x: e.pageX,
+ y: e.pageY
+ };
+ } else {
+ if ((Date.now() - touchtime) < 500 && Math.abs(e.pageX - point.x) < 50 && Math.abs(e.pageY - point.y) < 50) {
+ if (viewer.zoomValue == options.zoomValue) {
+ viewer.zoom(200)
+ } else {
+ viewer.resetZoom()
+ }
+ touchtime = 0;
+ } else {
+ touchtime = 0;
+ }
+ }
+ });
+
+ //zoom in zoom out using zoom handle
+ var slider = viewer.snapView.find('.iv-zoom-slider');
+ var zoomSlider = new Slider(slider, {
+ sliderId: viewer._viewerId,
+ onStart: function (eStart) {
+
+ if (!viewer.loaded) return false;
+
+ this.leftOffset = slider.offset().left;
+ this.handleWidth = viewer.zoomHandle.width();
+ this.onMove(eStart);
+
+ },
+ onMove: function (e, position) {
+ var newLeft = (e.pageX || e.originalEvent.touches[0].pageX) - this.leftOffset - this.handleWidth / 2;
+
+ newLeft = Math.max(0, newLeft);
+ newLeft = Math.min(viewer._zoomSliderLength, newLeft);
+
+ var zoomValue = 100 + (options.maxZoom - 100) * newLeft / viewer._zoomSliderLength;
+
+ viewer.zoom(zoomValue);
+ }
+ }).init();
+
+
+ //display snapView on interaction
+ var snapViewTimeout, snapViewVisible;
+
+ function showSnapView(noTimeout) {
+ if(!options.snapView) return;
+
+ if (snapViewVisible || viewer.zoomValue <= 100 || !viewer.loaded) return;
+ clearTimeout(snapViewTimeout);
+ snapViewVisible = true;
+ viewer.snapView.css('opacity', 1);
+ if (!noTimeout) {
+ snapViewTimeout = setTimeout(function () {
+ viewer.snapView.css('opacity', 0);
+ snapViewVisible = false;
+ }, 4000);
+ }
+ }
+
+ imageWrap.on('touchmove' + eventSuffix + ' mousemove' + eventSuffix, function () {
+ showSnapView();
+ });
+
+ var snapEventsCallback = {};
+ snapEventsCallback['mouseenter' + eventSuffix + ' touchstart' + eventSuffix] = function () {
+ snapViewVisible = false;
+ showSnapView(true);
+ };
+
+ snapEventsCallback['mouseleave' + eventSuffix + ' touchend' + eventSuffix] = function () {
+ snapViewVisible = false;
+ showSnapView();
+ };
+
+ viewer.snapView.on(snapEventsCallback);
+
+
+ //calculate elments size on window resize
+ if (options.refreshOnResize) $window.on('resize' + eventSuffix, function () {
+ viewer.refresh()
+ });
+
+ if (viewer._fullPage) {
+ //prevent scrolling the backside if container if fixed positioned
+ container.on('touchmove' + eventSuffix + ' mousewheel' + eventSuffix + ' DOMMouseScroll' + eventSuffix, function (e) {
+ e.preventDefault();
+ });
+
+ //assign event on close button
+ container.find('.iv-close').on('click' + eventSuffix, function () {
+ viewer.hide();
+ });
+ }
+ },
+
+ //method to zoom images
+ zoom: function (perc, point) {
+ perc = Math.round(Math.max(100, perc));
+ perc = Math.min(this.options.maxZoom, perc);
+
+ point = point || {
+ x: this.containerDim.w / 2,
+ y: this.containerDim.h / 2
+ };
+
+ var self = this,
+ maxZoom = this.options.maxZoom,
+ curPerc = this.zoomValue,
+ curImg = this.currentImg,
+ containerDim = this.containerDim,
+ curLeft = parseFloat(curImg.css('left')),
+ curTop = parseFloat(curImg.css('top'));
+
+ self._clearFrames();
+
+ var step = 0;
+
+ //calculate base top,left,bottom,right
+ var containerDim = self.containerDim,
+ imageDim = self.imageDim;
+ var baseLeft = (containerDim.w - imageDim.w) / 2,
+ baseTop = (containerDim.h - imageDim.h) / 2,
+ baseRight = containerDim.w - baseLeft,
+ baseBottom = containerDim.h - baseTop;
+
+ function zoom() {
+ step++;
+
+ if (step < 20) {
+ self._zoomFrame = requestAnimationFrame(zoom);
+ }
+
+ var tickZoom = easeOutQuart(step, curPerc, perc - curPerc, 20);
+
+
+ var ratio = tickZoom / curPerc,
+ imgWidth = self.imageDim.w * tickZoom / 100,
+ imgHeight = self.imageDim.h * tickZoom / 100,
+ newLeft = -((point.x - curLeft) * ratio - point.x),
+ newTop = -((point.y - curTop) * ratio - point.y);
+
+ //fix for left and top
+ newLeft = Math.min(newLeft, baseLeft);
+ newTop = Math.min(newTop, baseTop);
+
+ //fix for right and bottom
+ if((newLeft + imgWidth) < baseRight){
+ newLeft = baseRight - imgWidth; //newLeft - (newLeft + imgWidth - baseRight)
+ }
+
+ if((newTop + imgHeight) < baseBottom){
+ newTop = baseBottom - imgHeight; //newTop + (newTop + imgHeight - baseBottom)
+ }
+
+
+ curImg.css({
+ height: imgHeight + 'px',
+ width: imgWidth + 'px',
+ left: newLeft + 'px',
+ top: newTop + 'px'
+ });
+
+ self.zoomValue = tickZoom;
+
+ self._resizeHandle(imgWidth, imgHeight, newLeft, newTop);
+
+ //update zoom handle position
+ self.zoomHandle.css('left', ((tickZoom - 100) * self._zoomSliderLength) / (maxZoom - 100) + 'px');
+ }
+
+ zoom();
+ },
+ _clearFrames: function () {
+ clearInterval(this._imageSlider.slideMomentumCheck);
+ cancelAnimationFrame(this._imageSlider.sliderMomentumFrame);
+ cancelAnimationFrame(this._zoomFrame)
+ },
+ resetZoom: function () {
+ this.zoom(this.options.zoomValue);
+ },
+ //calculate dimensions of image, container and reset the image
+ _calculateDimensions: function () {
+ //calculate content width of image and snap image
+ var self = this,
+ curImg = self.currentImg,
+ container = self.container,
+ snapView = self.snapView,
+ imageWidth = curImg.width(),
+ imageHeight = curImg.height(),
+ contWidth = container.width(),
+ contHeight = container.height(),
+ snapViewWidth = snapView.innerWidth(),
+ snapViewHeight = snapView.innerHeight();
+
+ //set the container dimension
+ self.containerDim = {
+ w: contWidth,
+ h: contHeight
+ }
+
+ //set the image dimension
+ var imgWidth, imgHeight, ratio = imageWidth / imageHeight;
+
+ imgWidth = (imageWidth > imageHeight && contHeight >= contWidth) || ratio * contHeight > contWidth ? contWidth : ratio * contHeight;
+
+ imgHeight = imgWidth / ratio;
+
+ self.imageDim = {
+ w: imgWidth,
+ h: imgHeight
+ }
+
+ //reset image position and zoom
+ curImg.css({
+ width: imgWidth + 'px',
+ height: imgHeight + 'px',
+ left: (contWidth - imgWidth) / 2 + 'px',
+ top: (contHeight - imgHeight) / 2 + 'px',
+ 'max-width': 'none',
+ 'max-height': 'none'
+ });
+
+ //set the snap Image dimension
+ var snapWidth = imgWidth > imgHeight ? snapViewWidth : imgWidth * snapViewHeight / imgHeight,
+ snapHeight = imgHeight > imgWidth ? snapViewHeight : imgHeight * snapViewWidth / imgWidth;
+
+ self.snapImageDim = {
+ w: snapWidth,
+ h: snapHeight
+ }
+
+ self.snapImg.css({
+ width: snapWidth,
+ height: snapHeight
+ });
+
+ //calculate zoom slider area
+ self._zoomSliderLength = snapViewWidth - self.zoomHandle.outerWidth();
+
+ },
+ refresh: function () {
+ if (!this.loaded) return;
+ this._calculateDimensions();
+ this.resetZoom();
+ },
+ _resizeHandle: function (imgWidth, imgHeight, imgLeft, imgTop) {
+ var curImg = this.currentImg,
+ imageWidth = imgWidth || this.imageDim.w * this.zoomValue / 100,
+ imageHeight = imgHeight || this.imageDim.h * this.zoomValue / 100,
+ left = Math.max(-(imgLeft || parseFloat(curImg.css('left'))) * 100 / imageWidth, 0),
+ top = Math.max(-(imgTop || parseFloat(curImg.css('top'))) * 100 / imageHeight, 0),
+ handleWidth = Math.min(this.containerDim.w * 100 / imageWidth, 100),
+ handleHeight = Math.min(this.containerDim.h * 100 / imageHeight, 100);
+
+
+ this.snapHandle.css({
+ top: top + '%',
+ left: left + '%',
+ width: handleWidth + '%',
+ height: handleHeight + '%'
+ });
+ },
+ show: function (image, hiResImg) {
+ if (this._fullPage) {
+ this.container.show();
+ if (image) this.load(image, hiResImg);
+ }
+ },
+ hide: function () {
+ if (this._fullPage) {
+ this.container.hide();
+ }
+ },
+ options: function (key, value) {
+ if (!value) return this.options[key];
+
+ this.options[key] = value;
+ },
+ destroy: function (key, value) {
+ var eventSuffix = '.' + this._viewerId;
+ if (this._fullPage) {
+ container.off(eventSuffix);
+ container.find('[class^="iv"]').off(eventSuffix);
+ } else {
+ this.container.remove('[class^="iv"]');
+ }
+ $window.off(eventSuffix);
+ return null;
+ },
+ load: function (image, hiResImg) {
+ var self = this,
+ container = this.container;
+
+ container.find('.iv-snap-image,.iv-large-image').remove();
+ var snapImageWrap = this.container.find('.iv-snap-image-wrap');
+ snapImageWrap.prepend('
');
+ this.imageWrap.prepend('');
+
+ if (hiResImg) {
+ this.imageWrap.append('
')
+ }
+
+ var currentImg = this.currentImg = this.container.find('.iv-large-image');
+ this.snapImg = this.container.find('.iv-snap-image');
+ self.loaded = false;
+
+ //show loader
+ container.find('.iv-loader').show();
+ currentImg.hide();
+ self.snapImg.hide();
+
+ //refresh the view
+ function refreshView() {
+ self.loaded = true;
+ self.zoomValue = 100;
+
+ //reset zoom of images
+ currentImg.show();
+ self.snapImg.show();
+ self.refresh();
+ self.resetZoom();
+
+ //hide loader
+ container.find('.iv-loader').hide();
+ }
+
+ if (imageLoaded(currentImg[0])) {
+ refreshView();
+ } else {
+ $(currentImg[0]).on('load', refreshView);
+ }
+
+ }
+ }
+
+ ImageViewer.defaults = {
+ zoomValue: 100,
+ snapView: true,
+ maxZoom: 500,
+ refreshOnResize: true,
+ zoomOnMouseWheel : true
+ }
+
+ window.ImageViewer = function (container, options) {
+ var imgElm, imgSrc, hiResImg;
+ if (!(container && (typeof container == "string" || container instanceof Element || container[0] instanceof Element))) {
+ options = container;
+ container = $('#iv-container');
+ }
+
+ container = $(container);
+
+ if (container.is('img')) {
+ imgElm = container;
+ imgSrc = imgElm[0].src;
+ hiResImg = imgElm.attr('high-res-src') || imgElm.attr('data-high-res-src');
+ container = imgElm.wrap('').parent();
+ imgElm.css({
+ opacity: 0,
+ position: 'relative',
+ zIndex: -1
+ });
+ } else {
+ imgSrc = container.attr('src') || container.attr('data-src');
+ hiResImg = container.attr('high-res-src') || container.attr('data-high-res-src');
+ }
+
+
+ var viewer = new ImageViewer(container, options);
+ viewer._init();
+
+ if (imgSrc) viewer.load(imgSrc, hiResImg);
+
+ return viewer;
+ };
+
+
+ $.fn.ImageViewer = function (options) {
+ return this.each(function () {
+ var $this = $(this);
+ var viewer = window.ImageViewer($this, options);
+ $this.data('ImageViewer', viewer);
+ });
+ }
+
+}((window.jQuery), window, document));
\ No newline at end of file
diff --git a/muk_web_preview_image/static/src/js/preview_generator.js b/muk_web_preview_image/static/src/js/preview_generator.js
new file mode 100644
index 0000000..cf33bad
--- /dev/null
+++ b/muk_web_preview_image/static/src/js/preview_generator.js
@@ -0,0 +1,64 @@
+/**********************************************************************************
+*
+* Copyright (C) 2017 MuK IT GmbH
+*
+* This program is free software: you can redistribute it and/or modify
+* it under the terms of the GNU Affero General Public License as
+* published by the Free Software Foundation, either version 3 of the
+* License, or (at your option) any later version.
+*
+* This program is distributed in the hope that it will be useful,
+* but WITHOUT ANY WARRANTY; without even the implied warranty of
+* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+* GNU Affero General Public License for more details.
+*
+* You should have received a copy of the GNU Affero General Public License
+* along with this program. If not, see
+
\ No newline at end of file
diff --git a/muk_web_preview_image/template/assets.xml b/muk_web_preview_image/template/assets.xml
new file mode 100644
index 0000000..752b812
--- /dev/null
+++ b/muk_web_preview_image/template/assets.xml
@@ -0,0 +1,30 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
+ ![]()
+
+