--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/web/rsln/res/metadataplayer/test/interface 1.2/source/imagebox.js Fri Feb 18 19:37:15 2011 +0100
@@ -0,0 +1,595 @@
+/**
+ * Interface Elements for jQuery
+ * ImageBox
+ *
+ * http://interface.eyecon.ro
+ *
+ * Copyright (c) 2006 Stefan Petre
+ * Dual licensed under the MIT (MIT-LICENSE.txt)
+ * and GPL (GPL-LICENSE.txt) licenses.
+ *
+ */
+
+/**
+ * This a jQuery equivalent for Lightbox2. Alternative to image popups that will display images in an overlay. All links that have attribute 'rel' starting with 'imagebox' and link to an image will display the image inside the page. Galleries can by build buy giving the value 'imagebox-galname' to attribute 'rel'. Attribute 'title' will be used as caption.
+ * Keyboard navigation:
+ * - next image: arrow right, page down, 'n' key, space
+ * - previous image: arrow left, page up, 'p' key, backspace
+ * - close: escape
+ *
+ * CSS
+ * #ImageBoxOverlay
+ * {
+ * background-color: #000;
+ * }
+ * #ImageBoxCaption
+ * {
+ * background-color: #F4F4EC;
+ * }
+ * #ImageBoxContainer
+ * {
+ * width: 250px;
+ * height: 250px;
+ * background-color: #F4F4EC;
+ * }
+ * #ImageBoxCaptionText
+ * {
+ * font-weight: bold;
+ * padding-bottom: 5px;
+ * font-size: 13px;
+ * color: #000;
+ * }
+ * #ImageBoxCaptionImages
+ * {
+ * margin: 0;
+ * }
+ * #ImageBoxNextImage
+ * {
+ * background-image: url(images/imagebox/spacer.gif);
+ * background-color: transparent;
+ * }
+ * #ImageBoxPrevImage
+ * {
+ * background-image: url(images/imagebox/spacer.gif);
+ * background-color: transparent;
+ * }
+ * #ImageBoxNextImage:hover
+ * {
+ * background-image: url(images/imagebox/next_image.jpg);
+ * background-repeat: no-repeat;
+ * background-position: right top;
+ * }
+ * #ImageBoxPrevImage:hover
+ * {
+ * background-image: url(images/imagebox/prev_image.jpg);
+ * background-repeat: no-repeat;
+ * background-position: left bottom;
+ * }
+ *
+ * @name Imagebox
+ * @description This a jQuery equivalent for Lightbox2. Alternative to image popups that will display images in an overlay. All links that have attribute 'rel' starting with 'imagebox' and link to an image will display the image inside the page. Galleries can by build buy giving the value 'imagebox-galname' to attribute 'rel'. Attribute 'title' will be used as caption.
+ * @param Hash hash A hash of parameters
+ * @option Integer border border width
+ * @option String loaderSRC path to loading image
+ * @option String closeHTML path to close overlay image
+ * @option Float overlayOpacity opacity for overlay
+ * @option String textImage when a galalry it is build then the iteration is displayed
+ * @option String textImageFrom when a galalry it is build then the iteration is displayed
+ * @option Integer fadeDuration fade duration in miliseconds
+ *
+ * @type jQuery
+ * @cat Plugins/Interface
+ * @author Stefan Petre
+ */
+jQuery.ImageBox = {
+ options : {
+ border : 10,
+ loaderSRC : 'images/loading.gif',
+ closeHTML : '<img src="images/close.jpg" />',
+ overlayOpacity : 0.8,
+ textImage : 'Showing image',
+ textImageFrom : 'from',
+ fadeDuration : 400
+ },
+ imageLoaded : false,
+ firstResize : false,
+ currentRel : null,
+ animationInProgress : false,
+ opened : false,
+
+ keyPressed : function(event)
+ {
+ if(!jQuery.ImageBox.opened || jQuery.ImageBox.animationInProgress)
+ return;
+ var pressedKey = event.charCode || event.keyCode || -1;
+ switch (pressedKey)
+ {
+ //end
+ case 35:
+ if (jQuery.ImageBox.currentRel)
+ jQuery.ImageBox.start(null, jQuery('a[@rel=' + jQuery.ImageBox.currentRel+ ']:last').get(0));
+ break;
+ //home
+ case 36:
+ if (jQuery.ImageBox.currentRel)
+ jQuery.ImageBox.start(null, jQuery('a[@rel=' + jQuery.ImageBox.currentRel+ ']:first').get(0));
+ break;
+ //left
+ case 37:
+ //backspace
+ case 8:
+ //page up
+ case 33:
+ //p
+ case 80:
+ case 112:
+ var prevEl = jQuery('#ImageBoxPrevImage');
+ if(prevEl.get(0).onclick != null) {
+ prevEl.get(0).onclick.apply(prevEl.get(0));
+ }
+ break;
+ //up
+ case 38:
+ break;
+ //right
+ case 39:
+ //page down
+ case 34:
+ //space
+ case 32:
+ //n
+ case 110:
+ case 78:
+ var nextEl = jQuery('#ImageBoxNextImage');
+ if(nextEl.get(0).onclick != null) {
+ nextEl.get(0).onclick.apply(nextEl.get(0));
+ }
+ break;
+ //down;
+ case 40:
+ break;
+ //escape
+ case 27:
+ jQuery.ImageBox.hideImage();
+ break;
+ }
+ },
+
+ init : function(options)
+ {
+ if (options)
+ jQuery.extend(jQuery.ImageBox.options, options);
+ if (window.event) {
+ jQuery('body',document).bind('keyup', jQuery.ImageBox.keyPressed);
+ } else {
+ jQuery(document).bind('keyup', jQuery.ImageBox.keyPressed);
+ }
+ jQuery('a').each(
+ function()
+ {
+ el = jQuery(this);
+ relAttr = el.attr('rel')||'';
+ hrefAttr = el.attr('href')||'';
+ imageTypes = /\.jpg|\.jpeg|\.png|\.gif|\.bmp/g;
+ if (hrefAttr.toLowerCase().match(imageTypes) != null && relAttr.toLowerCase().indexOf('imagebox') == 0) {
+ el.bind('click', jQuery.ImageBox.start);
+ }
+ }
+ );
+ if (jQuery.browser.msie) {
+ iframe = document.createElement('iframe');
+ jQuery(iframe)
+ .attr(
+ {
+ id : 'ImageBoxIframe',
+ src : 'javascript:false;',
+ frameborder : 'no',
+ scrolling : 'no'
+ }
+ )
+ .css (
+ {
+ display : 'none',
+ position : 'absolute',
+ top : '0',
+ left : '0',
+ filter : 'progid:DXImageTransform.Microsoft.Alpha(opacity=0)'
+ }
+ );
+ jQuery('body').append(iframe);
+ }
+
+ overlay = document.createElement('div');
+ jQuery(overlay)
+ .attr('id', 'ImageBoxOverlay')
+ .css(
+ {
+ position : 'absolute',
+ display : 'none',
+ top : '0',
+ left : '0',
+ opacity : 0
+ }
+ )
+ .append(document.createTextNode(' '))
+ .bind('click', jQuery.ImageBox.hideImage);
+
+ captionText = document.createElement('div');
+ jQuery(captionText)
+ .attr('id', 'ImageBoxCaptionText')
+ .css(
+ {
+ paddingLeft : jQuery.ImageBox.options.border + 'px'
+ }
+ )
+ .append(document.createTextNode(' '));
+
+ captionImages = document.createElement('div');
+ jQuery(captionImages)
+ .attr('id', 'ImageBoxCaptionImages')
+ .css(
+ {
+ paddingLeft : jQuery.ImageBox.options.border + 'px',
+ paddingBottom : jQuery.ImageBox.options.border + 'px'
+ }
+ )
+ .append(document.createTextNode(' '));
+
+ closeEl = document.createElement('a');
+ jQuery(closeEl)
+ .attr(
+ {
+ id : 'ImageBoxClose',
+ href : '#'
+ }
+ )
+ .css(
+ {
+ position : 'absolute',
+ right : jQuery.ImageBox.options.border + 'px',
+ top : '0'
+ }
+ )
+ .append(jQuery.ImageBox.options.closeHTML)
+ .bind('click', jQuery.ImageBox.hideImage);
+
+ captionEl = document.createElement('div');
+ jQuery(captionEl)
+ .attr('id', 'ImageBoxCaption')
+ .css(
+ {
+ position : 'relative',
+ textAlign : 'left',
+ margin : '0 auto',
+ zIndex : 1
+ }
+ )
+ .append(captionText)
+ .append(captionImages)
+ .append(closeEl);
+
+ loader = document.createElement('img');
+ loader.src = jQuery.ImageBox.options.loaderSRC;
+ jQuery(loader)
+ .attr('id', 'ImageBoxLoader')
+ .css(
+ {
+ position : 'absolute'
+ }
+ );
+
+ prevImage = document.createElement('a');
+ jQuery(prevImage)
+ .attr(
+ {
+ id : 'ImageBoxPrevImage',
+ href : '#'
+ }
+ )
+ .css(
+ {
+ position : 'absolute',
+ display : 'none',
+ overflow : 'hidden',
+ textDecoration : 'none'
+ }
+ )
+ .append(document.createTextNode(' '));
+
+ nextImage = document.createElement('a');
+ jQuery(nextImage)
+ .attr(
+ {
+ id : 'ImageBoxNextImage',
+ href : '#'
+ }
+ )
+ .css(
+ {
+ position : 'absolute',
+ overflow : 'hidden',
+ textDecoration : 'none'
+ }
+ )
+ .append(document.createTextNode(' '));
+
+ container = document.createElement('div');
+ jQuery(container)
+ .attr('id', 'ImageBoxContainer')
+ .css(
+ {
+ display : 'none',
+ position : 'relative',
+ overflow : 'hidden',
+ textAlign : 'left',
+ margin : '0 auto',
+ top : '0',
+ left : '0',
+ zIndex : 2
+ }
+ )
+ .append([loader, prevImage, nextImage]);
+
+ outerContainer = document.createElement('div');
+ jQuery(outerContainer)
+ .attr('id', 'ImageBoxOuterContainer')
+ .css(
+ {
+ display : 'none',
+ position : 'absolute',
+ overflow : 'hidden',
+ top : '0',
+ left : '0',
+ textAlign : 'center',
+ backgroundColor : 'transparent',
+ lineHeigt : '0'
+ }
+ )
+ .append([container,captionEl]);
+
+ jQuery('body')
+ .append(overlay)
+ .append(outerContainer);
+ },
+
+ start : function(e, elm)
+ {
+ el = elm ? jQuery(elm) : jQuery(this);
+ linkRel = el.attr('rel');
+ var totalImages, iteration, prevImage, nextImage;
+ if (linkRel != 'imagebox') {
+ jQuery.ImageBox.currentRel = linkRel;
+ gallery = jQuery('a[@rel=' + linkRel + ']');
+ totalImages = gallery.size();
+ iteration = gallery.index(elm ? elm : this);
+ prevImage = gallery.get(iteration - 1);
+ nextImage = gallery.get(iteration + 1);
+ }
+ imageSrc = el.attr('href');
+ captionText = el.attr('title');
+ pageSize = jQuery.iUtil.getScroll();
+ overlay = jQuery('#ImageBoxOverlay');
+ if (!jQuery.ImageBox.opened) {
+ jQuery.ImageBox.opened = true;
+ if (jQuery.browser.msie) {
+ jQuery('#ImageBoxIframe')
+ .css ('height', Math.max(pageSize.ih,pageSize.h) + 'px')
+ .css ('width', Math.max(pageSize.iw,pageSize.w) + 'px')
+ .show();
+ }
+ overlay
+ .css ('height', Math.max(pageSize.ih,pageSize.h) + 'px')
+ .css ('width', Math.max(pageSize.iw,pageSize.w) + 'px')
+ .show()
+ .fadeTo(
+ 300,
+ jQuery.ImageBox.options.overlayOpacity,
+ function()
+ {
+ jQuery.ImageBox.loadImage(
+ imageSrc,
+ captionText,
+ pageSize,
+ totalImages,
+ iteration,
+ prevImage,
+ nextImage
+ );
+ }
+ );
+ jQuery('#ImageBoxOuterContainer').css ('width', Math.max(pageSize.iw,pageSize.w) + 'px');
+ } else {
+ jQuery('#ImageBoxPrevImage').get(0).onclick = null;
+ jQuery('#ImageBoxNextImage').get(0).onclick = null;
+ jQuery.ImageBox.loadImage(
+ imageSrc,
+ captionText,
+ pageSize,
+ totalImages,
+ iteration,
+ prevImage,
+ nextImage
+ );
+ }
+ return false;
+ },
+
+ loadImage : function(imageSrc, captiontext, pageSize, totalImages, iteration, prevImage, nextImage)
+ {
+ jQuery('#ImageBoxCurrentImage').remove();
+ prevImageEl = jQuery('#ImageBoxPrevImage');
+ prevImageEl.hide();
+ nextImageEl = jQuery('#ImageBoxNextImage');
+ nextImageEl.hide();
+ loader = jQuery('#ImageBoxLoader');
+ container = jQuery('#ImageBoxContainer');
+ outerContainer = jQuery('#ImageBoxOuterContainer');
+ captionEl = jQuery('#ImageBoxCaption').css('visibility', 'hidden');
+ jQuery('#ImageBoxCaptionText').html(captionText);
+ jQuery.ImageBox.animationInProgress = true;
+ if (totalImages)
+ jQuery('#ImageBoxCaptionImages').html(
+ jQuery.ImageBox.options.textImage
+ + ' ' + (iteration + 1) + ' '
+ + jQuery.ImageBox.options.textImageFrom
+ + ' ' + totalImages
+ );
+ if (prevImage) {
+ prevImageEl.get(0).onclick = function()
+ {
+ this.blur();
+ jQuery.ImageBox.start(null, prevImage);
+ return false;
+ };
+ }
+ if (nextImage) {
+ nextImageEl.get(0).onclick =function()
+ {
+ this.blur();
+ jQuery.ImageBox.start(null, nextImage);
+ return false;
+ };
+ }
+ loader.show();
+ containerSize = jQuery.iUtil.getSize(container.get(0));
+ containerW = Math.max(containerSize.wb, loader.get(0).width + jQuery.ImageBox.options.border * 2);
+ containerH = Math.max(containerSize.hb, loader.get(0).height + jQuery.ImageBox.options.border * 2);
+ loader
+ .css(
+ {
+ left : (containerW - loader.get(0).width)/2 + 'px',
+ top : (containerH - loader.get(0).height)/2 + 'px'
+ }
+ );
+ container
+ .css(
+ {
+ width : containerW + 'px',
+ height : containerH + 'px'
+ }
+ )
+ .show();
+ clientSize = jQuery.iUtil.getClient();
+ outerContainer
+ .css('top', pageSize.t + (clientSize.h / 15) + 'px');
+ if (outerContainer.css('display') == 'none') {
+ outerContainer
+ .show()
+ .fadeIn(
+ jQuery.ImageBox.options.fadeDuration
+ );
+ }
+ imageEl = new Image;
+ jQuery(imageEl)
+ .attr('id', 'ImageBoxCurrentImage')
+ .bind('load',
+ function()
+ {
+ containerW = imageEl.width + jQuery.ImageBox.options.border * 2;
+ containerH = imageEl.height + jQuery.ImageBox.options.border * 2;
+ loader.hide();
+ container.animate(
+ {
+ height : containerH
+ },
+ containerSize.hb != containerH ? jQuery.ImageBox.options.fadeDuration : 1,
+ function()
+ {
+ container.animate(
+ {
+ width : containerW
+ },
+ containerSize.wb != containerW ? jQuery.ImageBox.options.fadeDuration : 1,
+ function()
+ {
+ container.prepend(imageEl);
+ jQuery(imageEl)
+ .css(
+ {
+ position : 'absolute',
+ left : jQuery.ImageBox.options.border + 'px',
+ top : jQuery.ImageBox.options.border + 'px'
+ }
+ )
+ .fadeIn(
+ jQuery.ImageBox.options.fadeDuration,
+ function()
+ {
+ captionSize = jQuery.iUtil.getSize(captionEl.get(0));
+ if (prevImage) {
+ prevImageEl
+ .css(
+ {
+ left : jQuery.ImageBox.options.border + 'px',
+ top : jQuery.ImageBox.options.border + 'px',
+ width : containerW/2 - jQuery.ImageBox.options.border * 3 + 'px',
+ height : containerH - jQuery.ImageBox.options.border * 2 + 'px'
+ }
+ )
+ .show();
+ }
+ if (nextImage) {
+ nextImageEl
+ .css(
+ {
+ left : containerW/2 + jQuery.ImageBox.options.border * 2 + 'px',
+ top : jQuery.ImageBox.options.border + 'px',
+ width : containerW/2 - jQuery.ImageBox.options.border * 3 + 'px',
+ height : containerH - jQuery.ImageBox.options.border * 2 + 'px'
+ }
+ )
+ .show();
+ }
+ captionEl
+ .css(
+ {
+ width : containerW + 'px',
+ top : - captionSize.hb + 'px',
+ visibility : 'visible'
+ }
+ )
+ .animate(
+ {
+ top : -1
+ },
+ jQuery.ImageBox.options.fadeDuration,
+ function()
+ {
+ jQuery.ImageBox.animationInProgress = false;
+ }
+ );
+ }
+ );
+ }
+ );
+ }
+ );
+ }
+ );
+ imageEl.src = imageSrc;
+
+ },
+
+ hideImage : function()
+ {
+ jQuery('#ImageBoxCurrentImage').remove();
+ jQuery('#ImageBoxOuterContainer').hide();
+ jQuery('#ImageBoxCaption').css('visibility', 'hidden');
+ jQuery('#ImageBoxOverlay').fadeTo(
+ 300,
+ 0,
+ function(){
+ jQuery(this).hide();
+ if (jQuery.browser.msie) {
+ jQuery('#ImageBoxIframe').hide();
+ }
+ }
+ );
+ jQuery('#ImageBoxPrevImage').get(0).onclick = null;
+ jQuery('#ImageBoxNextImage').get(0).onclick = null;
+ jQuery.ImageBox.currentRel = null;
+ jQuery.ImageBox.opened = false;
+ jQuery.ImageBox.animationInProgress = false;
+ return false;
+ }
+};
\ No newline at end of file