| Swap in jquery-lightbox - warvox - VoIP based wardialing tool, forked from rapi… | |
| Log | |
| Files | |
| Refs | |
| README | |
| --- | |
| commit 13450230bbbb5422710e2640661828c46f043df3 | |
| parent 3f4572631842f38da7c8020f2632b3238b6ae055 | |
| Author: HD Moore <[email protected]> | |
| Date: Wed, 26 Dec 2012 23:37:31 -0600 | |
| Swap in jquery-lightbox | |
| Diffstat: | |
| A app/assets/images/lightbox-blank.g… | 0 | |
| A app/assets/images/lightbox-btn-clo… | 0 | |
| A app/assets/images/lightbox-btn-nex… | 0 | |
| A app/assets/images/lightbox-btn-pre… | 0 | |
| A app/assets/images/lightbox-ico-loa… | 0 | |
| A app/assets/javascripts/jquery.ligh… | 473 +++++++++++++++++++++++++++… | |
| D app/assets/javascripts/lightbox.js | 426 -----------------------------… | |
| A app/assets/stylesheets/jquery.ligh… | 102 +++++++++++++++++++++++++++… | |
| M app/views/analyze/view.html.erb | 7 +++++++ | |
| M app/views/analyze/view_matches.htm… | 7 +++++++ | |
| 10 files changed, 589 insertions(+), 426 deletions(-) | |
| --- | |
| diff --git a/app/assets/images/lightbox-blank.gif b/app/assets/images/lightbox-… | |
| Binary files differ. | |
| diff --git a/app/assets/images/lightbox-btn-close.gif b/app/assets/images/light… | |
| Binary files differ. | |
| diff --git a/app/assets/images/lightbox-btn-next.gif b/app/assets/images/lightb… | |
| Binary files differ. | |
| diff --git a/app/assets/images/lightbox-btn-prev.gif b/app/assets/images/lightb… | |
| Binary files differ. | |
| diff --git a/app/assets/images/lightbox-ico-loading.gif b/app/assets/images/lig… | |
| Binary files differ. | |
| diff --git a/app/assets/javascripts/jquery.lightbox-0.5.js b/app/assets/javascr… | |
| @@ -0,0 +1,472 @@ | |
| +/** | |
| + * jQuery lightBox plugin | |
| + * This jQuery plugin was inspired and based on Lightbox 2 by Lokesh Dhakar (h… | |
| + * and adapted to me for use like a plugin from jQuery. | |
| + * @name jquery-lightbox-0.5.js | |
| + * @author Leandro Vieira Pinho - http://leandrovieira.com | |
| + * @version 0.5 | |
| + * @date April 11, 2008 | |
| + * @category jQuery plugin | |
| + * @copyright (c) 2008 Leandro Vieira Pinho (leandrovieira.com) | |
| + * @license CCAttribution-ShareAlike 2.5 Brazil - http://creativecommons.org/l… | |
| + * @example Visit http://leandrovieira.com/projects/jquery/lightbox/ for more … | |
| + */ | |
| + | |
| +// Offering a Custom Alias suport - More info: http://docs.jquery.com/Plugins/… | |
| +(function($) { | |
| + /** | |
| + * $ is an alias to jQuery object | |
| + * | |
| + */ | |
| + $.fn.lightBox = function(settings) { | |
| + // Settings to configure the jQuery lightBox plugin how you li… | |
| + settings = jQuery.extend({ | |
| + // Configuration related to overlay | |
| + overlayBgColor: '#000', … | |
| + overlayOpacity: 0.8, … | |
| + // Configuration related to navigation | |
| + fixedNavigation: false, … | |
| + // Configuration related to images | |
| + imageLoading: 'images/lightbox-… | |
| + imageBtnPrev: 'images/lightbox-… | |
| + imageBtnNext: 'images/lightbox-… | |
| + imageBtnClose: 'images/lightbox… | |
| + imageBlank: 'images/lig… | |
| + // Configuration related to container image box | |
| + containerBorderSize: 10, … | |
| + containerResizeSpeed: 400, // (i… | |
| + // Configuration related to texts in caption. For exam… | |
| + txtImage: 'Image', … | |
| + txtOf: 'of', … | |
| + // Configuration related to keyboard navigation | |
| + keyToClose: 'c', … | |
| + keyToPrev: 'p', … | |
| + keyToNext: 'n', … | |
| + // Don�t alter these variables in any way | |
| + imageArray: [], | |
| + activeImage: 0 | |
| + },settings); | |
| + // Caching the jQuery object with all elements matched | |
| + var jQueryMatchedObj = this; // This, in this context, refer t… | |
| + /** | |
| + * Initializing the plugin calling the start function | |
| + * | |
| + * @return boolean false | |
| + */ | |
| + function _initialize() { | |
| + _start(this,jQueryMatchedObj); // This, in this contex… | |
| + return false; // Avoid the browser following the link | |
| + } | |
| + /** | |
| + * Start the jQuery lightBox plugin | |
| + * | |
| + * @param object objClicked The object (link) whick the user h… | |
| + * @param object jQueryMatchedObj The jQuery object with all e… | |
| + */ | |
| + function _start(objClicked,jQueryMatchedObj) { | |
| + // Hime some elements to avoid conflict with overlay i… | |
| + $('embed, object, select').css({ 'visibility' : 'hidde… | |
| + // Call the function to create the markup structure; s… | |
| + _set_interface(); | |
| + // Unset total images in imageArray | |
| + settings.imageArray.length = 0; | |
| + // Unset image active information | |
| + settings.activeImage = 0; | |
| + // We have an image set? Or just an image? Let�s see i… | |
| + if ( jQueryMatchedObj.length == 1 ) { | |
| + settings.imageArray.push(new Array(objClicked.… | |
| + } else { | |
| + // Add an Array (as many as we have), with hre… | |
| + for ( var i = 0; i < jQueryMatchedObj.length; … | |
| + settings.imageArray.push(new Array(jQu… | |
| + } | |
| + } | |
| + while ( settings.imageArray[settings.activeImage][0] !… | |
| + settings.activeImage++; | |
| + } | |
| + // Call the function that prepares image exibition | |
| + _set_image_to_view(); | |
| + } | |
| + /** | |
| + * Create the jQuery lightBox plugin interface | |
| + * | |
| + * The HTML markup will be like that: | |
| + <div id="jquery-overlay"></div> | |
| + <div id="jquery-lightbox"> | |
| + <div id="lightbox-container-image-box"> | |
| + <div id="lightbox-container-image"> | |
| + <img src="../fotos/XX.jpg" id=… | |
| + <div id="lightbox-nav"> | |
| + <a href="#" id="lightb… | |
| + <a href="#" id="lightb… | |
| + </div> | |
| + <div id="lightbox-loading"> | |
| + <a href="#" id="lightb… | |
| + <img src="../i… | |
| + </a> | |
| + </div> | |
| + </div> | |
| + </div> | |
| + <div id="lightbox-container-image-data-box"> | |
| + <div id="lightbox-container-image-data… | |
| + <div id="lightbox-image-detail… | |
| + <span id="lightbox-ima… | |
| + <span id="lightbox-ima… | |
| + </div> | |
| + <div id="lightbox-secNav"> | |
| + <a href="#" id="lightb… | |
| + <img src="../i… | |
| + </a> | |
| + </div> | |
| + </div> | |
| + </div> | |
| + </div> | |
| + * | |
| + */ | |
| + function _set_interface() { | |
| + // Apply the HTML markup into body tag | |
| + $('body').append('<div id="jquery-overlay"></div><div … | |
| + // Get page sizes | |
| + var arrPageSizes = ___getPageSize(); | |
| + // Style overlay and show it | |
| + $('#jquery-overlay').css({ | |
| + backgroundColor: settings.overlayBgColo… | |
| + opacity: settings.overl… | |
| + width: arrPageS… | |
| + height: arrPage… | |
| + }).fadeIn(); | |
| + // Get page scroll | |
| + var arrPageScroll = ___getPageScroll(); | |
| + // Calculate top and left offset for the jquery-lightb… | |
| + $('#jquery-lightbox').css({ | |
| + top: arrPageScroll[1] + (arrPageSizes[3… | |
| + left: arrPageScroll[0] | |
| + }).show(); | |
| + // Assigning click events in elements to close overlay | |
| + $('#jquery-overlay,#jquery-lightbox').click(function()… | |
| + _finish(); … | |
| + }); | |
| + // Assign the _finish function to lightbox-loading-lin… | |
| + $('#lightbox-loading-link,#lightbox-secNav-btnClose').… | |
| + _finish(); | |
| + return false; | |
| + }); | |
| + // If window was resized, calculate the new overlay di… | |
| + $(window).resize(function() { | |
| + // Get page sizes | |
| + var arrPageSizes = ___getPageSize(); | |
| + // Style overlay and show it | |
| + $('#jquery-overlay').css({ | |
| + width: arrPageSizes[0], | |
| + height: arrPageSizes[1] | |
| + }); | |
| + // Get page scroll | |
| + var arrPageScroll = ___getPageScroll(); | |
| + // Calculate top and left offset for the jquer… | |
| + $('#jquery-lightbox').css({ | |
| + top: arrPageScroll[1] + (arrPag… | |
| + left: arrPageScroll[0] | |
| + }); | |
| + }); | |
| + } | |
| + /** | |
| + * Prepares image exibition; doing a image�s preloader to calc… | |
| + * | |
| + */ | |
| + function _set_image_to_view() { // show the loading | |
| + // Show the loading | |
| + $('#lightbox-loading').show(); | |
| + if ( settings.fixedNavigation ) { | |
| + $('#lightbox-image,#lightbox-container-image-d… | |
| + } else { | |
| + // Hide some elements | |
| + $('#lightbox-image,#lightbox-nav,#lightbox-nav… | |
| + } | |
| + // Image preload process | |
| + var objImagePreloader = new Image(); | |
| + objImagePreloader.onload = function() { | |
| + $('#lightbox-image').attr('src',settings.image… | |
| + // Perfomance an effect in the image container… | |
| + _resize_container_image_box(objImagePreloader.… | |
| + // clear onLoad, IE behaves irratically… | |
| + objImagePreloader.onload=function(){}; | |
| + }; | |
| + objImagePreloader.src = settings.imageArray[settings.a… | |
| + }; | |
| + /** | |
| + * Perfomance an effect in the image container resizing it | |
| + * | |
| + * @param integer intImageWidth The image�s width that will be… | |
| + * @param integer intImageHeight The image�s height that will … | |
| + */ | |
| + function _resize_container_image_box(intImageWidth,intImageHei… | |
| + // Get current width and height | |
| + var intCurrentWidth = $('#lightbox-container-image-box… | |
| + var intCurrentHeight = $('#lightbox-container-image-bo… | |
| + // Get the width and height of the selected image plus… | |
| + var intWidth = (intImageWidth + (settings.containerBor… | |
| + var intHeight = (intImageHeight + (settings.containerB… | |
| + // Diferences | |
| + var intDiffW = intCurrentWidth - intWidth; | |
| + var intDiffH = intCurrentHeight - intHeight; | |
| + // Perfomance the effect | |
| + $('#lightbox-container-image-box').animate({ width: in… | |
| + if ( ( intDiffW == 0 ) && ( intDiffH == 0 ) ) { | |
| + if ( $.browser.msie ) { | |
| + ___pause(250); | |
| + } else { | |
| + ___pause(100); | |
| + } | |
| + } | |
| + $('#lightbox-container-image-data-box').css({ width: i… | |
| + $('#lightbox-nav-btnPrev,#lightbox-nav-btnNext').css({… | |
| + }; | |
| + /** | |
| + * Show the prepared image | |
| + * | |
| + */ | |
| + function _show_image() { | |
| + $('#lightbox-loading').hide(); | |
| + $('#lightbox-image').fadeIn(function() { | |
| + _show_image_data(); | |
| + _set_navigation(); | |
| + }); | |
| + _preload_neighbor_images(); | |
| + }; | |
| + /** | |
| + * Show the image information | |
| + * | |
| + */ | |
| + function _show_image_data() { | |
| + $('#lightbox-container-image-data-box').slideDown('fas… | |
| + $('#lightbox-image-details-caption').hide(); | |
| + if ( settings.imageArray[settings.activeImage][1] ) { | |
| + $('#lightbox-image-details-caption').html(sett… | |
| + } | |
| + // If we have a image set, display 'Image X of X' | |
| + if ( settings.imageArray.length > 1 ) { | |
| + $('#lightbox-image-details-currentNumber').htm… | |
| + } | |
| + } | |
| + /** | |
| + * Display the button navigations | |
| + * | |
| + */ | |
| + function _set_navigation() { | |
| + $('#lightbox-nav').show(); | |
| + | |
| + // Instead to define this configuration in CSS file, w… | |
| + $('#lightbox-nav-btnPrev,#lightbox-nav-btnNext').css({… | |
| + | |
| + // Show the prev button, if not the first image in set | |
| + if ( settings.activeImage != 0 ) { | |
| + if ( settings.fixedNavigation ) { | |
| + $('#lightbox-nav-btnPrev').css({ 'back… | |
| + .unbind() | |
| + .bind('click',function() { | |
| + settings.activeImage =… | |
| + _set_image_to_view(); | |
| + return false; | |
| + }); | |
| + } else { | |
| + // Show the images button for Next but… | |
| + $('#lightbox-nav-btnPrev').unbind().ho… | |
| + $(this).css({ 'background' : '… | |
| + },function() { | |
| + $(this).css({ 'background' : '… | |
| + }).show().bind('click',function() { | |
| + settings.activeImage = setting… | |
| + _set_image_to_view(); | |
| + return false; | |
| + }); | |
| + } | |
| + } | |
| + | |
| + // Show the next button, if not the last image in set | |
| + if ( settings.activeImage != ( settings.imageArray.len… | |
| + if ( settings.fixedNavigation ) { | |
| + $('#lightbox-nav-btnNext').css({ 'back… | |
| + .unbind() | |
| + .bind('click',function() { | |
| + settings.activeImage =… | |
| + _set_image_to_view(); | |
| + return false; | |
| + }); | |
| + } else { | |
| + // Show the images button for Next but… | |
| + $('#lightbox-nav-btnNext').unbind().ho… | |
| + $(this).css({ 'background' : '… | |
| + },function() { | |
| + $(this).css({ 'background' : '… | |
| + }).show().bind('click',function() { | |
| + settings.activeImage = setting… | |
| + _set_image_to_view(); | |
| + return false; | |
| + }); | |
| + } | |
| + } | |
| + // Enable keyboard navigation | |
| + _enable_keyboard_navigation(); | |
| + } | |
| + /** | |
| + * Enable a support to keyboard navigation | |
| + * | |
| + */ | |
| + function _enable_keyboard_navigation() { | |
| + $(document).keydown(function(objEvent) { | |
| + _keyboard_action(objEvent); | |
| + }); | |
| + } | |
| + /** | |
| + * Disable the support to keyboard navigation | |
| + * | |
| + */ | |
| + function _disable_keyboard_navigation() { | |
| + $(document).unbind(); | |
| + } | |
| + /** | |
| + * Perform the keyboard actions | |
| + * | |
| + */ | |
| + function _keyboard_action(objEvent) { | |
| + // To ie | |
| + if ( objEvent == null ) { | |
| + keycode = event.keyCode; | |
| + escapeKey = 27; | |
| + // To Mozilla | |
| + } else { | |
| + keycode = objEvent.keyCode; | |
| + escapeKey = objEvent.DOM_VK_ESCAPE; | |
| + } | |
| + // Get the key in lower case form | |
| + key = String.fromCharCode(keycode).toLowerCase(); | |
| + // Verify the keys to close the ligthBox | |
| + if ( ( key == settings.keyToClose ) || ( key == 'x' ) … | |
| + _finish(); | |
| + } | |
| + // Verify the key to show the previous image | |
| + if ( ( key == settings.keyToPrev ) || ( keycode == 37 … | |
| + // If we�re not showing the first image, call … | |
| + if ( settings.activeImage != 0 ) { | |
| + settings.activeImage = settings.active… | |
| + _set_image_to_view(); | |
| + _disable_keyboard_navigation(); | |
| + } | |
| + } | |
| + // Verify the key to show the next image | |
| + if ( ( key == settings.keyToNext ) || ( keycode == 39 … | |
| + // If we�re not showing the last image, call t… | |
| + if ( settings.activeImage != ( settings.imageA… | |
| + settings.activeImage = settings.active… | |
| + _set_image_to_view(); | |
| + _disable_keyboard_navigation(); | |
| + } | |
| + } | |
| + } | |
| + /** | |
| + * Preload prev and next images being showed | |
| + * | |
| + */ | |
| + function _preload_neighbor_images() { | |
| + if ( (settings.imageArray.length -1) > settings.active… | |
| + objNext = new Image(); | |
| + objNext.src = settings.imageArray[settings.act… | |
| + } | |
| + if ( settings.activeImage > 0 ) { | |
| + objPrev = new Image(); | |
| + objPrev.src = settings.imageArray[settings.act… | |
| + } | |
| + } | |
| + /** | |
| + * Remove jQuery lightBox plugin HTML markup | |
| + * | |
| + */ | |
| + function _finish() { | |
| + $('#jquery-lightbox').remove(); | |
| + $('#jquery-overlay').fadeOut(function() { $('#jquery-o… | |
| + // Show some elements to avoid conflict with overlay i… | |
| + $('embed, object, select').css({ 'visibility' : 'visib… | |
| + } | |
| + /** | |
| + / THIRD FUNCTION | |
| + * getPageSize() by quirksmode.com | |
| + * | |
| + * @return Array Return an array with page width, height and w… | |
| + */ | |
| + function ___getPageSize() { | |
| + var xScroll, yScroll; | |
| + if (window.innerHeight && window.scrollMaxY) { | |
| + xScroll = window.innerWidth + window.scrollMax… | |
| + yScroll = window.innerHeight + window.scrollMa… | |
| + } else if (document.body.scrollHeight > document.body.… | |
| + xScroll = document.body.scrollWidth; | |
| + yScroll = document.body.scrollHeight; | |
| + } else { // Explorer Mac...would also work in Explorer… | |
| + xScroll = document.body.offsetWidth; | |
| + yScroll = document.body.offsetHeight; | |
| + } | |
| + var windowWidth, windowHeight; | |
| + if (self.innerHeight) { // all except Explorer | |
| + if(document.documentElement.clientWidth){ | |
| + windowWidth = document.documentElement… | |
| + } else { | |
| + windowWidth = self.innerWidth; | |
| + } | |
| + windowHeight = self.innerHeight; | |
| + } else if (document.documentElement && document.docume… | |
| + windowWidth = document.documentElement.clientW… | |
| + windowHeight = document.documentElement.client… | |
| + } else if (document.body) { // other Explorers | |
| + windowWidth = document.body.clientWidth; | |
| + windowHeight = document.body.clientHeight; | |
| + } | |
| + // for small pages with total height less then height … | |
| + if(yScroll < windowHeight){ | |
| + pageHeight = windowHeight; | |
| + } else { | |
| + pageHeight = yScroll; | |
| + } | |
| + // for small pages with total width less then width of… | |
| + if(xScroll < windowWidth){ | |
| + pageWidth = xScroll; | |
| + } else { | |
| + pageWidth = windowWidth; | |
| + } | |
| + arrayPageSize = new Array(pageWidth,pageHeight,windowW… | |
| + return arrayPageSize; | |
| + }; | |
| + /** | |
| + / THIRD FUNCTION | |
| + * getPageScroll() by quirksmode.com | |
| + * | |
| + * @return Array Return an array with x,y page scroll values. | |
| + */ | |
| + function ___getPageScroll() { | |
| + var xScroll, yScroll; | |
| + if (self.pageYOffset) { | |
| + yScroll = self.pageYOffset; | |
| + xScroll = self.pageXOffset; | |
| + } else if (document.documentElement && document.docume… | |
| + yScroll = document.documentElement.scrollTop; | |
| + xScroll = document.documentElement.scrollLeft; | |
| + } else if (document.body) {// all other Explorers | |
| + yScroll = document.body.scrollTop; | |
| + xScroll = document.body.scrollLeft; | |
| + } | |
| + arrayPageScroll = new Array(xScroll,yScroll); | |
| + return arrayPageScroll; | |
| + }; | |
| + /** | |
| + * Stop the code execution from a escified time in milisecond | |
| + * | |
| + */ | |
| + function ___pause(ms) { | |
| + var date = new Date(); | |
| + curDate = null; | |
| + do { var curDate = new Date(); } | |
| + while ( curDate - date < ms); | |
| + }; | |
| + // Return the jQuery object for chaining. The unbind method is… | |
| + return this.unbind('click').click(_initialize); | |
| + }; | |
| +})(jQuery); // Call and execute the function immediately passing the jQuery ob… | |
| +\ No newline at end of file | |
| diff --git a/app/assets/javascripts/lightbox.js b/app/assets/javascripts/lightb… | |
| @@ -1,426 +0,0 @@ | |
| -/* | |
| - Lightbox JS: Fullsize Image Overlays | |
| - by Lokesh Dhakar - http://www.huddletogether.com | |
| - | |
| - For more information on this script, visit: | |
| - http://huddletogether.com/projects/lightbox/ | |
| - | |
| - Script featured on Dynamic Drive code library Jan 24th, 06': | |
| - http://www.dynamicdrive.com | |
| - | |
| - Licensed under the Creative Commons Attribution 2.5 License - http://c… | |
| - (basically, do anything you want, just leave my name and link) | |
| - | |
| - Table of Contents | |
| - ----------------- | |
| - Configuration | |
| - | |
| - Functions | |
| - - getPageScroll() | |
| - - getPageSize() | |
| - - pause() | |
| - - getKey() | |
| - - listenKey() | |
| - - showLightbox() | |
| - - hideLightbox() | |
| - - initLightbox() | |
| - - addLoadEvent() | |
| - | |
| - Function Calls | |
| - - addLoadEvent(initLightbox) | |
| - | |
| -*/ | |
| - | |
| - | |
| - | |
| -// | |
| -// Configuration | |
| -// | |
| - | |
| -// If you would like to use a custom loading image or close button reference t… | |
| -var loadingImage = '/assets/loading.gif'; | |
| -var closeButton = '/assets/close.gif'; | |
| - | |
| - | |
| - | |
| - | |
| - | |
| -// | |
| -// getPageScroll() | |
| -// Returns array with x,y page scroll values. | |
| -// Core code from - quirksmode.org | |
| -// | |
| -function getPageScroll(){ | |
| - | |
| - var yScroll; | |
| - | |
| - if (self.pageYOffset) { | |
| - yScroll = self.pageYOffset; | |
| - } else if (document.documentElement && document.documentElement.scroll… | |
| - yScroll = document.documentElement.scrollTop; | |
| - } else if (document.body) {// all other Explorers | |
| - yScroll = document.body.scrollTop; | |
| - } | |
| - | |
| - arrayPageScroll = new Array('',yScroll) | |
| - return arrayPageScroll; | |
| -} | |
| - | |
| - | |
| - | |
| -// | |
| -// getPageSize() | |
| -// Returns array with page width, height and window width, height | |
| -// Core code from - quirksmode.org | |
| -// Edit for Firefox by pHaez | |
| -// | |
| -function getPageSize(){ | |
| - | |
| - var xScroll, yScroll; | |
| - | |
| - if (window.innerHeight && window.scrollMaxY) { | |
| - xScroll = document.body.scrollWidth; | |
| - yScroll = window.innerHeight + window.scrollMaxY; | |
| - } else if (document.body.scrollHeight > document.body.offsetHeight){ /… | |
| - xScroll = document.body.scrollWidth; | |
| - yScroll = document.body.scrollHeight; | |
| - } else { // Explorer Mac...would also work in Explorer 6 Strict, Mozil… | |
| - xScroll = document.body.offsetWidth; | |
| - yScroll = document.body.offsetHeight; | |
| - } | |
| - | |
| - var windowWidth, windowHeight; | |
| - if (self.innerHeight) { // all except Explorer | |
| - windowWidth = self.innerWidth; | |
| - windowHeight = self.innerHeight; | |
| - } else if (document.documentElement && document.documentElement.client… | |
| - windowWidth = document.documentElement.clientWidth; | |
| - windowHeight = document.documentElement.clientHeight; | |
| - } else if (document.body) { // other Explorers | |
| - windowWidth = document.body.clientWidth; | |
| - windowHeight = document.body.clientHeight; | |
| - } | |
| - | |
| - // for small pages with total height less then height of the viewport | |
| - if(yScroll < windowHeight){ | |
| - pageHeight = windowHeight; | |
| - } else { | |
| - pageHeight = yScroll; | |
| - } | |
| - | |
| - // for small pages with total width less then width of the viewport | |
| - if(xScroll < windowWidth){ | |
| - pageWidth = windowWidth; | |
| - } else { | |
| - pageWidth = xScroll; | |
| - } | |
| - | |
| - | |
| - arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeigh… | |
| - return arrayPageSize; | |
| -} | |
| - | |
| - | |
| -// | |
| -// pause(numberMillis) | |
| -// Pauses code execution for specified time. Uses busy code, not good. | |
| -// Code from http://www.faqts.com/knowledge_base/view.phtml/aid/1602 | |
| -// | |
| -function pause(numberMillis) { | |
| - var now = new Date(); | |
| - var exitTime = now.getTime() + numberMillis; | |
| - while (true) { | |
| - now = new Date(); | |
| - if (now.getTime() > exitTime) | |
| - return; | |
| - } | |
| -} | |
| - | |
| -// | |
| -// getKey(key) | |
| -// Gets keycode. If 'x' is pressed then it hides the lightbox. | |
| -// | |
| - | |
| -function getKey(e){ | |
| - if (e == null) { // ie | |
| - keycode = event.keyCode; | |
| - } else { // mozilla | |
| - keycode = e.which; | |
| - } | |
| - key = String.fromCharCode(keycode).toLowerCase(); | |
| - | |
| - if(key == 'x'){ hideLightbox(); } | |
| -} | |
| - | |
| - | |
| -// | |
| -// listenKey() | |
| -// | |
| -function listenKey () { document.onkeypress = getKey; } | |
| - | |
| - | |
| -// | |
| -// showLightbox() | |
| -// Preloads images. Pleaces new image in lightbox then centers and displays. | |
| -// | |
| -function showLightbox(objLink) | |
| -{ | |
| - // prep objects | |
| - var objOverlay = document.getElementById('overlay'); | |
| - var objLightbox = document.getElementById('lightbox'); | |
| - var objCaption = document.getElementById('lightboxCaption'); | |
| - var objImage = document.getElementById('lightboxImage'); | |
| - var objLoadingImage = document.getElementById('loadingImage'); | |
| - var objLightboxDetails = document.getElementById('lightboxDetails'); | |
| - | |
| - | |
| - var arrayPageSize = getPageSize(); | |
| - var arrayPageScroll = getPageScroll(); | |
| - | |
| - // center loadingImage if it exists | |
| - if (objLoadingImage) { | |
| - objLoadingImage.style.top = (arrayPageScroll[1] + ((arrayPageS… | |
| - objLoadingImage.style.left = (((arrayPageSize[0] - 20 - objLoa… | |
| - objLoadingImage.style.display = 'block'; | |
| - } | |
| - | |
| - // set height of Overlay to take up whole page and show | |
| - objOverlay.style.height = (arrayPageSize[1] + 'px'); | |
| - objOverlay.style.display = 'block'; | |
| - | |
| - // preload image | |
| - imgPreload = new Image(); | |
| - | |
| - imgPreload.onload=function(){ | |
| - objImage.src = objLink.href; | |
| - | |
| - // center lightbox and make sure that the top and left values … | |
| - // and the image placed outside the viewport | |
| - var lightboxTop = arrayPageScroll[1] + ((arrayPageSize[3] - 35… | |
| - var lightboxLeft = ((arrayPageSize[0] - 20 - imgPreload.width)… | |
| - | |
| - objLightbox.style.top = (lightboxTop < 0) ? "0px" : lightboxTo… | |
| - objLightbox.style.left = (lightboxLeft < 0) ? "0px" : lightbox… | |
| - | |
| - | |
| - objLightboxDetails.style.width = imgPreload.width + 'px'; | |
| - | |
| - if(objLink.getAttribute('title')){ | |
| - objCaption.style.display = 'block'; | |
| - //objCaption.style.width = imgPreload.width + 'px'; | |
| - objCaption.innerHTML = objLink.getAttribute('title'); | |
| - } else { | |
| - objCaption.style.display = 'none'; | |
| - } | |
| - | |
| - // A small pause between the image loading and displaying is r… | |
| - // this prevents the previous image displaying for a short bur… | |
| - if (navigator.appVersion.indexOf("MSIE")!=-1){ | |
| - pause(250); | |
| - } | |
| - | |
| - if (objLoadingImage) { objLoadingImage.style.display = … | |
| - objLightbox.style.display = 'block'; | |
| - | |
| - // After image is loaded, update the overlay height as the new… | |
| - // increased the overall page height. | |
| - arrayPageSize = getPageSize(); | |
| - objOverlay.style.height = (arrayPageSize[1] + 'px'); | |
| - | |
| - // Check for 'x' keypress | |
| - listenKey(); | |
| - | |
| - return false; | |
| - } | |
| - | |
| - imgPreload.src = objLink.href; | |
| - | |
| -} | |
| - | |
| - | |
| - | |
| - | |
| - | |
| -// | |
| -// hideLightbox() | |
| -// | |
| -function hideLightbox() | |
| -{ | |
| - // get objects | |
| - objOverlay = document.getElementById('overlay'); | |
| - objLightbox = document.getElementById('lightbox'); | |
| - | |
| - // hide lightbox and overlay | |
| - objOverlay.style.display = 'none'; | |
| - objLightbox.style.display = 'none'; | |
| - | |
| - // disable keypress listener | |
| - document.onkeypress = ''; | |
| -} | |
| - | |
| - | |
| - | |
| - | |
| -// | |
| -// initLightbox() | |
| -// Function runs on window load, going through link tags looking for rel="ligh… | |
| -// These links receive onclick events that enable the lightbox display for the… | |
| -// The function also inserts html markup at the top of the page which will be … | |
| -// container for the overlay pattern and the inline image. | |
| -// | |
| -function initLightbox() | |
| -{ | |
| - | |
| - if (!document.getElementsByTagName){ return; } | |
| - var anchors = document.getElementsByTagName("a"); | |
| - | |
| - // loop through all anchor tags | |
| - for (var i=0; i<anchors.length; i++){ | |
| - var anchor = anchors[i]; | |
| - | |
| - if (anchor.getAttribute("href") && (anchor.getAttribute("rel")… | |
| - anchor.onclick = function () {showLightbox(this); retu… | |
| - } | |
| - } | |
| - | |
| - // the rest of this code inserts html at the top of the page that look… | |
| - // | |
| - // <div id="overlay"> | |
| - // <a href="#" onclick="hideLightbox(); return false;">… | |
| - // </div> | |
| - // <div id="lightbox"> | |
| - // <a href="#" onclick="hideLightbox(); return false;" … | |
| - // <img id="closeButton" /> | |
| - // <img id="lightboxImage" /> | |
| - // </a> | |
| - // <div id="lightboxDetails"> | |
| - // <div id="lightboxCaption"></div> | |
| - // <div id="keyboardMsg"></div> | |
| - // </div> | |
| - // </div> | |
| - | |
| - var objBody = document.getElementsByTagName("body").item(0); | |
| - | |
| - // create overlay div and hardcode some functional styles (aesthetic s… | |
| - var objOverlay = document.createElement("div"); | |
| - objOverlay.setAttribute('id','overlay'); | |
| - objOverlay.onclick = function () {hideLightbox(); return false;} | |
| - objOverlay.style.display = 'none'; | |
| - objOverlay.style.position = 'absolute'; | |
| - objOverlay.style.top = '0'; | |
| - objOverlay.style.left = '0'; | |
| - objOverlay.style.zIndex = '90'; | |
| - objOverlay.style.width = '100%'; | |
| - objBody.insertBefore(objOverlay, objBody.firstChild); | |
| - | |
| - var arrayPageSize = getPageSize(); | |
| - var arrayPageScroll = getPageScroll(); | |
| - | |
| - // preload and create loader image | |
| - var imgPreloader = new Image(); | |
| - | |
| - // if loader image found, create link to hide lightbox and create load… | |
| - imgPreloader.onload=function(){ | |
| - | |
| - var objLoadingImageLink = document.createElement("a"); | |
| - objLoadingImageLink.setAttribute('href','#'); | |
| - objLoadingImageLink.onclick = function () {hideLightbox(); ret… | |
| - objOverlay.appendChild(objLoadingImageLink); | |
| - | |
| - var objLoadingImage = document.createElement("img"); | |
| - objLoadingImage.src = loadingImage; | |
| - objLoadingImage.setAttribute('id','loadingImage'); | |
| - objLoadingImage.style.position = 'absolute'; | |
| - objLoadingImage.style.zIndex = '150'; | |
| - objLoadingImageLink.appendChild(objLoadingImage); | |
| - | |
| - imgPreloader.onload=function(){}; // clear onLoa… | |
| - | |
| - return false; | |
| - } | |
| - | |
| - imgPreloader.src = loadingImage; | |
| - | |
| - // create lightbox div, same note about styles as above | |
| - var objLightbox = document.createElement("div"); | |
| - objLightbox.setAttribute('id','lightbox'); | |
| - objLightbox.style.display = 'none'; | |
| - objLightbox.style.position = 'absolute'; | |
| - objLightbox.style.zIndex = '100'; | |
| - objBody.insertBefore(objLightbox, objOverlay.nextSibling); | |
| - | |
| - // create link | |
| - var objLink = document.createElement("a"); | |
| - objLink.setAttribute('href','#'); | |
| - objLink.setAttribute('title','Click to close'); | |
| - objLink.onclick = function () {hideLightbox(); return false;} | |
| - objLightbox.appendChild(objLink); | |
| - | |
| - // preload and create close button image | |
| - var imgPreloadCloseButton = new Image(); | |
| - | |
| - // if close button image found, | |
| - imgPreloadCloseButton.onload=function(){ | |
| - | |
| - var objCloseButton = document.createElement("img"); | |
| - objCloseButton.src = closeButton; | |
| - objCloseButton.setAttribute('id','closeButton'); | |
| - objCloseButton.style.position = 'absolute'; | |
| - objCloseButton.style.zIndex = '200'; | |
| - objLink.appendChild(objCloseButton); | |
| - | |
| - return false; | |
| - } | |
| - | |
| - imgPreloadCloseButton.src = closeButton; | |
| - | |
| - // create image | |
| - var objImage = document.createElement("img"); | |
| - objImage.setAttribute('id','lightboxImage'); | |
| - objLink.appendChild(objImage); | |
| - | |
| - // create details div, a container for the caption and keyboard message | |
| - var objLightboxDetails = document.createElement("div"); | |
| - objLightboxDetails.setAttribute('id','lightboxDetails'); | |
| - objLightbox.appendChild(objLightboxDetails); | |
| - | |
| - // create caption | |
| - var objCaption = document.createElement("div"); | |
| - objCaption.setAttribute('id','lightboxCaption'); | |
| - objCaption.style.display = 'none'; | |
| - objLightboxDetails.appendChild(objCaption); | |
| - | |
| - // create keyboard message | |
| - var objKeyboardMsg = document.createElement("div"); | |
| - objKeyboardMsg.setAttribute('id','keyboardMsg'); | |
| - objKeyboardMsg.innerHTML = 'press <kbd>x</kbd> to close'; | |
| - objLightboxDetails.appendChild(objKeyboardMsg); | |
| - | |
| - | |
| -} | |
| - | |
| - | |
| - | |
| - | |
| -// | |
| -// addLoadEvent() | |
| -// Adds event to window.onload without overwriting currently assigned onload f… | |
| -// Function found at Simon Willison's weblog - http://simon.incutio.com/ | |
| -// | |
| -function addLoadEvent(func) | |
| -{ | |
| - var oldonload = window.onload; | |
| - if (typeof window.onload != 'function'){ | |
| - window.onload = func; | |
| - } else { | |
| - window.onload = function(){ | |
| - oldonload(); | |
| - func(); | |
| - } | |
| - } | |
| - | |
| -} | |
| - | |
| - | |
| - | |
| -addLoadEvent(initLightbox); // run initLightbox onLoad | |
| diff --git a/app/assets/stylesheets/jquery.lightbox-0.5.css b/app/assets/styles… | |
| @@ -0,0 +1,101 @@ | |
| +/** | |
| + * jQuery lightBox plugin | |
| + * This jQuery plugin was inspired and based on Lightbox 2 by Lokesh Dhakar (h… | |
| + * and adapted to me for use like a plugin from jQuery. | |
| + * @name jquery-lightbox-0.5.css | |
| + * @author Leandro Vieira Pinho - http://leandrovieira.com | |
| + * @version 0.5 | |
| + * @date April 11, 2008 | |
| + * @category jQuery plugin | |
| + * @copyright (c) 2008 Leandro Vieira Pinho (leandrovieira.com) | |
| + * @license CCAttribution-ShareAlike 2.5 Brazil - http://creativecommons.org/l… | |
| + * @example Visit http://leandrovieira.com/projects/jquery/lightbox/ for more … | |
| + */ | |
| +#jquery-overlay { | |
| + position: absolute; | |
| + top: 0; | |
| + left: 0; | |
| + z-index: 90; | |
| + width: 100%; | |
| + height: 500px; | |
| +} | |
| +#jquery-lightbox { | |
| + position: absolute; | |
| + top: 0; | |
| + left: 0; | |
| + width: 100%; | |
| + z-index: 100; | |
| + text-align: center; | |
| + line-height: 0; | |
| +} | |
| +#jquery-lightbox a img { border: none; } | |
| +#lightbox-container-image-box { | |
| + position: relative; | |
| + background-color: #fff; | |
| + width: 250px; | |
| + height: 250px; | |
| + margin: 0 auto; | |
| +} | |
| +#lightbox-container-image { padding: 10px; } | |
| +#lightbox-loading { | |
| + position: absolute; | |
| + top: 40%; | |
| + left: 0%; | |
| + height: 25%; | |
| + width: 100%; | |
| + text-align: center; | |
| + line-height: 0; | |
| +} | |
| +#lightbox-nav { | |
| + position: absolute; | |
| + top: 0; | |
| + left: 0; | |
| + height: 100%; | |
| + width: 100%; | |
| + z-index: 10; | |
| +} | |
| +#lightbox-container-image-box > #lightbox-nav { left: 0; } | |
| +#lightbox-nav a { outline: none;} | |
| +#lightbox-nav-btnPrev, #lightbox-nav-btnNext { | |
| + width: 49%; | |
| + height: 100%; | |
| + zoom: 1; | |
| + display: block; | |
| +} | |
| +#lightbox-nav-btnPrev { | |
| + left: 0; | |
| + float: left; | |
| +} | |
| +#lightbox-nav-btnNext { | |
| + right: 0; | |
| + float: right; | |
| +} | |
| +#lightbox-container-image-data-box { | |
| + font: 10px Verdana, Helvetica, sans-serif; | |
| + background-color: #fff; | |
| + margin: 0 auto; | |
| + line-height: 1.4em; | |
| + overflow: auto; | |
| + width: 100%; | |
| + padding: 0 10px 0; | |
| +} | |
| +#lightbox-container-image-data { | |
| + padding: 0 10px; | |
| + color: #666; | |
| +} | |
| +#lightbox-container-image-data #lightbox-image-details { | |
| + width: 70%; | |
| + float: left; | |
| + text-align: left; | |
| +} | |
| +#lightbox-image-details-caption { font-weight: bold; } | |
| +#lightbox-image-details-currentNumber { | |
| + display: block; | |
| + clear: left; | |
| + padding-bottom: 1.0em; | |
| +} | |
| +#lightbox-secNav-btnClose { | |
| + width: 66px; | |
| + float: right; | |
| + padding-bottom: 0.7em; | |
| +} | |
| +\ No newline at end of file | |
| diff --git a/app/views/analyze/view.html.erb b/app/views/analyze/view.html.erb | |
| @@ -59,3 +59,10 @@ | |
| </table> | |
| <%= raw(will_paginate @results) %> | |
| + | |
| +<script type="text/javascript"> | |
| +$(function() { | |
| + // Use this example, or... | |
| + $('a[@rel*=lightbox]').lightBox(); | |
| +}); | |
| +</script> | |
| diff --git a/app/views/analyze/view_matches.html.erb b/app/views/analyze/view_m… | |
| @@ -94,3 +94,10 @@ | |
| </tr> | |
| <% end %> | |
| </table> | |
| + | |
| +<script type="text/javascript"> | |
| +$(function() { | |
| + // Use this example, or... | |
| + $('a[@rel*=lightbox]').lightBox(); | |
| +}); | |
| +</script> |