/* * jQuery rg Image Viewer * * Version 1.4.2 * 07. february 2011 * * Copyright: * Rune Øllgaard Grønkjær * rune.gronkjaer.dk * * Developer * Rune Øllgaard Grønkjær * rune@gronkjaer.dk * * Created with jQuery v1.4.2 * Tested with jQuery v1.4.2 * ********************************** * Incorporated scripts * * Modal Window by Rune Grønkjær * http://jscripts.teasolutions.dk/plugins/rg.jQuery.modalWindow/rg.jQuery.ModalWindow.min.js * ********************************** * Plugin API: * * // Skal åbne et given billede ud fra dens ID * jQuery.fn.ivOpen = function (settings); * * // Skal åbne billedet før det valgte billede * jQuery('#selector').ivPrev(); * * // Skal åbne billedet efter det valgte billede * jQuery('#selector').ivNext(); * * // gets the imageViewer Controller * jQuery('#selector').ivc() * * // Gets the current image * jQuery('#selector').getRGIVElement(); * ********************************** * Image Viewer Controller API: * * //Showing the cover to hide the image * ivc.showCover(); * * //Hiding the cover revealing the image * ivc.hideCover(); * * //Deconstructs the imageViewer * ivc.deconstruct(); * * //Preloads one image * ivc.preLoadImage(imageUrl, onLoad, onError, onAbort); * ********************************** * Default settings: * * jQuery.imageViewerControl.defaultSettings = { * loopImages: true, * padding: '10px', * ajaxLoaderGFX: 'http://jscripts.teasolutions.dk/plugins/rg.jQuery.imageViewer/gfx/ajax-loader.gif', * ajaxLoaderWidth: '32px', * ajaxLoaderHeight: '32px', * arrowSpeed: 200, * arrowTopOffset: 0, * arrowOffset: 10, * next_background: 'url(http://jscripts.teasolutions.dk/plugins/rg.jQuery.imageViewer/gfx/next.png)', * nextWidth: 30, * nextHeight: 30, * prev_background: 'url(http://jscripts.teasolutions.dk/plugins/rg.jQuery.imageViewer/gfx/prev.png)', * prevWidth: 30, * prevHeight: 30, * close_background: 'url(http://jscripts.teasolutions.dk/plugins/rg.jQuery.imageViewer/gfx/close.png)', * closeWidth: 20, * closeHeight: 20, * closeTopOffset: 5, * closeRightOffset: 5, * alwaysShowNextAndPrev: false, * // Background specific * background: '#fff', * cornerGraphicSize: '20px', * cornerSize: 10, * corner_bl_background: 'url(http://jscripts.teasolutions.dk/plugins/rg.jQuery.imageViewer/gfx/Corner_BL.png)', * corner_br_background: 'url(http://jscripts.teasolutions.dk/plugins/rg.jQuery.imageViewer/gfx/Corner_BR.png)', * corner_tl_background: 'url(http://jscripts.teasolutions.dk/plugins/rg.jQuery.imageViewer/gfx/Corner_TL.png)', * corner_tr_background: 'url(http://jscripts.teasolutions.dk/plugins/rg.jQuery.imageViewer/gfx/Corner_TR.png)', * // Modal Window Settings START * backgroundOpacity: 0.7, * backgroundBackground: '#000', * noBackground: false, * enableModalScroll: false, * minDistanceToBrowserEdge: 20, * zIndex: 999, * animateTime: 750, * closeOnBlockClick: true, * fixedTop: null, * fixedLeft: null, * // * * All events have the Modal Window Control object passed as the first parameter * * The mwc grants access to all of the following: * * mwc.settings * * mwc.blockID * * mwc.modal * * mwc.modalContent * * mwc.block * * mwc.background * // * onOpen: function () { }, * onOpened: function () { }, * onClose: function () { }, * onClosed: function () { }, * onModalResize: null, * onModalResized: null * // Modal Window Settings END * }; * * ********************************** * Changelog: * * * * Version v1.0: * Created: 21. august 2010 * * * * Version v1.1: * Created: 8. september 2010 * Fixed bugs: * The cover flashes in several situations * The Loader gfx is only visible in a very short amount of time * The Next, prev and close arrows where hidden behind the cover * Additions: * A new alwaysShowNextAndPrev setting has been introduced * alwaysShowNextAndPrev makes it possible to show the next and prev arrows all the time instead of hiding them * Keyboard functions introduced. Right and left arrows to navigate to next and prev image. Escape to close the Image Viewer. Home and End keys to navigate to first and last image. * * * * Version v1.2: * Created: 13. september 2010 * Changed the way dependend scripts are loaded * * * * Version v1.2.1: * Created: 13. september 2010 * Fixed a bug with the close button * * * * Version v1.3: * Created: 19. september 2010 * Added bootstrap capability to the plugin. This way it * can be identified if the plugin have allready been loaded. * Tea.Utils is now being bootstrapped by it's Id, to verify that * it has not yet been loaded * * * * Version 1.3.1 * Created: 20. September 2010 * Bugfix to the new Bootstrapper system * Fixed a bug with z-index of different elements * * * * Version 1.4 * Created: 11. oktober 2010 * Fixed the way the padding setting is interpreted. Now it can be a normal css padding value * Added a new prevTopOffset and nextTopOffset setting that lets the user set a fixed top value for the prev and next arrows * * * * Version 1.4.1 * Created: 26. january 2011 * When only one image is selected the paging funtion is disabled now. * * * * Version 1.4.2 * Created: 07. february 2011 * Fixed a bug with infinite loops because of no var in for(var i = 0... WEIRD * */ /* ************************* - TEA NAMESPACE ************************* */ if (typeof Tea === 'undefined') { var Tea = {}; } /* ************************* - BOOTSTRAP INFORMATION ************************* */ if (!Tea.Bootstrap) { Tea.Bootstrap = {}; } if (!Tea.Bootstrap.registeredFiles) { Tea.Bootstrap.registeredFiles = []; } if (!Tea.Bootstrap.registeredFiles['347B64C1-B59C-4BD5-8630-FBA90B90C8BC']) { //Bootstrap check START Tea.Bootstrap.registeredFiles['347B64C1-B59C-4BD5-8630-FBA90B90C8BC'] = 'http://jscripts.teasolutions.dk/plugins/rg.jQuery.imageViewer/rg.jQuery.ImageViewer.min.js'; (function (jQuery) { /* * Constructor for the imageViewerControl class. * initiates the ImageViewer */ jQuery.imageViewerControl = function (images, settings) { var ivc = this; /* * Initializes the plugin */ ivc.init = function () { ivc.loadSettings(settings); // The onOpen event is fired ivc.settings.onOpen(ivc); ivc.images = images; ivc.createInitialHTML(); ivc.prepareImages(); }; /* * Load Settings */ ivc.loadSettings = function (settings) { /* * Readies a number of events to take good use of the Modal Window's * own events. This plugin has only few events of it's own, but uses * the Modal Window's events */ ivc.settings = jQuery.extend({}, jQuery.imageViewerControl.defaultSettings, settings); ivc.settings.loopImages = images.length > 1 ? ivc.settings.loopImages : false; ivc.settings.onMwOpened = ivc.settings.onOpened; ivc.settings.onOpened = ivc.mwOpened; ivc.settings.onMwClosed = ivc.settings.onClosed; ivc.settings.onClosed = ivc.mwClosed; ivc.settings.onMwClose = ivc.settings.onClose; ivc.settings.onClose = ivc.mwClose; ivc.settings.onModalResize = function () { ivc.showCover(function () { ivc.resize(ivc.currentImage); }); }; ivc.settings.onModalResized = function (mwc, noAnimate) { ivc.resized(ivc.currentImage, noAnimate); }; }; /* * Runs through the images to add information to them */ ivc.prepareImages = function () { //Bind an onClick event the all images ivc.images.click(ivc.openImageViewer); //Giving all images an instance of the imageViewerControl ivc.images.data('ivc', ivc); //All images get a specific class ivc.images.addClass('rgivcEle'); //Loop images for (var i = 0; i < ivc.images.length; i++) { var image = jQuery(ivc.images[i]), prev = null, next = null, prevIndex = i - 1, nextIndex = i + 1; //Find prev image if (prevIndex < 0 && ivc.settings.loopImages) { prev = ivc.images[ivc.images.length - 1]; } else if (prevIndex > -1) { prev = ivc.images[prevIndex]; } //Find next image if (nextIndex === ivc.images.length && ivc.settings.loopImages) { next = ivc.images[0]; } else if (nextIndex < ivc.images.length) { next = ivc.images[nextIndex]; } //All images get an instance of the images before and after themselves image.data('rgivc_prev', jQuery(prev)); image.data('rgivc_next', jQuery(next)); } }; /* * Creates the html for the imageViewer * TODO: One html is made for each imageViewer created * this is not optimal as I would like there to be only one * The problem lies in the events binded to the html */ ivc.createInitialHTML = function () { var cursor = ivc.settings.loopImages ? 'pointer' : 'default', html = '', ivDOM = jQuery(html); ivDOM.appendTo('body'); ivc.ivDOM = ivDOM; ivc.ivDOM.data('ivc', ivc); ivDOM.find('div.rgivc_Prev').click(ivc.prevClick).hover(ivc.prevOver, ivc.prevOut); ivDOM.find('div.rgivc_Next').click(ivc.nextClick).hover(ivc.nextOver, ivc.nextOut); ivDOM.find('div.rgivc_Close').click(ivc.closeClick); }; /* * Resetting the html to it's original format */ ivc.resetHTML = function () { var padding = Tea.Utils.getCssPixelValues(ivc.settings.padding), width = parseInt(ivc.settings.ajaxLoaderWidth, 10), height = parseInt(ivc.settings.ajaxLoaderHeight, 10), widthAndPadding = width + padding.right + padding.left, heightAndPadding = height + padding.top + padding.bottom; ivc.ivDOM.css({ width: width, height: height }); ivc.ivDOM.find('img.rgivc_loader').attr('src', ivc.settings.ajaxLoaderGFX).css({ width: width, height: height }); var corners = ivc.ivDOM.children('div.rgivc_corner').css({ height: ivc.settings.cornerGraphicSize, width: ivc.settings.cornerGraphicSize }); corners.filter('div.rgivc_corner_bl').css('background', ivc.settings.corner_bl_background); corners.filter('div.rgivc_corner_br').css('background', ivc.settings.corner_br_background); corners.filter('div.rgivc_corner_tl').css('background', ivc.settings.corner_tl_background); corners.filter('div.rgivc_corner_tr').css('background', ivc.settings.corner_tr_background); ivc.ivDOM.children('div.rgivc_horisontal').css({ height: height, top: ivc.settings.cornerSize, background: ivc.settings.background }); ivc.ivDOM.children('div.rgivc_vertical').css({ width: width, left: ivc.settings.cornerSize, background: ivc.settings.background }); ivc.ivDOM.children('div.rgivc_ImageViewer_content').css({ top: padding.top, left: padding.left, width: width, height: height, display: 'none' }); ivc.ivDOM.find('img.rgivc_image').attr('src', '').css({ height: heightAndPadding, width: widthAndPadding }); ivc.ivDOM.find('div.rgivc_ImageViewer_content_cover').css({ width: width, height: height, background: ivc.settings.background, display: 'block' }); var prev = ivc.ivDOM.find('div.rgivc_Prev').css({ width: Math.floor(width / 2) }); var next = ivc.ivDOM.find('div.rgivc_Next').css({ width: Math.ceil(width / 2), left: Math.floor(width / 2) }); prev.add(next).css({ height: height }); var nextArr = ivc.ivDOM.find('div.rgivc_NextArrow').css({ width: ivc.settings.nextWidth, height: ivc.settings.nextHeight, marginTop: -(ivc.settings.nextHeight / 2), right: -ivc.settings.prevWidth, background: ivc.settings.next_background }); var prevArr = ivc.ivDOM.find('div.rgivc_PrevArrow').css({ width: ivc.settings.prevWidth, height: ivc.settings.prevHeight, marginTop: -(ivc.settings.prevHeight / 2), left: -ivc.settings.prevWidth, background: ivc.settings.prev_background }); if (ivc.settings.alwaysShowNextAndPrev) { prevArr.css({ left: ivc.settings.arrowOffset }); nextArr.css({ right: ivc.settings.arrowOffset }); } if (ivc.settings.nextTopOffset) { nextArr.css({ top: ivc.settings.nextTopOffset }); } if (ivc.settings.prevTopOffset) { prevArr.css({ top: ivc.settings.prevTopOffset }); } ivc.ivDOM.find('div.rgivc_Close').css({ width: ivc.settings.closeWidth, height: ivc.settings.closeHeight, top: ivc.settings.closeTopOffset, right: ivc.settings.closeRightOffset, display: 'none', background: ivc.settings.close_background }); }; /* * Opens this imageViewer */ ivc.openImageViewer = function (e) { jQuery(this).ivOpen(); e.preventDefault(); return; }; /* * Method for the prevClick event */ ivc.prevClick = function () { ivc.currentImage.ivPrev(); }; /* * Method for the nextClick event */ ivc.nextClick = function () { ivc.currentImage.ivNext(); }; /* * Method for the closeClick event */ ivc.closeClick = function () { ivc.ivDOM.closeModalWindow(); }; /* * Gets the currently viewed image */ ivc.getCurrentImage = function () { return ivc.ivDOM.find('img.rgivc_image'); }; /* * Deconstructs the imageViewer */ ivc.deconstruct = function () { ivc.unbindKeyBoardEvents(); //Hides the currents image behind the cover ivc.showCover(function () { //When the cover is up the imageViewer html is hidden ivc.ivDOM.parent().css('display', 'none'); //Resetting the html ivc.resetHTML(); //Deconstructs the Modal Window ivc.ivDOM.getModalWindowControl().deconstruct(); }); }; /* * Showing the cover to hide the image */ ivc.showCover = function (event) { var cover = ivc.ivDOM.find('div.rgivc_ImageViewer_content_cover'); if (cover.css("opacity") === 0 || cover.css("display") === "none") { cover.css({ display: 'block', opacity: 0 }).animate({ opacity: 1 }, ivc.settings.animateTime, event); } }; /* * Hiding the cover revealing the image */ ivc.hideCover = function (event) { var cover = ivc.ivDOM.find('div.rgivc_ImageViewer_content_cover'); if (cover.css("opacity") === 1 || cover.css("display") === "block") { cover.css({ display: 'block', opacity: 1 }).animate({ opacity: 0 }, ivc.settings.animateTime / 2, event); } }; /* * The method to call when the opened event of the modal window is fired */ ivc.mwOpened = function () { ivc.isOpenAndReady = true; ivc.settings.onMwOpened(ivc); ivc.currentImage.data("imageReady", true); ivc.imageReady(ivc.currentImage); }; /* * The method to call when the closed event of the modal window is fired */ ivc.mwClosed = function () { ivc.isOpenAndReady = false; ivc.settings.onMwClosed(ivc); }; /* * The method to call when the close event of the modal window is fired */ ivc.mwClose = function () { ivc.settings.onMwClose(ivc); ivc.deconstruct(); }; /* * Preloads one image */ ivc.preLoadImage = function (imageUrl, onLoad, onError, onAbort) { var image = new Image(); image.onload = onLoad; image.onerror = onError; image.onabort = onAbort; image.src = imageUrl; }; /* * When an image is loaded this method is called */ ivc.imageLoaded = function (image) { image.data('imageLoaded', true); ivc.imageReady(image); }; /* * When an image is loaded AND the Modal window have opened this method is called */ ivc.imageReady = function (image) { var imageUrl = image.attr('href'); var ivc = image.ivc(); //Checking if both the image is loaded and the modalwindow is opened and ready var test1 = ivc.isOpenAndReady, test2 = image.data('imageLoaded'), test3 = image.data('imageReady'); if (test1 && test2 && test3) { //Image is ready, and imageViewer is open window.setTimeout(function () { //Resizing the imageViewer ivc.resize(image); }, 0); //The large image is given the imageURL of the image to show var testBoth = ivc.ivDOM.find('img.rgivc_image_current').attr('src', imageUrl).css("zIndex", 170); var testCur = ivc.ivDOM.find('img.rgivc_image').toggleClass("rgivc_image_current").filter('img.rgivc_image_current').css("zIndex", 160).attr('src', ''); } }; /* * Calculates and sets the height and width of the imageViewer * then updating the size of the Modal Window */ ivc.resize = function (image) { var ivc = image.ivc(), mwc = ivc.ivDOM.getModalWindowControl(), animateTime = ivc.settings.animateTime / 2, //Gets the available space from the modal window modalCss = mwc.calculateModalCSS(); ivc.ivDOM.find('div.rgivc_ImageViewer_content').css({ display: 'block' }); //Using the current image and data from the Modal Window for calculating the new size of the imageViewer var padding = Tea.Utils.getCssPixelValues(ivc.settings.padding), //Size of the image modalContentHeight = image.data('rgivc_height'), modalContentWidth = image.data('rgivc_width'), //Size of the image including the padding on the imageViewer modalContentHeightAndPadding = modalContentHeight + padding.top + padding.bottom, modalContentWidthAndPadding = modalContentWidth + padding.left + padding.right, //The space available availableViewportHeight = modalCss.availableViewportHeight, availableViewportWidth = modalCss.availableViewportWidth, //A bool to see if the imageViewer is to large heightExceeded = (modalContentHeightAndPadding > availableViewportHeight), widthExceeded = (modalContentWidthAndPadding > availableViewportWidth), //Optimal size of the imageViewer calculatedModalHeight = modalContentHeightAndPadding, calculatedModalWidth = modalContentWidthAndPadding, //Size ratio of the imageViewer heightRatio = calculatedModalHeight / calculatedModalWidth, widthRatio = calculatedModalWidth / calculatedModalHeight; //Check to se if the height has been exeeded if (heightExceeded) { //setting the height to the maximum height avaiable calculatedModalHeight = availableViewportHeight; //Calculating a new width from the ratio calculatedModalWidth = widthRatio * calculatedModalHeight; //Calculating if the width now exeeds the available width widthExceeded = calculatedModalWidth > availableViewportWidth; } //Check to se if the width has been exeeded if (widthExceeded) { //setting the width to the maximum height avaiable calculatedModalWidth = availableViewportWidth; //Calculating a new height from the ratio calculatedModalHeight = heightRatio * calculatedModalWidth; } //Rounding the width and height calculatedModalWidth = Math.floor(calculatedModalWidth); calculatedModalHeight = Math.floor(calculatedModalHeight); //Calculating the height and width without padding var calculatedModalHeight_noPad = calculatedModalHeight - padding.top - padding.bottom, calculatedModalWidth_noPad = calculatedModalWidth - padding.left - padding.right; //Creating Css objects for the imageViewer DOM, Content and image var ivDOMCss = { width: calculatedModalWidth, height: calculatedModalHeight }, ivContentCss = { width: calculatedModalWidth_noPad, height: calculatedModalHeight_noPad }, ivImageCss = { width: calculatedModalWidth_noPad, height: calculatedModalHeight_noPad }; ivc.ivDOM.css(ivDOMCss); ivc.ivDOM.find('img.rgivc_image').css(ivImageCss); //Starting the animations to the new size ivc.ivDOM.find('div.rgivc_ImageViewer_content').animate(ivContentCss, animateTime); ivc.ivDOM.find('div.rgivc_ImageViewer_content_cover').animate(ivContentCss, animateTime); ivc.ivDOM.children('div.rgivc_horisontal').animate({ height: calculatedModalHeight - parseInt(ivc.settings.cornerSize, 10) * 2 }, animateTime); ivc.ivDOM.children('div.rgivc_vertical').animate({ width: calculatedModalWidth - parseInt(ivc.settings.cornerSize, 10) * 2 }, animateTime); //Repositioning the prev and next buttons ivc.ivDOM.find('div.rgivc_Next').animate({ width: Math.ceil(calculatedModalWidth / 2), left: Math.floor(calculatedModalWidth / 2), height: calculatedModalHeight_noPad, top: padding.top }, animateTime); ivc.ivDOM.find('div.rgivc_Prev').animate({ width: Math.floor(calculatedModalWidth / 2), height: calculatedModalHeight_noPad, top: padding.top }, animateTime); //Starting the Modal Window's resize animation //It will run along with the animations from the imageViewer ivc.ivDOM.updateModalWindow(null, true); }; /* * Fires when the resize of the imageViewer is done * Hides the cover and removes filter styles in IE browsers */ ivc.resized = function (image, noAnimate) { if (ivc.hasResized) { ivc.ivDOM.find('div.rgivc_Close').css('display', 'block'); } if (!noAnimate) { ivc.hideCover(function () { jQuery(this).css('display', 'none'); // Remove filter attribute to render the fonts correctly in IE if (this.style.filter) { try { this.style.removeAttribute('filter'); } catch (ex) { } } }); } ivc.hasResized = true; }; /* * Animation for the next buttons over event */ ivc.nextOver = function () { if (!ivc.settings.alwaysShowNextAndPrev) { ivc.ivDOM.find('div.rgivc_NextArrow').stop().animate({ right: ivc.settings.arrowOffset }, ivc.settings.arrowSpeed); } }; /* * Animation for the next buttons out event */ ivc.nextOut = function () { if (!ivc.settings.alwaysShowNextAndPrev) { ivc.ivDOM.find('div.rgivc_NextArrow').stop().animate({ right: -ivc.settings.nextWidth }, ivc.settings.arrowSpeed); } }; /* * Animation for the prev buttons over event */ ivc.prevOver = function () { if (!ivc.settings.alwaysShowNextAndPrev) { ivc.ivDOM.find('div.rgivc_PrevArrow').stop().animate({ left: ivc.settings.arrowOffset }, ivc.settings.arrowSpeed); } }; /* * Animation for the prev buttons out event */ ivc.prevOut = function () { if (!ivc.settings.alwaysShowNextAndPrev) { ivc.ivDOM.find('div.rgivc_PrevArrow').stop().animate({ left: -ivc.settings.prevWidth }, ivc.settings.arrowSpeed); } }; /* * */ ivc.toggleButtons = function () { var nextArrow = ivc.ivDOM.find('div.rgivc_NextArrow'), prevArrow = ivc.ivDOM.find('div.rgivc_PrevArrow'); if (!ivc.currentImage.ivGetNext()[0]) { nextArrow.css("display", "none"); } else { nextArrow.css("display", "block"); } if (!ivc.currentImage.ivGetPrev()[0]) { prevArrow.css("display", "none"); } else { prevArrow.css("display", "block"); } }; /* * */ ivc.bindKeyBoardEvents = function () { if (!ivc.eventsBound) { jQuery(document).bind("keyup", ivc.keyBoardClicked); ivc.bindKeyBoardEvent([37, 100], ivc.prevClick); ivc.bindKeyBoardEvent([39, 102], ivc.nextClick); ivc.bindKeyBoardEvent([27], ivc.closeClick); ivc.bindKeyBoardEvent([35], function () { ivc.images.last().click(); }); ivc.bindKeyBoardEvent([36], function () { ivc.images.first().click(); }); ivc.eventsBound = true; } }; ivc.unbindKeyBoardEvents = function () { if (ivc.eventsBound) { jQuery(document).unbind("keypress", ivc.keyBoardClicked); ivc.eventsBound = false; } }; /* * */ ivc.bindKeyBoardEvent = function (keys, fn) { //alert("bindKeyBoardEvent: " + ivc.ivcKeyBoardEvents); if (!ivc.ivcKeyBoardEvents) { ivc.ivcKeyBoardEvents = []; } for (var i = 0; i < keys.length; i++) { ivc.ivcKeyBoardEvents[keys[i]] = fn; } }; /* * */ ivc.keyBoardClicked = function (e) { //alert(ivc.ivcKeyBoardEvents + " && " + ivc.eventsBound); if (ivc.ivcKeyBoardEvents && ivc.eventsBound) { if (ivc.ivcKeyBoardEvents[e.which]) { ivc.ivcKeyBoardEvents[e.which](); e.preventDefault(); //e.stopPropagation(); //alert("preventDefault"); return; } } }; ivc.init(); }; /* * Default settings for the module. * Is used if the user does not specify the settings */ jQuery.imageViewerControl.defaultSettings = { loopImages: true, padding: '10px', ajaxLoaderGFX: 'http://jscripts.teasolutions.dk/plugins/rg.jQuery.imageViewer/gfx/ajax-loader.gif', ajaxLoaderWidth: '32px', ajaxLoaderHeight: '32px', arrowSpeed: 200, arrowOffset: 10, next_background: 'url(http://jscripts.teasolutions.dk/plugins/rg.jQuery.imageViewer/gfx/next.png)', nextWidth: 30, nextHeight: 30, nextTopOffset: 0, prev_background: 'url(http://jscripts.teasolutions.dk/plugins/rg.jQuery.imageViewer/gfx/prev.png)', prevWidth: 30, prevHeight: 30, prevTopOffset: 0, close_background: 'url(http://jscripts.teasolutions.dk/plugins/rg.jQuery.imageViewer/gfx/close.png)', closeWidth: 20, closeHeight: 20, closeTopOffset: 5, closeRightOffset: 5, alwaysShowNextAndPrev: false, /* * Background specific */ background: '#fff', cornerGraphicSize: '20px', cornerSize: 10, corner_bl_background: 'url(http://jscripts.teasolutions.dk/plugins/rg.jQuery.imageViewer/gfx/Corner_BL.png)', corner_br_background: 'url(http://jscripts.teasolutions.dk/plugins/rg.jQuery.imageViewer/gfx/Corner_BR.png)', corner_tl_background: 'url(http://jscripts.teasolutions.dk/plugins/rg.jQuery.imageViewer/gfx/Corner_TL.png)', corner_tr_background: 'url(http://jscripts.teasolutions.dk/plugins/rg.jQuery.imageViewer/gfx/Corner_TR.png)', /* * Modal Window Settings START */ backgroundOpacity: 0.7, backgroundBackground: '#000', noBackground: false, enableModalScroll: false, minDistanceToBrowserEdge: 20, zIndex: 999, animateTime: 500, closeOnBlockClick: true, fixedTop: null, fixedLeft: null, /* * All events have the Modal Window Control object passed as the first parameter * The mwc grants access to all of the following: * mwc.settings * mwc.blockID * mwc.modal * mwc.modalContent * mwc.block * mwc.background */ onOpen: function () { }, onOpened: function () { }, onClose: function () { }, onClosed: function () { }, onModalResize: null, onModalResized: null /* * Modal Window Settings END */ }; /* * Klargør LightView. Her skal der vælges de billeder i den sortering, * som de skal benyttes i galleriet */ jQuery.fn.ivPrepare = function (settings) { var ivc = new jQuery.imageViewerControl(this, settings); return this; }; /* * Skal åbne et given billede ud fra dens ID */ jQuery.fn.ivOpen = function (settings) { var image = jQuery(this).getRGIVElement(), imageUrl = image.attr('href'), ivc = image.ivc(); if (!ivc) { return; } //Sets the current image ivc.currentImage = image; ivc.toggleButtons(); image.data('imageReady', false); if (!image.data('imageLoaded')) { //Starts the preload of the current image ivc.preLoadImage(imageUrl, function () { //Setting the height and with of the current image image.data('rgivc_height', this.height); image.data('rgivc_width', this.width); //Telling the imageViewer that the image is done loading ivc.imageLoaded(image); }, function () { alert('error: Image not loaded - ' + imageUrl); }, function () { alert('abort: Image load aborted - ' + imageUrl); }); } //Checking to se if the imageViewer is allreade open and ready if (ivc.isOpenAndReady) { //ImageViewer allready open. Change the image //Showing the cover to hide the image ivc.showCover(function () { //Hiding the current image //ivc.getCurrentImage().css('display', 'none'); ivc.currentImage.data('imageReady', true); //Telling the imageViewer that it is ready ivc.imageReady(image); }); } else { //Open the lightview and display the image ivc.resetHTML(); //Opening a new modal Window ivc.ivDOM.openModalWindow(ivc.settings); } ivc.bindKeyBoardEvents(); return this; }; /* * Skal åbne billedet efter det valgte billede */ jQuery.fn.ivNext = function () { jQuery(this).ivGetNext().ivOpen(); return this; }; /* * Skal åbne billedet før det valgte billede */ jQuery.fn.ivPrev = function () { jQuery(this).ivGetPrev().ivOpen(); return this; }; /* * returnerer det næste billede */ jQuery.fn.ivGetNext = function () { return jQuery(this).data('rgivc_next'); }; /* * returnerer det forrige billede */ jQuery.fn.ivGetPrev = function () { return jQuery(this).data('rgivc_prev'); }; /* * gets the imageViewer Controller */ jQuery.fn.ivc = function () { var jQEle = jQuery(this), ivc = jQuery(this).data('ivc'); if (!ivc) { ivc = jQEle.closest('div.rgivc_ImageViewer').data('ivc'); } return ivc; }; /* * Gets the current image */ jQuery.fn.getRGIVElement = function () { var rgivcEle = jQuery(this); if (!rgivcEle.is('.rgivcEle')) { rgivcEle = rgivcEle.closest('.rgivcEle'); } return rgivcEle; }; /* * This plugin depends on the following script files */ jQuery.imageViewerControl.scriptDependencies = [{ key: '29339A13-96B3-4FD0-83B5-4C5D915ED9D2', uri: 'http://jscripts.teasolutions.dk/plugins/rg.jQuery.modalWindow/rg.jQuery.ModalWindow.min.js' }]; /* * Imports the scriptfiles this plugin depends on */ bootstrapScripts = function () { for (var i = 0; i < jQuery.imageViewerControl.scriptDependencies.length; i++) { if (!Tea.Bootstrap.registeredFiles[jQuery.imageViewerControl.scriptDependencies[i].key]) { jQuery.getScript(jQuery.imageViewerControl.scriptDependencies[i].uri); } } }; bootstrapScripts(); })(jQuery); } //Bootstrap check END