/* @licstart The following is the entire license notice for the JavaScript code in this page. Copyright (C) 2013 neko259 The JavaScript code in this page is free software: you can redistribute it and/or modify it under the terms of the GNU General Public License (GNU GPL) as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version. The code is distributed WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU GPL for more details. As additional permission under GNU GPL version 3 section 7, you may distribute non-source (e.g., minimized or compacted) forms of that code without the copy of the GNU GPL normally required by section 4, provided you include this license notice and a URL through which recipients can access the Corresponding Source. @licend The above is the entire license notice for the JavaScript code in this page. */ var IMAGE_POPUP_MARGIN = 10; var IMAGE_VIEWERS = [ ['simple', new SimpleImageViewer()], ['popup', new PopupImageViewer()] ]; var FULL_IMG_CLASS = 'post-image-full'; var ATTR_SCALE = 'scale'; // Init image viewer var viewerName = $('body').attr('data-image-viewer'); var viewer = ImageViewer(); for (var i = 0; i < IMAGE_VIEWERS.length; i++) { var item = IMAGE_VIEWERS[i]; if (item[0] === viewerName) { viewer = item[1]; break; } } function getFullImageWidth(previewImage) { var full_img_w = previewImage.attr('data-width'); if (full_img_w == null) { full_img_w = previewImage[0].naturalWidth; } return full_img_w; } function getFullImageHeight(previewImage) { var full_img_h = previewImage.attr('data-height'); if (full_img_h == null) { full_img_h = previewImage[0].naturalHeight; } return full_img_h; } function ImageViewer() {} ImageViewer.prototype.view = function (post) {}; function SimpleImageViewer() {} SimpleImageViewer.prototype.view = function (post) { var images = post.find('img'); images.toggle(); // When we first enlarge an image, a full image needs to be created if (images.length == 1) { var thumb = images.first(); var width = getFullImageWidth(thumb); var height = getFullImageHeight(thumb); if (width == null || height == null) { width = '100%'; height = '100%'; } var parent = images.first().parent(); var link = parent.attr('href'); var fullImg = $('') .addClass(FULL_IMG_CLASS) .attr('src', link) .attr('width', width) .attr('height', height); parent.append(fullImg); } }; function PopupImageViewer() {} PopupImageViewer.prototype.view = function (post) { var el = post; var thumb_id = 'full' + el.find('img').attr('alt'); var existingPopups = $('#' + thumb_id); if (!existingPopups.length) { var imgElement = el.find('img'); var full_img_w = getFullImageWidth(imgElement); var full_img_h = getFullImageHeight(imgElement); var win = $(window); var win_w = win.width(); var win_h = win.height(); // New image size var w_scale = 1; var h_scale = 1; var freeWidth = win_w - 2 * IMAGE_POPUP_MARGIN; var freeHeight = win_h - 2 * IMAGE_POPUP_MARGIN; if (full_img_w > freeWidth) { w_scale = full_img_w / freeWidth; } if (full_img_h > freeHeight) { h_scale = full_img_h / freeHeight; } var scale = Math.max(w_scale, h_scale) var img_w = full_img_w / scale; var img_h = full_img_h / scale; var postNode = $(el); var img_pv = new Image(); var newImage = $(img_pv); newImage.addClass('img-full') .attr('id', thumb_id) .attr('src', postNode.attr('href')) .attr(ATTR_SCALE, scale) .css({ 'width': img_w, 'height': img_h, 'left': (win_w - img_w) / 2, 'top': ((win_h - img_h) / 2) }) .appendTo(postNode) //scaling preview .mousewheel(function(event, delta) { var cx = event.originalEvent.clientX; var cy = event.originalEvent.clientY; var scale = newImage.attr(ATTR_SCALE) / (delta > 0 ? 1.25 : 0.8); var oldWidth = newImage.width(); var oldHeight = newImage.height(); var newIW = full_img_w / scale; var newIH = full_img_h / scale; newImage.width(newIW); newImage.height(newIH); newImage.attr(ATTR_SCALE, scale); // Set position var oldPosition = newImage.position(); newImage.css({ left: parseInt(cx - (newIW/oldWidth) * (cx - parseInt(oldPosition.left, 10)), 10), top: parseInt(cy - (newIH/oldHeight) * (cy - parseInt(oldPosition.top, 10)), 10) }); return false; } ) .draggable({ addClasses: false, stack: '.img-full' }); } else { existingPopups.remove(); } }; function addImgPreview() { //keybind $(document).on('keyup.removepic', function(e) { if(e.which === 27) { $('.img-full').remove(); } }); $('body').on('click', '.thumb', function() { viewer.view($(this)); return false; }); }