/*! * jquery.yoxview * jQuery image gallery viewer * http://yoxigen.com/yoxview * * Copyright (c) 2010 Yossi Kolesnicov * * Licensed under the MIT license. * http://www.opensource.org/licenses/mit-license.php * * Date: 28th July, 2010 * Version : 1.98 */ var yoxviewApi; (function($){ var yoxviewPath; $.yoxviewUnload = function() { if (yoxviewApi) { yoxviewApi.unload(); yoxviewApi = null; } } $(window).unload(function(){ $.yoxviewUnload(); }); $.fn.extend({ yoxview: function(opt) { if (this.length == 0) return this; if (!yoxviewPath) yoxviewPath = typeof(_yoxviewPath) != "undefined" ? _yoxviewPath : Yox.getPath(/(.*)jquery.yoxview.*/i); // Load the language file if not already loaded: this.loadLanguage = function(lang, callBack) { var self = this; if (!yoxviewLanguages[lang]) { yoxviewLanguages[lang] = {}; $.ajax({ url : yoxviewPath + "lang/" + lang + ".js", async : false, dataType : "json", success: function(data){ yoxviewLanguages[lang] = data; Yox.loadDataSource(options, callBack, self); } }); } else Yox.loadDataSource(options, callBack, self); } var defaults = { autoHideInfo: true, // If false, the info bar (with image count and title) is always displayed. autoPlay: false, // If true, slideshow mode starts when the popup opens backgroundColor: "#000", backgroundOpacity: 0.8, buttonsFadeTime: 300, // The time, in milliseconds, it takes the buttons to fade in/out when hovered on. Set to 0 to force the Prev/Next buttons to remain visible. cacheBuffer: 5, // The number of images to cache after the current image (directional, depends on the current viewing direction) cacheImagesInBackground: true, // If true, full-size images are cached even while the gallery hasn't been opened yet. controlsInitialFadeTime: 1500, // The time, in milliseconds, it takes the menu and prev/next buttons to fade in and out when the popup is opened. controlsInitialDisplayTime: 1000, // The time, in milliseconds, to display the menu and prev/next buttons when the popup is opened. Set to 0 to not display them by default dataFolder: yoxviewPath + "data/", imagesFolder: yoxviewPath + "images/", infoBackColor: "Black", infoBackOpacity: 0.5, isRTL : false, // Switch direction. For RTL languages such as Hebrew or Arabic, for example. lang: "en", // The language for texts. The relevant language file should exist in the lang folder. langFolder: yoxviewPath + "lang/", loopPlay: true, // If true, slideshow play starts over after the last image playDelay: 3000, // Time in milliseconds to display each image popupMargin: 20, // the minimum margin between the popup and the window popupResizeTime: 600, // The time in milliseconds it takes to make the resize transition from one image to the next. renderButtons: true, // Set to false if you want to implement your own Next/Prev buttons, using the API. renderMenu: true, // Set to false if you want to implement you own menu (Play/Help/Close). showBarsOnOpen: true, // If true, displays the top (help) bar and bottom (info) bar momentarily when the popup opens. showButtonsOnOpen: true, // If true, displays the Prev/Next buttons momentarily when the popup opens. titleAttribute: "title", titleDisplayDuration: 2000 // The time in ms to display the image's title, after which it fades out. }; var options = $.extend(defaults, opt); if (!yoxviewApi) { this.loadLanguage(options.lang, function(views){ yoxviewApi = new YoxView(views, options); }); } else { this.loadLanguage(options.lang, function(views){ yoxviewApi.AddViews(views, options); }); } return this; } }); })(jQuery); var yoxviewLanguages = new Array(); function YoxView(_views, _options) { var yoxviewApi = this; var $ = jQuery; // Ensure the dollar sign stands for jQuery, in case other JS libraries are loaded, that use it. var ajaxLoader; var cacheBufferLastIndex; var cacheComplete = false; var cachedImagesCount = 0; var cacheDirectionForward = true; var cacheImg = new Image(); var countDisplay; var ctlButtons; // next and prev buttons var currentCacheImg = 0; var currentItemIndex = 0; var currentLanguage = {}; var currentViewIndex = 0; var defaultOptions = _options; var disableInfo = false; var firstImage = true; var helpPanel; var hideInfoTimeout; var hideMenuTimeout; var image1; var image2; var images; var imagesCount = 0; var infoPanel; var infoPanelContent; var infoPanelLink; var infoPanelMinHeight = 30; var infoPanelWrap; var infoPinLink; var infoPinLinkImg; var infoText; this.isOpen = false; var isPlaying = false; var isResizing = false; var itemVar; var loading = false; var mediaButtonsSize = {width: 100, height: 100}; var mediaLoader; var mediaProviderUrls = { vimeo: "http://vimeo.com/api/oembed.json", myspace: "http://vids.myspace.com/index.cfm?fuseaction=oembed" }; var menuHidePosition = -42; var menuPanel; var nextBtn; var notifications = new Array(); var onOpenCallback; var options = defaultOptions; var panel1; var panel2; var playBtnText; var popup; var popupBackground; var popupWrap; var prevBtn; var resumePlay = false; var tempImg = new Image(); var thumbnail; var thumbnailImg; var thumbnailPos; var thumbnailProperties; var views = new Array(); var windowDimensions; var keyCodes = { 40: 'DOWN', 35: 'END', 13: 'ENTER', 36: 'HOME', 37: 'LEFT', 39: 'RIGHT', 32: 'SPACE', 38: 'UP', 72: 'h', 27: 'ESCAPE' }; var keyMappings = { RIGHT: options.isRTL ? 'prev' : 'next', DOWN: 'next', UP: 'prev', LEFT: options.isRTL ? 'next' : 'prev', ENTER: 'play', HOME: 'first', END: 'last', SPACE: 'next', h: 'help', ESCAPE: 'close' }; var sprites = new Yox.Sprites({ notifications: { width: 59, height: 59, sprites: [ 'empty', 'playRTL', 'play', 'pause', 'last', 'first' ] }, icons: { width: 18, height: 18, sprites: ['close', 'help', 'play', 'link', 'pin', 'unpin'] }, menu: { height: 42, sprites: ['back'] } }, options.imagesFolder + "sprites.png", options.imagesFolder + "empty.gif"); this.AddViews = function(_views, options) { var popupIsCreated = this.firstViewWithImages != undefined; jQuery.each(_views, function(){ setView(this, views.length, options); views.push(this); if (!yoxviewApi.firstViewWithImages) { var viewImages = $(this).data("yoxview").images; if (viewImages && viewImages.length != 0) yoxviewApi.firstViewWithImages = this; } }); if (!popupIsCreated && this.firstViewWithImages) { loadViewImages(this.firstViewWithImages); createPopup(); if(options.cacheImagesInBackground && imagesCount != 0) { calculateCacheBuffer(); cacheImages(0); } popupIsCreated = true; } } this.SetImages = function(images) { imagesCount = images.length; } function resetPopup() { if (popup) { popupWrap.remove(); popup = undefined; prevBtn = undefined; nextBtn = undefined; image1 = undefined; image2 = undefined; panel1 = undefined; panel2 = undefined; currentItemIndex = 0; currentCacheImg = 0; yoxviewApi.infoButtons = undefined; } createPopup(); } function loadViewImages(_view) { var viewData = $(_view).data("yoxview"); if (!images || currentViewIndex != viewData.viewIndex) { images = viewData.images; imagesCount = images.length; currentViewIndex = viewData.viewIndex; var isResetPopup = false; if (viewData.options && !Yox.compare(options, viewData.options)) { options = viewData.options; isResetPopup = true; } else if (!viewData.options && !Yox.compare(options, defaultOptions)) { options = defaultOptions; isResetPopup = true; } else if ((prevBtn && imagesCount == 1) || (popup && !prevBtn && imagesCount > 0)) isResetPopup = true; if (isResetPopup) resetPopup(); } } function getImageDataFromThumbnail(thumbnail) { var isVideo = false; var imageData = {}; var thumbnailHref = thumbnail.attr("href"); var thumbImg = thumbnail.children("img:first"); if (thumbnailHref.match(Yox.imageRegex)) { $.extend(imageData, { media: { src : thumbnail.attr("href"), title : thumbImg.attr(options.titleAttribute), alt : thumbImg.attr("alt") } }); } else { for(videoProvider in Yox.videoRegex) { if (thumbnailHref.match(Yox.videoRegex[videoProvider])) { $.extend(imageData, { media: { type: "video", provider: videoProvider, url: thumbnailHref } }); isVideo = true; break; } } if (!isVideo) return null; } $.extend(imageData, { thumbnailImg : thumbImg, thumbnailSrc : thumbImg.attr("src") }); return imageData; } function setView(view, viewIndex, _options) { var view = $(view); view.data("yoxview", {viewIndex : viewIndex}); if (!Yox.compare(options, _options)) view.data("yoxview").options = _options; // First, get image data from thumbnails: _options.isSingleLink = view[0].tagName == "A"; var thumbnails = _options.isSingleLink ? view : view.find("a:has(img)"); var viewImages = new Array(); thumbnails.each(function(i, thumbnail){ var imageData = getImageDataFromThumbnail($(thumbnail)); if (imageData != null) viewImages.push(imageData); }); if (_options.images) viewImages = viewImages.concat(_options.images); if (_options.dataSource) { Yox.dataSources[_options.dataSource].getImagesData(_options, function(data){ viewImages = viewImages.concat(data.images); view.data("yoxview").images = viewImages; var thumbnailsData = data.isGroup ? [$.extend(data, { media: { title: data.title + " (" + data.images.length + " images)", alt: data.title } })] : data.images; createThumbnails(view, _options.isSingleLink ? null : thumbnailsData, !data.createGroups ? null : function(e){ var viewData = $(e.currentTarget).data("yoxview"); var thumbnail = $(e.currentTarget); var thumbnailData = thumbnail.data("yoxthumbs"); if (!viewData.imagesAreSet) { thumbnail.css("cursor", "wait"); var newOptions = $.extend({}, options); if (!newOptions.dataSourceOptions) newOptions.dataSourceOptions = thumbnailData; else $.extend(newOptions.dataSourceOptions, thumbnailData); Yox.dataSources[options.dataSource].getImagesData(newOptions, function(data){ viewData.images = data.images; viewData.imagesAreSet = true; thumbnail.css("cursor", ""); yoxviewApi.openGallery(viewData.viewIndex); }); } else { yoxviewApi.openGallery(viewData.viewIndex); } } ); if (!_options.isSingleLink) $.each(view.yoxthumbs("thumbnails"), function(i, thumbnail){ thumbnail.data("yoxview", {viewIndex: views.length}); views.push(thumbnail); }); if (!yoxviewApi.firstViewWithImages && data.images.length > 0) { yoxviewApi.firstViewWithImages = view; if (_options.cacheImagesInBackground) yoxviewApi.startCache(); } }); } else { view.data("yoxview").images = viewImages; createThumbnails(view); } } function createThumbnails(view, additionalImages, onClick) { view.yoxthumbs({ images: additionalImages, enableOnlyMedia: true, onClick: onClick || function(e){ e.preventDefault(); if (options.thumbnailsOptions && options.thumbnailsOptions.onClick) options.thumbnailsOptions.onClick( $(e.currentTarget).data("yoxthumbs").imageIndex, $(e.currentTarget), $(e.liveFired).data("yoxview").viewIndex); else yoxviewApi.openGallery($(e.liveFired || e.currentTarget).data("yoxview").viewIndex, $(e.currentTarget).data("yoxthumbs").imageIndex); return false; } }); } function setThumbnail(setToPopupImage) { var currentView = $(views[currentViewIndex]); thumbnail = currentView[0].tagName == "A" ? currentView : currentView.yoxthumbs('thumbnails')[currentItemIndex]; if (!thumbnail || thumbnail.length == 0) thumbnail = currentView.yoxthumbs('thumbnails')[0]; var thumbnailImg = thumbnail.children("img:first"); if (thumbnailImg) { if (setToPopupImage && image1) image1.attr("src", thumbnailImg.attr("src")); thumbnailPos = thumbnailImg.offset(); thumbnailProperties = { width: thumbnailImg.width(), height: thumbnailImg.height(), top: thumbnailPos.top - $(window).scrollTop(), left: thumbnailPos.left }; } } // Opens the viewer popup. // Arguments: // viewIndex: The 0-based index of the view to open, in case there are multiple instances of YoxView on the same page. Default is 0. // imageIndex: The 0-based index of the image to open, in the specified view. Default is 0. // callBack: A function to call after the gallery has opened. this.openGallery = function(viewIndex, initialItemIndex, callBack) { if (typeof(viewIndex) == 'function') { callBack = viewIndex; viewIndex = initialItemIndex = 0; } else if (typeof(initialItemIndex) == 'function') { callBack = initialItemIndex; initialItemIndex = 0; } viewIndex = viewIndex || 0; initialItemIndex = initialItemIndex || 0; loadViewImages(views[viewIndex]); if (!popup && imagesCount != 0) createPopup(); this.selectImage(initialItemIndex); popupWrap.stop().css({ opacity: 1 }).fadeIn("slow", function(){ popupWrap.css("opacity", "") }); if(options.cacheImagesInBackground) cacheImages(initialItemIndex); if (callBack) onOpenCallback = callBack; return false; } this.selectImage = function(itemIndex) { yoxviewApi.currentImage = images[itemIndex]; currentItemIndex = itemIndex; setThumbnail(true); thumbnail.blur(); panel1.css({ "z-index" : "1", "width" : thumbnailProperties.width, "height" : thumbnailProperties.height }); panel2.css({ "display" : "none", "z-index" : "2" }); firstImage = true; popup.css({ "width" : thumbnailProperties.width, "height" : thumbnailProperties.height, "top" : thumbnailProperties.top, "left" : thumbnailProperties.left }); this.select(itemIndex); } this.refresh = function() { resumePlay = isPlaying; if (isPlaying) stopPlay(); setImage(currentItemIndex); if (resumePlay) startPlay(); } // Displays the specified image and shows the specified button, if specified. Use when the viewer is open. // Arguments: // imageIndex: The 0-based index of the image to display. // pressedBtn: a jQuery element of a button to display momentarily in the viewer. // For example, if the image has been selected by pressing the Next button // on the keyboard, specify the Next button. If no button should be display, leave blank. this.select = function(itemIndex, pressedBtn, viewIndex) { if (typeof pressedBtn === "number") { viewIndex = pressedBtn; pressedBtn = undefined; } viewIndex = viewIndex || 0; if (!isResizing) { if (itemIndex < 0) itemIndex = imagesCount - 1; else if (itemIndex == imagesCount) itemIndex = 0; if (!isPlaying && pressedBtn) flicker(pressedBtn); yoxviewApi.currentImage = images[itemIndex]; currentItemIndex = itemIndex; setImage(currentItemIndex); // Set the cache buffer, if required: calculateCacheBuffer(); // Handle event onSelect: if (options.onSelect) options.onSelect(itemIndex, images[itemIndex]); } } this.prev = function() { cacheDirectionForward = false; this.select(currentItemIndex - 1, prevBtn); return false; } this.next = function() { cacheDirectionForward = true; this.select(currentItemIndex + 1, nextBtn); return false; } this.first = function() { longFlicker(notifications["first"]); this.select(0); return false; } this.last = function() { longFlicker(notifications["last"]); this.select(imagesCount - 1); return false; } this.play = function() { if (imagesCount == 1) return; cacheDirectionForward = true; if (!isPlaying) { longFlicker(notifications["play"]); startPlay(); playBtnText.text(currentLanguage.Pause); } else { longFlicker(notifications["pause"]); stopPlay(); playBtnText.text(currentLanguage.Play); } } function flicker(button) { if (button.css("opacity") == 0) button.stop().animate({ opacity : 0 }, options.buttonsFadeTime, fadeOut(button)); } function longFlicker(button) { button.stop().fadeIn(options.buttonsFadeTime, function(){ $(this).delay(500) .fadeOut(options.buttonsFadeTime); }); } function fadeIn(button) { $(button).stop().animate({ opacity : 0 }, options.buttonsFadeTime); } function fadeOut(button) { $(button).stop().animate({ opacity : 0.5 }, options.buttonsFadeTime); } this.close = function() { this.closeHelp(); setThumbnail(false); resizePopup(thumbnailProperties.width, thumbnailProperties.height, thumbnailProperties.top, thumbnailProperties.left, function(){ yoxviewApi.isOpen = false; }); hideMenuPanel(); if (infoPanel) hideInfoPanel(function(){ infoText.html(""); }); newPanel.animate({ width: thumbnailProperties.width, height: thumbnailProperties.height }, options.popupResizeTime, function(){ newPanel.css("opacity", 1); popupBackground.css("opacity", options.backgroundOpacity); }); popupWrap.stop().fadeOut(1000); if (isPlaying) stopPlay(); if (options.onClose) options.onClose(); isResizing = false; } this.help = function() { if (this.isOpen) { if (helpPanel.css("display") == "none") helpPanel.css("display", "block").stop().animate({ opacity : 0.8 }, options.buttonsFadeTime); else this.closeHelp(); } } this.closeHelp = function() { if (helpPanel.css("display") != "none") helpPanel.stop().animate({ opacity: 0 }, options.buttonsFadeTime, function(){ helpPanel.css("display", "none"); }); } this.clickBtn = function(fn, stopPlaying) { if (stopPlaying && isPlaying) stopPlay(); fn.call(this); return false; } function catchPress(e) { if (yoxviewApi && yoxviewApi.isOpen) { var pK = keyCodes[e.keyCode]; var calledFunction = yoxviewApi[keyMappings[pK]]; if (calledFunction) { e.preventDefault(); calledFunction.apply(yoxviewApi); return false; } return true; } return true; } function createMenuButton(_title, btnFunction, stopPlay) { var btn = $("", { href : "#", click : function(){ return yoxviewApi.clickBtn(yoxviewApi[btnFunction], stopPlay); } }); var btnSpan = $("" + _title + ""); btnSpan.css("opacity", "0") .appendTo(btn); btn.append(sprites.getSprite("icons", btnFunction)); return btn; } // Prev and next buttons: function createNavButton(_function, _side) { var navBtnImg = new Image(); navBtnImg.src = options.imagesFolder + _side + ".png"; var navBtn = $("", { css : { "background" : "url(" + navBtnImg.src + ") no-repeat " + _side + " center", "opacity" : "0", "outline" : "0" }, className : "yoxview_ctlBtn", href : "#", click : function(){ this.blur(); return yoxviewApi.clickBtn(_function, true); } }); navBtn.css(_side, "0"); return navBtn; } // INIT: this.AddViews(_views, options); $(document).delegate('*', 'keydown', function(data){ catchPress(data); }); $(window).bind("resize.yoxview", function() { windowDimensions = getWindowDimensions(); if (yoxviewApi.isOpen) yoxviewApi.resize(); }); function createPopup() { currentLanguage = yoxviewLanguages[options.lang]; popupWrap = $("
", { id : "yoxview_popupWrap", css : { "position" : "fixed", "top" : "0", "left" : "0", "width" : "100%", "height" : "100%", "display" : "none", "z-index" : "100" } }); popup = $("
", { id : 'yoxview' }); popupWrap.appendTo($(parent.document.body)).append(popup); panel1 = $("
", { className: "yoxview_imgPanel", css: { "z-index": "2" } }); panel2 = $("
", { className: "yoxview_imgPanel", css: { "z-index": "1", "display": "none" } }); // the first image: image1 = $("", { className : "yoxview_fadeImg", css : { "display" : "block", "width" : "100%", "height" : "100%" } }); // the second image: image2 = $("", { className : "yoxview_fadeImg", css : { "display" : "block", "width" : "100%", "height" : "100%" } }); panel1.data("yoxviewPanel", {image: image1}) .append(image1).appendTo(popup); panel2.data("yoxviewPanel", {image: image2}) panel2.append(image2).appendTo(popup); var singleImage = imagesCount == 1; if (singleImage && !images[0].media[options.titleAttribute]) options.renderInfo = false; // the menu: if (options.renderMenu !== false) { var menuPanelWrap = $("
", { className : "yoxview_popupBarPanel yoxview_top" }); if (options.autoHideMenu !== false) { menuPanelWrap.mouseenter(function(){ if (yoxviewApi.isOpen) showMenuPanel(); }) .mouseleave(function(){ if (yoxviewApi.isOpen) hideMenuPanel(); }); } menuPanel = $("
", { id : "yoxview_menuPanel", css: { "opacity": "0.8", "background-position": sprites.getBackgroundPosition("menu", "back") } }); var helpBtn = createMenuButton(currentLanguage.Help, "help", false); var playBtn = createMenuButton(currentLanguage.Slideshow, "play", false); playBtnText = playBtn.children("span"); menuPanel.append( createMenuButton(currentLanguage.Close, "close", true), helpBtn, playBtn ); if (singleImage) { playBtn.css("display", "none"); helpBtn.css("display", "none"); menuPanel.css({ width: 58 }); } menuPanel.find("a:last-child").attr("class", "last"); menuPanelWrap.append(menuPanel).appendTo(popup); menuPanel.delegate("a", "mouseenter", function(){ $(this).stop().animate({ top : "8px" }, "fast").find("span").stop().animate({opacity:1}, "fast"); }) .delegate("a", "mouseleave", function(){ $(this).stop().animate({ top : "0" }, "fast").find("span").stop().animate({opacity:0}, "fast"); }); } if (options.renderButtons !== false && !singleImage) { // prev and next buttons: prevBtn = createNavButton(yoxviewApi.prev, options.isRTL ? "right" : "left"); prevBtn.appendTo(popup); nextBtn = createNavButton(yoxviewApi.next, options.isRTL ? "left" : "right"); nextBtn.appendTo(popup); } ctlButtons = popup.find(".yoxview_ctlBtn"); // add the ajax loader: ajaxLoader = $("
", { id: "yoxview_ajaxLoader", className: "yoxview_notification", css: { "display": "none" } }); ajaxLoader.append($("", { src: options.imagesFolder + "popup_ajax_loader.gif", alt: currentLanguage.Loading, css: { width: 32, height: 32, "background-image": "url(" + options.imagesFolder + "sprites.png)", "background-position": sprites.getBackgroundPosition("notifications", "empty") } })) .appendTo(popup); // notification images: var notificationsNames = ["play", "pause", "first", "last"]; jQuery.each(notificationsNames, function(i, notificationName){ var notification = sprites.getSprite("notifications", notificationName); notification.attr("className", "yoxview_notification") .css("display", "none") .appendTo(popup); notifications[notificationName] = notification; }); // help: helpPanel = $("
", { id : "yoxview_helpPanel", href : "#", title : currentLanguage.CloseHelp, css : { "background" : "url(" + options.imagesFolder + "help_panel.png) no-repeat center top", "direction" : currentLanguage.Direction, "opacity" : "0" }, click : function(){ return yoxviewApi.clickBtn(yoxviewApi.help, false); } }); var helpTitle = document.createElement("h1"); helpTitle.innerHTML = currentLanguage.Help.toUpperCase(); var helpText = document.createElement("p"); helpText.innerHTML = currentLanguage.HelpText; var closeHelp = document.createElement("span"); closeHelp.id = "yoxview_closeHelp"; closeHelp.innerHTML = currentLanguage.CloseHelp; helpPanel.append(helpTitle).append(helpText).append(closeHelp).appendTo(popup); // popup info: if (options.renderInfo !== false) { infoPanelWrap = $("
", { className : "yoxview_popupBarPanel yoxview_bottom" }); infoPanelWrap.mouseenter(function(){ if (yoxviewApi.isOpen && !disableInfo && options.autoHideInfo !== false) setInfoPanelHeight(); }) .mouseleave(function(){ if (yoxviewApi.isOpen && !disableInfo && options.autoHideInfo !== false) hideInfoPanel(); }); infoPanel = $("
", { id: "yoxview_infoPanel" }); infoPanel.append( $("
", { id : "yoxview_infoPanelBack", css : { "background" : options.infoBackColor, "opacity" : options.infoBackOpacity } }) ); infoPanelContent = $("
", { id: "yoxview_infoPanelContent" }); countDisplay = $("", { id: "yoxview_count" }); infoText = $("
", { id: "yoxview_infoText" }); if (singleImage) { infoText.css("margin-left", "10px"); countDisplay.css("display", "none"); } infoPanelContent.append(countDisplay); if (options.renderInfoPin !== false) { infoPinLinkImg = sprites.getSprite("icons", options.autoHideInfo ? "pin" : "unpin"); infoPinLink = $("", { className: "yoxviewInfoLink", href: "#", title: options.autoHideInfo ? currentLanguage.PinInfo : currentLanguage.UnpinInfo, css: { display: 'inline' }, click: function(e){ e.preventDefault(); options.autoHideInfo = !options.autoHideInfo; infoPinLinkImg.css("background-position", sprites.getBackgroundPosition("icons", options.autoHideInfo ? "pin" : "unpin")); this.title = options.autoHideInfo ? currentLanguage.PinInfo : currentLanguage.UnpinInfo; } }); infoPinLink.append(infoPinLinkImg).appendTo(infoPanelContent); } if (options.linkToOriginalContext !== false) { infoPanelLink = $("", { className: "yoxviewInfoLink", target: "_blank", title: currentLanguage.OriginalContext }); infoPanelLink.append(sprites.getSprite("icons", "link")).appendTo(infoPanelContent); } if (options.infoButtons) { yoxviewApi.infoButtons = options.infoButtons; for (infoButton in options.infoButtons) { options.infoButtons[infoButton].attr("className", "yoxviewInfoLink").css("display", "inline").appendTo(infoPanelContent); } } infoPanelContent.append(infoText); infoPanel.append(infoPanelContent).appendTo(infoPanelWrap); popup.append(infoPanelWrap); } // set the background: popupBackground = $("
", { css : { "position" : "fixed", "height" : "100%", "width" : "100%", "top" : "0", "left" : "0", "background" : options.backgroundColor, "z-index" : "1", "opacity" : options.backgroundOpacity }, click : function(){ return yoxviewApi.clickBtn(yoxviewApi.close, true); } }).appendTo(popupWrap); if (options.buttonsFadeTime != 0) { ctlButtons.hover( function(){ if (yoxviewApi.isOpen) $(this).stop().animate({ opacity : 0.6 }, options.buttonsFadeTime); }, function(){ $(this).stop().animate({ opacity : 0 }, options.buttonsFadeTime); } ); } } $(cacheImg).load(function() { $.extend(images[currentCacheImg].media, { width: this.width, height: this.height, loaded: true }); advanceCache(); }) .error(function(){ advanceCache(); }); function advanceCache() { cachedImagesCount++; if (cachedImagesCount == imagesCount) cacheComplete = true; if (!cacheComplete) getCacheBuffer(); } this.startCache = function() { loadViewImages(this.firstViewWithImages); calculateCacheBuffer(); cacheImages(0); } function getCacheBuffer() { if (!options.cacheBuffer || currentCacheImg != cacheBufferLastIndex) cacheImages(currentCacheImg + (cacheDirectionForward ? 1 : -1)); } function calculateCacheBuffer() { if (options.cacheBuffer) { cacheBufferLastIndex = cacheDirectionForward ? currentItemIndex + options.cacheBuffer : currentItemIndex - options.cacheBuffer; if (cacheBufferLastIndex < 0) cacheBufferLastIndex += imagesCount; else if (cacheBufferLastIndex >= imagesCount) cacheBufferLastIndex -= imagesCount; } } function cacheImages(imageIndexToCache) { if (cacheComplete) return; if (imageIndexToCache == imagesCount) imageIndexToCache = 0; else if (imageIndexToCache < 0) imageIndexToCache += imagesCount; var image = images[imageIndexToCache].media; currentCacheImg = imageIndexToCache; if (image && !image.loaded) { if (!image.type || image.type === "image") cacheImg.src = image.src; else loadMedia(image, function(){ advanceCache(); }); } else getCacheBuffer(); } function showLoaderIcon() { loading = true; ajaxLoader.stop().stopTime() .oneTime(options.buttonsFadeTime, function() { $(this).stop().css("opacity", "0.6").fadeIn(options.buttonsFadeTime); }); } function hideLoaderIcon() { loading = false; ajaxLoader.stop().stopTime().fadeOut(options.buttonsFadeTime); } function setImage(itemIndex) { if (!isPlaying) { showLoaderIcon(); } loadAndDisplayMedia(yoxviewApi.currentImage.media); } function resizePopup(_width, _height, _top, _left, callBack) { popup.stop().animate({ width: _width, height: _height, top: _top, left: _left }, options.popupResizeTime, callBack); } function startPlay() { if (imagesCount == 1) return; isPlaying = true; if (currentItemIndex < imagesCount - 1) { popup.oneTime(options.playDelay, "play", function(){ yoxviewApi.next(); }); } else { if (options.loopPlay) popup.oneTime(options.playDelay, "play", function(){ yoxviewApi.select(0, null); }); else stopPlay(); } } function stopPlay() { popup.stopTime("play"); isPlaying = false; } function blink(_element) { _element.animate({ opacity : 0.8 }, 1000, function() { $(this).animate({opacity: 0.2}, 1000, blink($(this))); }); } var newPanel = panel1; var oldPanel = panel2; function getWindowDimensions() { var widthVal = $(parent.window).width(); var heightVal = $(parent.window).height(); var returnValue = { height : heightVal, width : widthVal, usableHeight : heightVal - options.popupMargin * 2, usableWidth : widthVal - options.popupMargin * 2 }; return returnValue; } windowDimensions = getWindowDimensions(); this.resize = function() { if (isPlaying) { resumePlay = true; stopPlay(); } var imageMaxSize = newPanel.data("maxSize"); if (!imageMaxSize || !imageMaxSize) return; var newImageDimensions = Yox.fitImageSize( imageMaxSize, { width: windowDimensions.usableWidth, height: windowDimensions.usableHeight}); newPanel.css({"width" : "100%", "height" : "100%"}); var marginTop = Math.round((windowDimensions.height - newImageDimensions.height) / 2); var marginLeft = Math.round((windowDimensions.width - newImageDimensions.width) / 2); isResizing = true; if (newPanel.isMedia) ctlButtons.animate({top: newImageDimensions.height / 2 - mediaButtonsSize.height / 2}, options.popupResizeTime); resizePopup(newImageDimensions.width, newImageDimensions.height, marginTop, marginLeft, function(){ var newImageWidth = popup.width(); var newImageHeight = popup.height(); newPanel.css({ "width" : newImageWidth + "px", "height" : newImageHeight + "px" }); isResizing = false; if (infoPanel) setInfoPanelHeight(); if (resumePlay) { startPlay(); resumePlay = false; } } ); } function setInfoPanelHeight(callback) { clearTimeout(hideInfoTimeout); var titleHeight = infoText.outerHeight(); if (titleHeight < infoPanelMinHeight) titleHeight = infoPanelMinHeight; infoPanel.stop().animate({height : titleHeight}, 500, function(){ if (callback) callback(); }); } function hideInfoPanel(callback) { clearTimeout(hideInfoTimeout); infoPanel.stop().animate({ height: 0 }, 500, function(){ if (callback) callback(); }); } function hideMenuPanel(callback) { clearTimeout(hideMenuTimeout); menuPanel.stop().animate({ top: menuHidePosition }, 500, function(){ if (callback) callback(); }); } function showMenuPanel(callback) { clearTimeout(hideMenuTimeout); menuPanel.stop().animate({ top: 0 }, 500, function(){ if (callback) callback(); }); } function changeMedia(media) { var currentImageElement; var mediaIsImage = !media.type || media.type === "image"; if (mediaIsImage && disableInfo && infoPanel) infoPanelWrap.css("display", "block"); clearTimeout(hideInfoTimeout); if (panel1.css('z-index') == 1) { newPanel = panel1; currentImageElement = image1; oldPanel = panel2; } else { newPanel = panel2; currentImageElement = image2; oldPanel = panel1; } newPanel.data("maxSize", { width: media.width, height: media.height}); var newImageDimensions = Yox.fitImageSize( media, { width: windowDimensions.usableWidth, height: windowDimensions.usableHeight }); if (infoPanel) { var infoTextValue = media.title || ""; if (media.description) infoTextValue += infoTextValue != "" ? "
" + media.description + "
" : media.description; infoText.html(infoTextValue); if (imagesCount > 1) countDisplay.html(currentItemIndex + 1 + "/" + imagesCount); if (infoPanelLink) { if (yoxviewApi.currentImage.link) infoPanelLink.attr("href", yoxviewApi.currentImage.link).css("display", "inline"); else infoPanelLink.css("display", "none"); } } var panelData = newPanel.data("yoxviewPanel"); if (mediaIsImage) { currentImageElement.attr({ src : media.src, title : media.title, alt: media.alt }); ctlButtons.css({"height": "100%", "width": "50%", "top": "0"}); if(newPanel.isMedia) { panelData.media.remove(); panelData.media = undefined; panelData.image.show(); newPanel.isMedia = false; } disableInfo = false; } else { if (!panelData.media) { panelData.media = $("
", { className: "yoxview_mediaPanel" }); panelData.image.hide(); newPanel.append(panelData.media); } else panelData.media.show(); panelData.media.html(media.html); ctlButtons.css({ "width": mediaButtonsSize.width, "height": mediaButtonsSize.height, "top": (newImageDimensions.height / 2) - (mediaButtonsSize.height / 2) }); if (!newPanel.isMedia) { panelData.image.hide(); newPanel.isMedia = true; } if (infoPanel) { if (options.autoHideInfo !== false) hideInfoPanel(); infoPanelWrap.css("display", "none"); disableInfo = true; } } if (firstImage) newPanel.animate({ width: newImageDimensions.width, height: newImageDimensions.height }, options.popupResizeTime); else newPanel.css({ "width" : newImageDimensions.width + "px", "height" : newImageDimensions.height + "px" }); var marginTop = Math.round((windowDimensions.height - newImageDimensions.height) / 2); var marginLeft = Math.round((windowDimensions.width - newImageDimensions.width) / 2); if (loading) hideLoaderIcon(); isResizing = true; resizePopup(newImageDimensions.width, newImageDimensions.height, marginTop, marginLeft, function() { if (firstImage) { yoxviewApi.isOpen = true; if (options.controlsInitialDisplayTime > 0) { if (options.showButtonsOnOpen) ctlButtons.animate({opacity: 0.5}, options.controlsInitialFadeTime, function(){ if(options.buttonsFadeTime != 0) $(this).delay(options.controlsInitialDisplayTime).animate({opacity : 0}, options.controlsInitialFadeTime); }); if (options.showBarsOnOpen) { showMenuPanel(function(){ if (options.autoHideMenu !== false) hideMenuTimeout = setTimeout(function(){ hideMenuPanel(); }, options.controlsInitialDisplayTime ); }); if (infoPanel) setInfoPanelHeight(function(){ if (options.autoHideInfo !== false) hideInfoTimeout = setTimeout(function(){ hideInfoPanel(); }, options.controlsInitialDisplayTime); }); } } if (options.autoPlay) yoxviewApi.play(); if (options.onOpen) options.onOpen(); if (onOpenCallback) { onOpenCallback(); onOpenCallback = undefined; } firstImage = false; } isResizing = false; } ); newPanel.css({'z-index': '2', opacity: 1}); oldPanel.css('z-index', '1'); newPanel.fadeIn(options.popupResizeTime, function(){ oldPanel.css('display', 'none'); if (infoPanel) setInfoPanelHeight(function(){ if (options.autoHideInfo !== false) hideInfoTimeout = setTimeout(function(){ hideInfoPanel(); }, options.titleDisplayDuration); }); if (imagesCount > 1) { if (currentItemIndex < imagesCount - 1 && options.cacheImagesInBackground) cacheImages(currentItemIndex + 1); if (isPlaying) startPlay(); } }); } $(tempImg).load(function() { if (this.width == 0) { displayError("Image error"); return; } changeMedia($.extend({}, yoxviewApi.currentImage.media, { width: this.width, height: this.height })); }) .error(function(){ displayError("Image not found:
" + this.src + ""); }); function loadMediaFromProvider(provider, url, availableSize, onLoad, onError) { jQuery.jsonp({ url: (mediaProviderUrls[provider] || "http://oohembed.com/oohembed/"), data: jQuery.extend({ "url" : url, "format": "json" }, availableSize), dataType: 'jsonp', callbackParameter: "callback", success: function(data) { var media = { title: data.title, width: data.width, height: data.height, type: data.type }; if (data.type === "video") { media.html = data.html .replace(/" + errorSender.data.url + ""); } ); } else changeMedia(yoxviewApi.currentImage.media); } } catch(error) { displayError(error); } } function loadMedia(media, onLoad, onError) { if (!media.type || media.type !== "image") { loadMediaFromProvider( media.provider, media.url, options.videoSize, function(mediaData){ $.extend(media, mediaData, {loaded: true}); if (onLoad) onLoad(media); }, onError ); } } function displayError(errorMsg) { changeMedia({ html: "" + errorMsg + "", width: 500, height: 300, type: "error", title: "" }); } this.unload = function(){ jQuery.each(views, function(i, view){ var $view = $(view); $view.undelegate("a", "click.yoxview") .removeData("yoxview") .yoxthumbs("unload", "yoxview"); }); $(window).unbind(".yoxview"); if (popup){ popupWrap.remove(); popup = undefined; } }; }