summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorThe Great Git Migration2007-05-01 18:46:50 (GMT)
committerThe Great Git Migration2007-05-01 18:46:50 (GMT)
commitd598b335255e5da684e88c81534bdc63fcc7c4f8 (patch)
tree8e39f89e8a952af87f249d6fb1cd3bd9d497ad1a
parent12af92113069b411eb85ab291b3a672a83d6010c (diff)
This commit was manufactured as part of Drupal's Great Git Migration to5--1-0-1
create tag 'DRUPAL-5--1-0-1'. Sprout from unlabeled-1.1.8 2007-05-01 18:46:46 UTC Stella Power <stella@66894.no-reply.drupal.org> 'drupal 5 version' Cherrypick from unlabeled-1.1.6 2007-05-01 18:46:47 UTC Stella Power <stella@66894.no-reply.drupal.org> 'drupal 5 version': images/close_lite.gif images/loading_lite.gif images/overlay.png js/lightbox_lite.js Cherrypick from unlabeled-1.2.2 2007-05-01 18:46:45 UTC Stella Power <stella@66894.no-reply.drupal.org> 'drupal 5 version': js/image_nodes_nogroup.js lightbox_lite.css Cherrypick from unlabeled-1.1.2 2007-05-01 18:46:43 UTC Stella Power <stella@66894.no-reply.drupal.org> 'drupal 5 version': lightbox2.install Cherrypick from unlabeled-1.1.4 2007-05-01 18:46:42 UTC Stella Power <stella@66894.no-reply.drupal.org> 'drupal 5 version': lightbox2.info Cherrypick from unlabeled-1.10.2 2007-05-01 18:46:41 UTC Stella Power <stella@66894.no-reply.drupal.org> 'drupal 5 version': lightbox.css Cherrypick from unlabeled-1.12.2 2007-05-01 18:46:40 UTC Stella Power <stella@66894.no-reply.drupal.org> 'drupal 5 version': README.txt Cherrypick from unlabeled-1.18.2 2007-05-01 18:46:44 UTC Stella Power <stella@66894.no-reply.drupal.org> 'drupal 5 version': lightbox2.module Cherrypick from unlabeled-1.4.2 2007-05-01 18:46:48 UTC Stella Power <stella@66894.no-reply.drupal.org> 'drupal 5 version': js/image_nodes.js Cherrypick from unlabeled-1.6.2 2007-05-01 18:46:49 UTC Stella Power <stella@66894.no-reply.drupal.org> 'drupal 5 version': js/lightbox.js
-rw-r--r--README.txt91
-rw-r--r--images/close_lite.gifbin0 -> 109 bytes
-rw-r--r--images/loading_lite.gifbin0 -> 2364 bytes
-rw-r--r--images/overlay.pngbin0 -> 279 bytes
-rw-r--r--js/image_nodes.js25
-rw-r--r--js/image_nodes_nogroup.js25
-rw-r--r--js/lightbox.js751
-rw-r--r--js/lightbox_lite.js438
-rw-r--r--lightbox.css136
-rw-r--r--lightbox2.info3
-rw-r--r--lightbox2.install23
-rw-r--r--lightbox2.module266
-rw-r--r--lightbox_lite.css28
13 files changed, 1786 insertions, 0 deletions
diff --git a/README.txt b/README.txt
new file mode 100644
index 0000000..c0c55c2
--- /dev/null
+++ b/README.txt
@@ -0,0 +1,91 @@
+LIGHTBOX V2 MODULE
+------------------
+
+Drupal Lightbox V2 Module:
+By: Mark Ashmead
+Mailto: bugzie@gmail.com
+Co-maintainer: Stella Power (http://drupal.org/user/66894)
+
+Licensed under the GNU/GPL License
+
+Permission has been granted by Lokesh Dhakar to distribute the lightbox.js file via Drupal.org under this license scheme, as allowed by the Creative Commons License.
+
+This module enables the use of lightbox V2 which places images above your current page, not within. This frees you from the constraints of the layout, particularly column widths.
+
+---------------------------------------------------------------------------------------------------------
+
+Pre-Installation
+----------------
+
+Due to variation in licensing, you will need to download the Scriptaculous/Prototype libraries seperately. Please visit: http://script.aculo.us/downloads - and download the latest version of the libraries. You will then need to copy the files located in \lib and \src directories of this download into the \lightbox2\js\ directory of the LightboxV2 module.
+
+The files required are:
+
+\lib\prototype.js
+\src\builder.js
+\src\dragdrop.js
+\src\effects.js
+\src\scriptaculous.js
+\src\slider.js
+\src\unittest.js
+
+When copied, the directory should look like:
+
+\lightbox2\js\prototype.js
+\lightbox2\js\builder.js
+\lightbox2\js\dragdrop.js
+\lightbox2\js\effects.js
+\lightbox2\js\scriptaculous.js
+\lightbox2\js\slider.js
+\lightbox2\js\unittest.js
+
+
+Installation
+------------
+1. Copy lightbox2 folder to modules directory
+2. At admin/modules enable the module
+3. Add rel="lightbox" attribute to any link tag to activate the lightbox. For example:
+
+<a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>
+
+Optional: Use the title attribute if you want to show a caption.
+
+4. If you have a set of related images that you would like to group, follow step one but additionally include a group name between square brackets in the rel attribute. For example:
+
+<a href="images/image-1.jpg" rel="lightbox[roadtrip]">image #1</a>
+<a href="images/image-2.jpg" rel="lightbox[roadtrip]">image #2</a>
+<a href="images/image-3.jpg" rel="lightbox[roadtrip]">image #3</a>
+
+No limits to the number of image sets per page or how many images are allowed in each set. Go nuts!
+
+5. If you wish to turn the caption into a link, format your caption in the following way:
+
+<a href="images/image-1.jpg" rel="lightbox" title='<a href="http://www.yourlink.com">Clicky Visit Link</a>'>image #1</a>
+
+
+Information
+------------
+
+This module will include the lightbox CSS and JS files in your Drupal Installation without the need to edit the theme. The module comes with a Lightbox2 Lite option which does not use the Scriptaculous/Prototype libraries; it is therefore less likely to conflict with anything else.
+
+Known Issues:
+-------------
+
+Image Issues - An issue has been identified with the loading of certain images when using the module. (close.gif, prev.gif, next.gif)
+
+If your installation of Drupal exists in the root of your domain, i.e., www.yourinstallation.com then you shouldn't have any problems. The issue only occurs when Drupal is installed in a subdirectory, i.e., www.yourinstallation.com/subdirectory.
+
+If this is the case, you will need to edit the lightbox.js on lines 63, 64 and 65 to reflect the fully qualified URL of your images. In the above case, this would be as follows;
+
+var fileLoadingImage = "/modules/lightbox2/images/loading.gif";
+var fileBottomNavCloseImage = "/modules/lightbox2/images/closelabel.gif";
+var fileBottomNavZoomImage = "/modules/lightbox2/images/expand.gif"; //Update to 2.02+
+
+should be changed to
+
+var fileLoadingImage = "/subdirectory/modules/lightbox2/images/loading.gif";
+var fileBottomNavCloseImage = "/subdirectory/modules/lightbox2/images/closelabel.gif";
+var fileBottomNavZoomImage = "/subdirectory/modules/lightbox2/images/expand.gif"; //Update to 2.02+
+
+There may be other methods that can be used to acheive this, but this should be the simplest for those with little or no programming experience. If you choose to use Lightbox2 Lite option, then you will no to edit the lightbox_lite.js file in a similar manner.
+
diff --git a/images/close_lite.gif b/images/close_lite.gif
new file mode 100644
index 0000000..773013b
--- /dev/null
+++ b/images/close_lite.gif
Binary files differ
diff --git a/images/loading_lite.gif b/images/loading_lite.gif
new file mode 100644
index 0000000..fbe57be
--- /dev/null
+++ b/images/loading_lite.gif
Binary files differ
diff --git a/images/overlay.png b/images/overlay.png
new file mode 100644
index 0000000..7cee298
--- /dev/null
+++ b/images/overlay.png
Binary files differ
diff --git a/js/image_nodes.js b/js/image_nodes.js
new file mode 100644
index 0000000..b3febc8
--- /dev/null
+++ b/js/image_nodes.js
@@ -0,0 +1,25 @@
+// Image Node Auto-Format with Auto Image Grouping
+// Steve McKenzie
+
+function lightbox2_image_nodes() {
+ var nodes = document.getElementsByClassName("image");
+ for (var i = 0; i < nodes.length; i++) {
+ if (Element.hasClassName(nodes[i], "image-thumbnail")) {
+ var parent = nodes[i].parentNode;
+ parent.rel = "lightbox[node_thumbnails]";
+ parent.title = nodes[i].alt.concat("<br /><br /><a href=\"" + parent.href + "\">View Image Information</a>");
+ parent.href = nodes[i].src.replace(".thumbnail", "");
+ //parent.title = nodes[i].alt;
+ }
+ }
+}
+
+try {
+ if (isJsEnabled()) {
+ addLoadEvent(lightbox2_image_nodes);
+ }
+} catch (e) {
+ if (Drupal.jsEnabled) {
+ $(document).ready(lightbox2_image_nodes);
+ }
+}
diff --git a/js/image_nodes_nogroup.js b/js/image_nodes_nogroup.js
new file mode 100644
index 0000000..bd11466
--- /dev/null
+++ b/js/image_nodes_nogroup.js
@@ -0,0 +1,25 @@
+// Image Node Auto-Format
+// Steve McKenzie
+
+function lightbox2_image_nodes() {
+ var nodes = document.getElementsByClassName("image");
+ for (var i = 0; i < nodes.length; i++) {
+ if (Element.hasClassName(nodes[i], "image-thumbnail")) {
+ var parent = nodes[i].parentNode;
+ parent.rel = "lightbox";
+ parent.title = nodes[i].alt.concat("<br /><br /><a href=\"" + parent.href + "\">View Image Information</a>");
+ parent.href = nodes[i].src.replace(".thumbnail", "");
+ //parent.title = nodes[i].alt;
+ }
+ }
+}
+
+try {
+ if (isJsEnabled()) {
+ addLoadEvent(lightbox2_image_nodes);
+ }
+} catch (e) {
+ if (Drupal.jsEnabled) {
+ $(document).ready(lightbox2_image_nodes);
+ }
+}
diff --git a/js/lightbox.js b/js/lightbox.js
new file mode 100644
index 0000000..d25e0aa
--- /dev/null
+++ b/js/lightbox.js
@@ -0,0 +1,751 @@
+// -----------------------------------------------------------------------------------
+//
+// Lightbox v2.02
+// by Lokesh Dhakar - http://www.huddletogether.com
+// 3/31/06
+//
+// For more information on this script, visit:
+// http://huddletogether.com/projects/lightbox2/
+//
+// Additional elements added by Mark Ashmead.
+//
+// Permission has been granted to Mark Ashmead to distribute this file via Drupal.org
+// Under GPL license.
+// Mailto: bugzie@gmail.com
+//
+// Credit also due to those who have helped, inspired, and made their code available to the public.
+// Including: Scott Upton(uptonic.com), Peter-Paul Koch(quirksmode.org), Thomas Fuchs(mir.aculo.us), and others.
+//
+//
+// -----------------------------------------------------------------------------------
+/*
+
+ Table of Contents
+ -----------------
+ Configuration
+ Global Variables
+
+ Extending Built-in Objects
+ - Object.extend(Element)
+ - Array.prototype.removeDuplicates()
+ - Array.prototype.empty()
+
+ Lightbox Class Declaration
+ - initialize()
+ - start()
+ - changeImage()
+ - resizeImageContainer()
+ - showImage()
+ - updateDetails()
+ - updateNav()
+ - enableKeyboardNav()
+ - disableKeyboardNav()
+ - keyboardAction()
+ - preloadNeighborImages()
+ - end()
+
+ Miscellaneous Functions
+ - getPageScroll()
+ - getPageSize()
+ - getKey()
+ - listenKey()
+ - showSelectBoxes()
+ - hideSelectBoxes()
+ - pause()
+ - initLightbox()
+
+ Function Calls
+ - addLoadEvent(initLightbox)
+
+*/
+// -----------------------------------------------------------------------------------
+
+//
+// Configuration
+//
+//var fileLoadingImage = "/sites/all/modules/lightbox2/images/loading.gif";
+//var fileBottomNavCloseImage = "/sites/all/modules/lightbox2/images/closelabel.gif";
+//var fileBottomNavZoomImage = "/sites/all/modules/lightbox2/images/expand.gif"; //Update to 2.02+
+
+var resizeSpeed = 7; // controls the speed of the image resizing (1=slowest and 10=fastest)
+
+var borderSize = 10; //if you adjust the padding in the CSS, you will need to update this variable
+
+// -----------------------------------------------------------------------------------
+
+//
+// Global Variables
+//
+var imageArray = new Array;
+var activeImage;
+
+if(resizeSpeed > 10){ resizeSpeed = 10;}
+if(resizeSpeed < 1){ resizeSpeed = 1;}
+resizeDuration = (11 - resizeSpeed) * 0.15;
+
+// -----------------------------------------------------------------------------------
+
+//
+// Additional methods for Element added by SU, Couloir
+// - further additions by Lokesh Dhakar (huddletogether.com)
+//
+Object.extend(Element, {
+ getWidth: function(element) {
+ element = $ID(element);
+ return element.offsetWidth;
+ },
+ setWidth: function(element,w) {
+ element = $ID(element);
+ element.style.width = w +"px";
+ },
+ setHeight: function(element,h) {
+ element = $ID(element);
+ element.style.height = h +"px";
+ },
+ setTop: function(element,t) {
+ element = $ID(element);
+ element.style.top = t +"px";
+ },
+ setSrc: function(element,src) {
+ element = $ID(element);
+ element.src = src;
+ },
+ setHref: function(element,href) {
+ element = $ID(element);
+ element.href = href;
+ },
+ setInnerHTML: function(element,content) {
+ element = $ID(element);
+ element.innerHTML = content;
+ }
+});
+
+// -----------------------------------------------------------------------------------
+
+//
+// Extending built-in Array object
+// - array.removeDuplicates()
+// - array.empty()
+//
+Array.prototype.removeDuplicates = function () {
+ for(i = 1; i < this.length; i++){
+ if(this[i][0] == this[i-1][0]){
+ this.splice(i,1);
+ }
+ }
+}
+
+// -----------------------------------------------------------------------------------
+
+Array.prototype.empty = function () {
+ for(i = 0; i <= this.length; i++){
+ this.shift();
+ }
+}
+
+// -----------------------------------------------------------------------------------
+
+//
+// Lightbox Class Declaration
+// - initialize()
+// - start()
+// - changeImage()
+// - resizeImageContainer()
+// - showImage()
+// - updateDetails()
+// - updateNav()
+// - enableKeyboardNav()
+// - disableKeyboardNav()
+// - keyboardNavAction()
+// - preloadNeighborImages()
+// - end()
+//
+// Structuring of code inspired by Scott Upton (http://www.uptonic.com/)
+//
+var Lightbox = Class.create();
+
+Lightbox.prototype = {
+
+ // initialize()
+ // Constructor runs on completion of the DOM loading. Loops through anchor tags looking for
+ // 'lightbox' references and applies onclick events to appropriate links. The 2nd section of
+ // the function inserts html at the bottom of the page which is used to display the shadow
+ // overlay and the image container.
+ //
+ initialize: function() {
+ 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];
+
+ var relAttribute = String(anchor.getAttribute('rel'));
+
+ // use the string.match() method to catch 'lightbox' references in the rel attribute
+ if (anchor.getAttribute('href') && (relAttribute.toLowerCase().match('lightbox'))){
+ anchor.onclick = function () {myLightbox.start(this); return false;}
+ }
+ }
+
+ // The rest of this code inserts html at the bottom of the page that looks similar to this:
+ //
+ // <div id="overlay"></div>
+ // <div id="lightbox">
+ // <div id="outerImageContainer">
+ // <div id="imageContainer">
+ // <img id="lightboxImage">
+ // <div style="" id="hoverNav">
+ // <a href="#" id="prevLink"></a>
+ // <a href="#" id="nextLink"></a>
+ // </div>
+ // <div id="loading">
+ // <a href="#" id="loadingLink">
+ // <img src="images/loading.gif">
+ // </a>
+ // </div>
+ // </div>
+ // </div>
+ // <div id="imageDataContainer">
+ // <div id="imageData">
+ // <div id="imageDetails">
+ // <span id="caption"></span>
+ // <span id="numberDisplay"></span>
+ // </div>
+ // <div id="bottomNav">
+ // <a href="#" id="bottomNavClose">
+ // <img src="images/close.gif">
+ // </a>
+ // </div>
+ // </div>
+ // </div>
+ // </div>
+
+
+ var objBody = document.getElementsByTagName("body").item(0);
+
+ var objOverlay = document.createElement("div");
+ objOverlay.setAttribute('id','overlay');
+ objOverlay.style.display = 'none';
+ objOverlay.onclick = function() { myLightbox.end(); return false; }
+ objBody.appendChild(objOverlay);
+
+ var objLightbox = document.createElement("div");
+ objLightbox.setAttribute('id','lightbox');
+ objLightbox.style.display = 'none';
+ objBody.appendChild(objLightbox);
+
+ var objOuterImageContainer = document.createElement("div");
+ objOuterImageContainer.setAttribute('id','outerImageContainer');
+ objLightbox.appendChild(objOuterImageContainer);
+
+ var objImageContainer = document.createElement("div");
+ objImageContainer.setAttribute('id','imageContainer');
+ objOuterImageContainer.appendChild(objImageContainer);
+
+ var objLightboxImage = document.createElement("img");
+ objLightboxImage.setAttribute('id','lightboxImage');
+ objImageContainer.appendChild(objLightboxImage);
+
+ var objHoverNav = document.createElement("div");
+ objHoverNav.setAttribute('id','hoverNav');
+ objImageContainer.appendChild(objHoverNav);
+
+ var objPrevLink = document.createElement("a");
+ objPrevLink.setAttribute('id','prevLink');
+ objPrevLink.setAttribute('href','#');
+ objPrevLink.setAttribute('onFocus','if(this.blur)this.blur()'); //Update to 2.02+
+ objHoverNav.appendChild(objPrevLink);
+
+ var objNextLink = document.createElement("a");
+ objNextLink.setAttribute('id','nextLink');
+ objNextLink.setAttribute('href','#');
+ objNextLink.setAttribute('onFocus','if(this.blur)this.blur()'); //Update to 2.02+
+ objHoverNav.appendChild(objNextLink);
+
+ var objLoading = document.createElement("div");
+ objLoading.setAttribute('id','loading');
+ objImageContainer.appendChild(objLoading);
+
+ var objLoadingLink = document.createElement("a");
+ objLoadingLink.setAttribute('id','loadingLink');
+ objLoadingLink.setAttribute('href','#');
+ objLoadingLink.onclick = function() { myLightbox.end(); return false; }
+ objLoading.appendChild(objLoadingLink);
+
+ //var objLoadingImage = document.createElement("img");
+// objLoadingImage.setAttribute('src', fileLoadingImage);
+// objLoadingLink.appendChild(objLoadingImage);
+
+ var objImageDataContainer = document.createElement("div");
+ objImageDataContainer.setAttribute('id','imageDataContainer');
+ objImageDataContainer.className = 'clearfix';
+ objLightbox.appendChild(objImageDataContainer);
+
+ var objImageData = document.createElement("div");
+ objImageData.setAttribute('id','imageData');
+ objImageDataContainer.appendChild(objImageData);
+
+ var objImageDetails = document.createElement("div");
+ objImageDetails.setAttribute('id','imageDetails');
+ objImageData.appendChild(objImageDetails);
+
+ var objCaption = document.createElement("span");
+ objCaption.setAttribute('id','caption');
+ objImageDetails.appendChild(objCaption);
+
+ var objNumberDisplay = document.createElement("span");
+ objNumberDisplay.setAttribute('id','numberDisplay');
+ objImageDetails.appendChild(objNumberDisplay);
+
+ var objBottomNav = document.createElement("div");
+ objBottomNav.setAttribute('id','bottomNav');
+ objImageData.appendChild(objBottomNav);
+
+ //Start Close button Placement
+ var objBottomNavCloseLink = document.createElement("a");
+ objBottomNavCloseLink.setAttribute('id','bottomNavClose');
+ objBottomNavCloseLink.setAttribute('href','#');
+ objBottomNavCloseLink.onclick = function() { myLightbox.end(); return false; }
+ objBottomNav.appendChild(objBottomNavCloseLink);
+
+ //var objBottomNavCloseImage = document.createElement("img");
+ //objBottomNavCloseImage.setAttribute('src', fileBottomNavCloseImage);
+ //objBottomNavCloseLink.setAttribute('onFocus','if(this.blur)this.blur()'); //Update to 2.02+
+ //objBottomNavCloseLink.appendChild(objBottomNavCloseImage);
+ //End Close button Placement
+
+ //Start - Update to 2.02+
+ var objBottomNavZoomLink = document.createElement("a");
+ objBottomNavZoomLink.setAttribute('id','bottomNavZoom');
+ objBottomNavZoomLink.setAttribute('href','#');
+ objBottomNavZoomLink.setAttribute('onFocus','if(this.blur)this.blur()'); //Update to 2.02+
+ objBottomNavZoomLink.onclick = function() { myLightbox.changeImage(activeImage,'TRUE'); return false; }
+ objBottomNav.appendChild(objBottomNavZoomLink);
+
+ //var objBottomNavZoomImage = document.createElement("img");
+ //objBottomNavZoomImage.setAttribute('src', fileBottomNavZoomImage);
+ //objBottomNavZoomLink.appendChild(objBottomNavZoomImage);
+ //End - Update to 2.02+
+ },
+
+ //
+ // start()
+ // Display overlay and lightbox. If image is part of a set, add siblings to imageArray.
+ //
+ start: function(imageLink) {
+
+ hideSelectBoxes();
+
+ // stretch overlay to fill page and fade in
+ var arrayPageSize = getPageSize();
+ Element.setHeight('overlay', arrayPageSize[1]);
+ new Effect.Appear('overlay', { duration: 0.2, from: 0.0, to: 0.8 });
+
+ imageArray = [];
+ imageNum = 0;
+
+ if (!document.getElementsByTagName){ return; }
+ var anchors = document.getElementsByTagName('a');
+
+ // if image is NOT part of a set..
+ if((imageLink.getAttribute('rel') == 'lightbox')){
+ // add single image to imageArray
+ imageArray.push(new Array(imageLink.getAttribute('href'), imageLink.getAttribute('title')));
+ } else {
+ // if image is part of a set..
+
+ // loop through anchors, find other images in set, and add them to imageArray
+ for (var i=0; i<anchors.length; i++){
+ var anchor = anchors[i];
+ if (anchor.getAttribute('href') && (anchor.getAttribute('rel') == imageLink.getAttribute('rel'))){
+ imageArray.push(new Array(anchor.getAttribute('href'), anchor.getAttribute('title')));
+ }
+ }
+ imageArray.removeDuplicates();
+ while(imageArray[imageNum][0] != imageLink.getAttribute('href')) { imageNum++;}
+ }
+
+ // calculate top offset for the lightbox and display
+ var arrayPageSize = getPageSize();
+ var arrayPageScroll = getPageScroll();
+ //var lightboxTop = arrayPageScroll[1] + (arrayPageSize[3] / 15); //REMed: Update to 2.02+
+ var lightboxTop = arrayPageScroll[1] + 4 //Update to 2.02+
+
+ Element.setTop('lightbox', lightboxTop);
+ Element.show('lightbox');
+
+ this.changeImage(imageNum);
+ },
+
+ //
+ // changeImage()
+ // Hide most elements and preload image in preparation for resizing image container.
+ //
+ changeImage: function(imageNum, zoom) {
+
+ activeImage = imageNum; // update global var
+
+ // hide elements during transition
+ Element.show('loading');
+ Element.hide('lightboxImage');
+ Element.hide('hoverNav');
+ Element.hide('prevLink');
+ Element.hide('nextLink');
+ Element.hide('imageDataContainer');
+ Element.hide('numberDisplay');
+
+ imgPreloader = new Image();
+
+ // once image is preloaded, resize image container
+ if (zoom=="TRUE"){
+ imgPreloader.onload=function(){
+ Element.setSrc('lightboxImage', imageArray[activeImage][0]);
+ photo.style.width = (imgPreloader.width)+ 'px';
+ myLightbox.resizeImageContainer(imgPreloader.width, imgPreloader.height);
+ }
+ Element.hide('bottomNavZoom')
+ }else{
+ imgPreloader.onload=function(){
+ Element.setSrc('lightboxImage', imageArray[activeImage][0]);
+ //resize code
+ var arrayPageSize = getPageSize();
+ var targ = { w:arrayPageSize[2] - (borderSize * 2), h:arrayPageSize[3] - (borderSize * 6) };
+ var orig = { w:imgPreloader.width, h:imgPreloader.height };
+ //// shrink image with the same aspect
+ var ratio = 1.0;
+ Element.hide('bottomNavZoom');
+ if ((orig.w >= targ.w || orig.h >= targ.h) && orig.h && orig.w){
+ ratio = ((targ.w / orig.w) < (targ.h / orig.h)) ? targ.w / orig.w : targ.h / orig.h;
+ Element.show('bottomNavZoom');
+ }
+ var new_width = Math.floor(orig.w * ratio);
+ var new_height = Math.floor(orig.h * ratio);
+ photo = document.getElementById('lightboxImage');
+ photo.style.width = (new_width)+ 'px';
+
+ myLightbox.resizeImageContainer(new_width, new_height);
+ }
+ }
+ imgPreloader.src = imageArray[activeImage][0];
+ },
+
+
+ //
+ // resizeImageContainer()
+ //
+ resizeImageContainer: function( imgWidth, imgHeight) {
+
+ // get current height and width
+ this.wCur = Element.getWidth('outerImageContainer');
+ this.hCur = Element.getHeight('outerImageContainer');
+
+ // scalars based on change from old to new
+ this.xScale = ((imgWidth + (borderSize * 2)) / this.wCur) * 100;
+ this.yScale = ((imgHeight + (borderSize * 2)) / this.hCur) * 100;
+
+ // calculate size difference between new and old image, and resize if necessary
+ wDiff = (this.wCur - borderSize * 2) - imgWidth;
+ hDiff = (this.hCur - borderSize * 2) - imgHeight;
+
+ if(!( hDiff == 0)){ new Effect.Scale('outerImageContainer', this.yScale, {scaleX: false, duration: resizeDuration, queue: 'front'}); }
+ if(!( wDiff == 0)){ new Effect.Scale('outerImageContainer', this.xScale, {scaleY: false, delay: resizeDuration, duration: resizeDuration}); }
+
+ // if new and old image are same size and no scaling transition is necessary,
+ // do a quick pause to prevent image flicker.
+ if((hDiff == 0) && (wDiff == 0)){
+ if (navigator.appVersion.indexOf("MSIE")!=-1){ pause(250); } else { pause(100);}
+ }
+
+ Element.setHeight('prevLink', imgHeight);
+ Element.setHeight('nextLink', imgHeight);
+ Element.setWidth( 'imageDataContainer', imgWidth + (borderSize * 2));
+
+ this.showImage();
+ },
+
+ //
+ // showImage()
+ // Display image and begin preloading neighbors.
+ //
+ showImage: function(){
+ Element.hide('loading');
+ new Effect.Appear('lightboxImage', { duration: 0.5, queue: 'end', afterFinish: function(){ myLightbox.updateDetails(); } });
+ this.preloadNeighborImages();
+ },
+
+ //
+ // updateDetails()
+ // Display caption, image number, and bottom nav.
+ //
+ updateDetails: function() {
+
+ Element.show('caption');
+ Element.setInnerHTML( 'caption', imageArray[activeImage][1]);
+
+ // if image is part of set display 'Image x of x'
+ if(imageArray.length > 1){
+ Element.show('numberDisplay');
+ Element.setInnerHTML( 'numberDisplay', "Image " + eval(activeImage + 1) + " of " + imageArray.length);
+ }
+
+ new Effect.Parallel(
+ [ new Effect.SlideDown( 'imageDataContainer', { sync: true, duration: resizeDuration + 0.25, from: 0.0, to: 1.0 }),
+ new Effect.Appear('imageDataContainer', { sync: true, duration: 1.0 }) ],
+ { duration: 0.65, afterFinish: function() { myLightbox.updateNav();} }
+ );
+ },
+
+ //
+ // updateNav()
+ // Display appropriate previous and next hover navigation.
+ //
+ updateNav: function() {
+
+ Element.show('hoverNav');
+
+ // if not first image in set, display prev image button
+ if(activeImage != 0){
+ Element.show('prevLink');
+ document.getElementById('prevLink').onclick = function() {
+ myLightbox.changeImage(activeImage - 1); return false;
+ }
+ }
+
+ // if not last image in set, display next image button
+ if(activeImage != (imageArray.length - 1)){
+ Element.show('nextLink');
+ document.getElementById('nextLink').onclick = function() {
+ myLightbox.changeImage(activeImage + 1); return false;
+ }
+ }
+
+ this.enableKeyboardNav();
+ },
+
+ //
+ // enableKeyboardNav()
+ //
+ enableKeyboardNav: function() {
+ document.onkeydown = this.keyboardAction;
+ },
+
+ //
+ // disableKeyboardNav()
+ //
+ disableKeyboardNav: function() {
+ document.onkeydown = '';
+ },
+
+ //
+ // keyboardAction()
+ //
+ // Update to 2.02+
+ keyboardAction: function(e) {
+
+ if (e == null) { // ie
+ keycode = event.keyCode;
+ } else { // mozilla
+ keycode = e.which;
+ }
+
+ // Instead of the above code, (starting with 'if ...') Roel replaced it with the code below,
+ // but I see no use for it. Perhaps it has something to do with browsercompatibility, so I
+ // left it here, so you can try whether it works better in case you run in to any problems.
+
+ //keyboardAction: function(e) {
+ //var keyCode =
+ //document.layers ? e.which :
+ //document.all ? event.keyCode :
+ //document.getElementById ? e.keyCode : 0;
+
+
+ key = String.fromCharCode(keycode).toLowerCase();
+
+ if((key == 'x') || (key == 'o') || (key == 'c')){ // close lightbox
+ myLightbox.end();
+ } else if(key == 'p' || keycode == 37 || keycode == 8 || keycode == 100){ // display previous image
+ if(activeImage != 0){
+ myLightbox.disableKeyboardNav();
+ myLightbox.changeImage(activeImage - 1);
+ }
+ } else if(key == 'n' || keycode == 39 || keycode == 32 || keycode == 102){ // display next image
+ if(activeImage != (imageArray.length - 1)){
+ myLightbox.disableKeyboardNav();
+ myLightbox.changeImage(activeImage + 1);
+ }
+ }
+
+ },
+
+ //
+ // preloadNeighborImages()
+ // Preload previous and next images.
+ //
+ preloadNeighborImages: function(){
+
+ if((imageArray.length - 1) > activeImage){
+ preloadNextImage = new Image();
+ preloadNextImage.src = imageArray[activeImage + 1][0];
+ }
+ if(activeImage > 0){
+ preloadPrevImage = new Image();
+ preloadPrevImage.src = imageArray[activeImage - 1][0];
+ }
+
+ },
+
+ //
+ // end()
+ //
+ end: function() {
+ this.disableKeyboardNav();
+ Element.hide('lightbox');
+ new Effect.Fade('overlay', { duration: 0.2});
+ showSelectBoxes();
+ }
+}
+
+// -----------------------------------------------------------------------------------
+
+//
+// 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.scrollTop){ // Explorer 6 Strict
+ 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){ // all but Explorer Mac
+ xScroll = document.body.scrollWidth;
+ yScroll = document.body.scrollHeight;
+ } else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
+ 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.clientHeight) { // Explorer 6 Strict Mode
+ 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,windowHeight)
+ return arrayPageSize;
+}
+
+// -----------------------------------------------------------------------------------
+
+//
+// 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'){
+ }
+}
+
+// -----------------------------------------------------------------------------------
+
+//
+// listenKey()
+//
+function listenKey () { document.onkeypress = getKey; }
+
+// ---------------------------------------------------
+
+function showSelectBoxes(){
+ selects = document.getElementsByTagName("select");
+ for (i = 0; i != selects.length; i++) {
+ selects[i].style.visibility = "visible";
+ }
+}
+
+// ---------------------------------------------------
+
+function hideSelectBoxes(){
+ selects = document.getElementsByTagName("select");
+ for (i = 0; i != selects.length; i++) {
+ selects[i].style.visibility = "hidden";
+ }
+}
+
+// ---------------------------------------------------
+
+//
+// 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;
+ }
+}
+
+// ---------------------------------------------------
+
+
+
+function initLightbox() { myLightbox = new Lightbox(); }
+Event.observe(window, 'load', initLightbox, false);
diff --git a/js/lightbox_lite.js b/js/lightbox_lite.js
new file mode 100644
index 0000000..a2da42a
--- /dev/null
+++ b/js/lightbox_lite.js
@@ -0,0 +1,438 @@
+/*
+ Lightbox JS: Fullsize Image Overlays
+ by Lokesh Dhakar - http://www.huddletogether.com
+
+ For more information on this script, visit:
+ http://huddletogether.com/projects/lightbox/
+
+ This script is distributed via Drupal.org with permission from Lokesh Dhakar.
+ Under GPL license.
+ Mailto: bugzie@gmail.com
+
+ 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 them in the next two lines.
+var loadingImage = '/modules/lightbox2/images/loading_lite.gif';
+var closeButton = '/modules/lightbox2/images/close_lite.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.scrollTop){ // Explorer 6 Strict
+ 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){ // all but Explorer Mac
+ xScroll = document.body.scrollWidth;
+ yScroll = document.body.scrollHeight;
+ } else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
+ 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.clientHeight) { // Explorer 6 Strict Mode
+ 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,windowHeight)
+ 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] + ((arrayPageSize[3] - 35 - objLoadingImage.height) / 2) + 'px');
+ objLoadingImage.style.left = (((arrayPageSize[0] - 20 - objLoadingImage.width) / 2) + 'px');
+ 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 are not negative
+ // and the image placed outside the viewport
+ var lightboxTop = arrayPageScroll[1] + ((arrayPageSize[3] - 35 - imgPreload.height) / 2);
+ var lightboxLeft = ((arrayPageSize[0] - 20 - imgPreload.width) / 2);
+
+ objLightbox.style.top = (lightboxTop < 0) ? "0px" : lightboxTop + "px";
+ objLightbox.style.left = (lightboxLeft < 0) ? "0px" : lightboxLeft + "px";
+
+
+ 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 required with IE,
+ // this prevents the previous image displaying for a short burst causing flicker.
+ if (navigator.appVersion.indexOf("MSIE")!=-1){
+ pause(250);
+ }
+
+ if (objLoadingImage) { objLoadingImage.style.display = 'none'; }
+
+ // Hide select boxes as they will 'peek' through the image in IE
+ selects = document.getElementsByTagName("select");
+ for (i = 0; i != selects.length; i++) {
+ selects[i].style.visibility = "hidden";
+ }
+
+
+ objLightbox.style.display = 'block';
+
+ // After image is loaded, update the overlay height as the new image might have
+ // 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';
+
+ // make select boxes visible
+ selects = document.getElementsByTagName("select");
+ for (i = 0; i != selects.length; i++) {
+ selects[i].style.visibility = "visible";
+ }
+
+ // disable keypress listener
+ document.onkeypress = '';
+}
+
+
+
+
+//
+// initLightbox()
+// Function runs on window load, going through link tags looking for rel="lightbox".
+// These links receive onclick events that enable the lightbox display for their targets.
+// The function also inserts html markup at the top of the page which will be used as a
+// 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") == "lightbox")){
+ anchor.onclick = function () {showLightbox(this); return false;}
+ }
+ }
+
+ // the rest of this code inserts html at the top of the page that looks like this:
+ //
+ // <div id="overlay">
+ // <a href="#" onclick="hideLightbox(); return false;"><img id="loadingImage" /></a>
+ // </div>
+ // <div id="lightbox">
+ // <a href="#" onclick="hideLightbox(); return false;" title="Click anywhere to close image">
+ // <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 styles are in CSS file)
+ 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 loadingimage
+ imgPreloader.onload=function(){
+
+ var objLoadingImageLink = document.createElement("a");
+ objLoadingImageLink.setAttribute('href','#');
+ objLoadingImageLink.onclick = function () {hideLightbox(); return false;}
+ 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 onLoad, as IE will flip out w/animated gifs
+
+ 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 <a href="#" onclick="hideLightbox(); return false;"><kbd>x</kbd></a> to close';
+ objLightboxDetails.appendChild(objKeyboardMsg);
+
+
+}
+
+
+
+
+//
+// addLoadEvent()
+// Adds event to window.onload without overwriting currently assigned onload functions.
+// 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 \ No newline at end of file
diff --git a/lightbox.css b/lightbox.css
new file mode 100644
index 0000000..6d64a67
--- /dev/null
+++ b/lightbox.css
@@ -0,0 +1,136 @@
+#lightbox {
+ position: absolute;
+ top: 40px;
+ left: 0;
+ width: 100%;
+ z-index: 100;
+ text-align: center;
+ line-height: 0;
+}
+
+#lightbox a img { border: none; }
+
+#outerImageContainer {
+ position: relative;
+ background-color: #fff;
+ width: 250px;
+ height: 250px;
+ margin: 0 auto;
+}
+
+#imageContainer {
+ padding: 10px;
+}
+
+#loading {
+ position: absolute;
+ top: 40%;
+ left: 0%;
+ height: 25%;
+ width: 100%;
+ text-align: center;
+ line-height: 0;
+}
+
+#hoverNav {
+ position: absolute;
+ top: 0;
+ left: 0;
+ height: 100%;
+ width: 100%;
+ z-index: 10;
+}
+
+#imageContainer>#hoverNav{ left: 0; }
+#hoverNav a { outline: none; }
+
+#prevLink, #nextLink {
+ width: 49%;
+ height: 100%;
+ background: transparent url(images/blank.gif) no-repeat; /* Trick IE into showing hover */
+ display: block;
+}
+
+#prevLink { left: 0; float: left; }
+#nextLink { right: 0; float: right; }
+#prevLink:hover, #prevLink:visited:hover { background: url(images/prevlabel.gif) left 15% no-repeat; }
+#nextLink:hover, #nextLink:visited:hover { background: url(images/nextlabel.gif) right 15% no-repeat; }
+
+
+#imageDataContainer {
+ font: 10px Verdana, Helvetica, sans-serif;
+ background-color: #fff;
+ margin: 0 auto;
+ line-height: 1.4em;
+}
+
+#imageData {
+ padding: 0 10px;
+}
+
+#imageData #imageDetails { width: 70%; float: left; text-align: left; }
+#imageData #caption { font-weight: bold; }
+#imageData #numberDisplay { display: block; clear: left; padding-bottom: 1.0em;}
+#imageData #bottomNavClose { width: 66px; float: right; padding-top: 0.7em; }
+#imageData #bottomNav { height: 57px; }
+
+
+
+#overlay {
+ position: absolute;
+ top: 0;
+ left: 0;
+ z-index: 90;
+ width: 100%;
+ height: 500px;
+ background-color: #000;
+ filter:alpha(opacity=60);
+ -moz-opacity: 0.6;
+ opacity: 0.6;
+}
+
+
+.clearfix:after {
+ content: ".";
+ display: block;
+ height: 0;
+ clear: both;
+ visibility: hidden;
+}
+
+* html>body .clearfix {
+ display: inline;
+ width: 100%;
+}
+
+* html .clearfix {
+ /* Hides from IE-mac \*/
+ height: 1%;
+ /* End hide from IE-mac */
+}
+
+/*Image location mod*/
+#bottomNavClose {
+ display: block;
+ background: url(images/closelabel.gif) no-repeat;
+ width: 66px;
+ height: 22px;
+ position: relative;
+ top: 35px;
+}
+
+#loadingLink {
+ display: block;
+ background: url(images/loading.gif) no-repeat;
+ width: 32px;
+ height: 32px;
+}
+#bottomNavZoom {
+display:block;
+background: url(images/expand.gif) no-repeat;
+width:34px;
+height:34px;
+position:relative;
+float:right;
+left: 66px;
+}
diff --git a/lightbox2.info b/lightbox2.info
new file mode 100644
index 0000000..3e14b3c
--- /dev/null
+++ b/lightbox2.info
@@ -0,0 +1,3 @@
+; $Id$
+name = Lightbox2
+description = Enables Lightbox V2 for Drupal \ No newline at end of file
diff --git a/lightbox2.install b/lightbox2.install
new file mode 100644
index 0000000..2a66f9c
--- /dev/null
+++ b/lightbox2.install
@@ -0,0 +1,23 @@
+<?php
+// $Id $
+
+/**
+* Implementation of hook_install()
+* just give a message
+*/
+function lightbox2_install() {
+ watchdog('lightbox2', 'lightbox2 module installed');
+}
+
+/**
+* Implementation of hook_uninstall()
+*/
+function lightbox2_uninstall() {
+ // delete the variables we created
+ variable_del('lightbox2_plus');
+ variable_del('lightbox2_image_node');
+ variable_del('lightbox2_image_group');
+ variable_del('lightbox2G2_filter');
+
+ watchdog('lightbox2', 'lightbox2 module un-installed');
+}
diff --git a/lightbox2.module b/lightbox2.module
new file mode 100644
index 0000000..19b366c
--- /dev/null
+++ b/lightbox2.module
@@ -0,0 +1,266 @@
+<?php
+// $Id $
+/**
+ * Enables the use of lightbox V2 which places images above your current page,
+ * not within.
+ * This frees you from the constraints of the layout, particularly column
+ * widths.
+ *
+ * This module is for Drupal 5.x only.
+ *
+ * Module by: Mark Ashmead
+ * Mailto: bugzie@gmail.com
+ * Co-maintainer: Stella Power (http://drupal.org/user/66894)
+ *
+ * Image Node Support: Steve McKenzie
+ *
+*/
+
+/**
+ * GLOBAL VARIABLES
+ */
+$LIGHTBOX2_INCLUDE = false;
+
+/**
+ * Displays the information for this module.
+ * Displays the help text for this module.
+ *
+ */
+/**
+ * Implementation of hook_help().
+ */
+function lightbox2_help($section) {
+ switch ($section) {
+ case 'admin/modules#description':
+ return t('Enables Lightbox V2 for Drupal');
+ case 'admin/help#lightbox2':
+ return t('<h3>Overview</h3>
+ <p align="justify">Lightbox JS V2 is a simple, unobtrusive script used to overlay images on the current page. It\'s a snap to setup and works on all modern browsers. The module comes with a Lightbox2 Lite option which does not use the Scriptaculous/Prototype libraries; it is therefore less likely to conflict with anything else.</p>
+ <p align="justify">Places images above your current page, not within. This frees you from the constraints of the layout, particularly column widths. Keeps users on the same page. Clicking to view an image and then having to click the back button to return to your site is bad for continuity (and no fun!).</p>
+ <p align="justify"><h3>Usage</h3></p>
+ <p>Add rel=&quot;lightbox&quot; attribute to any link tag to activate the lightbox. For example: </p>
+ <p>&lt;a href=&quot;image-1.jpg&quot; rel=&quot;lightbox&quot; title=&quot;my caption&quot;&gt;image #1&lt;/a&gt;</p>
+ <p>Optional: Use the title attribute if you want to show a caption.</p>
+ <p>If you have a set of related images that you would like to group, follow step one but additionally include a group name between square brackets in the rel attribute. For example:</p><p>&lt;a href="images/image-1.jpg" rel="lightbox[roadtrip]"&gt;image #1&lt;/a&gt;<br>
+&lt;a href="images/image-2.jpg" rel="lightbox[roadtrip]"&gt;image #2&lt;/a&gt;<br>
+&lt;a href="images/image-3.jpg" rel="lightbox[roadtrip]"&gt;image #3&lt;/a&gt;<br></p>
+<p>No limits to the number of image sets per page or how many images are allowed in each set. Go nuts!</p>
+ <p align="justify"><h3>Known Issues</h3></p>
+ <p>Image Issues - An issue has been identified with the loading of certain images when using the module. (closelabel.gif, expand.gif, loading.gif)</p>
+ <p>If your installation of Drupal exists in the root of your domain, i.e., www.yourinstallation.com then you shouldn\'t have any problems. The issue only occurs when Drupal is installed in a subdirectory, i.e., www.yourinstallation.com/subdirectory.</p>
+ <p>If this is the case, you will need to edit the lightbox.js on lines 63, 64 and 65 to reflect the fully qualified URL of your images. In the above case, this would be as follows;</p>
+ <p>var fileLoadingImage = &quot;/modules/lightbox2/images/loading.gif&quot;;<br>
+ var fileBottomNavCloseImage = &quot;/modules/lightbox2/images/closelabel.gif&quot;;<br>
+ var fileBottomNavZoomImage = &quot;/modules/lightbox2/images/expand.gif&quot;; //Update to 2.02+</p>
+ <p>should be changed to</p>
+ <p>var fileLoadingImage = &quot;/subdirectory/modules/lightbox2/images/loading.gif&quot;;<br>
+ var fileBottomNavCloseImage = &quot;/subdirectory/modules/lightbox2/images/closelabel.gif&quot;;<br>
+ var fileBottomNavZoomImage = &quot;/subdirectory/modules/lightbox2/images/expand.gif&quot;; //Update to 2.02+</p>
+ <p>There may be other methods that can be used to achieve this, but this should be the simplest for those with little or no programming experience. If you choose to use Lightbox2 Lite option, then you will need to edit the lightbox_lite.js file in a similar manner on lines 39 and 40.</p>');
+ break;
+ }
+}
+
+/**
+* Implementation of hook_perm()
+* Define the permissions this module uses
+*/
+function lightbox2_perm() {
+ return array('administer lightbox2');
+}
+
+
+/**
+* Implementation of hook_access()
+*/
+function lightbox2_access($op, $node) {
+ return user_access('administer lightbox2');
+}
+
+/**
+* Implementation of hook_menu()
+*/
+function lightbox2_menu($may_cache) {
+ $items = array();
+
+ if ($may_cache) {
+ $items[] = array('path' => 'admin/settings/lightbox2',
+ 'title' => t('Lightbox2'),
+ 'callback' => 'drupal_get_form',
+ 'callback arguments' => array('lightbox2_settings_form'),
+ 'access' => user_access('administer lightbox2'),
+ 'description' => t('Allows the user to configure the lightbox2 settings'),
+ );
+ }
+ else {
+ }
+
+ return $items;
+}
+
+
+/**
+ * Implementation of hook_nodeapi().
+ */
+function lightbox2_nodeapi(&$node, $op, $teaser = NULL, $page = NULL) {
+ global $LIGHTBOX2_INCLUDE;
+
+ if ($op == "view" && !$LIGHTBOX2_INCLUDE) {
+ lightbox2_add_files();
+ $LIGHTBOX2_INCLUDE = true;
+ }
+ elseif ($node->type == "image" && !$LIGHTBOX2_INCLUDE) {
+ lightbox2_add_files();
+ $LIGHTBOX2_INCLUDE = true;
+ }
+}
+
+/**
+ * Implementation of hook_settings()
+ */
+function lightbox2_settings_form() {
+
+ // Define Lightbox2 Plus form.
+ $form["lightbox2_plus_options"] = array(
+ "#type" => "fieldset",
+ "#title" => t("Lightbox2 Plus"),
+ "#collapsible" => TRUE,
+ "#collapsed" => FALSE,
+ );
+
+ // Add Checkbox for Lightbox2 Plus.
+ $form["lightbox2_plus_options"]["lightbox2_plus"] = array(
+ "#type" => "checkbox",
+ "#title" => t("Use Lightbox2 Plus"),
+ "#description" => t("Un-checking this box will enable Lightbox2 Lite."),
+ "#default_value" => variable_get("lightbox2_plus", true),
+ );
+
+ // Define Image Node Options form.
+ $form["image_node_options"] = array(
+ "#type" => "fieldset",
+ "#title" => t("Lightbox2 Plus Image Node options"),
+ "#collapsible" => TRUE,
+ "#collapsed" => TRUE,
+ );
+
+ // Add Checkbox for Image Node.
+ $form["image_node_options"]["lightbox2_image_node"] = array(
+ "#type" => "checkbox",
+ "#title" => t("Enable for Image Nodes"),
+ "#description" => t("Checking this box will enable automatic URL formatting for Image Nodes."),
+ "#default_value" => variable_get("lightbox2_image_node", true),
+ );
+
+ // Add Checkbox for Image Node Grouping.
+ $form["image_node_options"]["lightbox2_image_group"] = array(
+ "#type" => "checkbox",
+ "#title" => t("Enable Grouping"),
+ "#description" => t("Checking this box will enable automatic grouping of Image Nodes on a page. Useful for image galleries."),
+ "#default_value" => variable_get("lightbox2_image_group", true),
+ );
+
+ // Add Checkbox for Gallery2 Image Filter.
+ $form["image_node_options"]["lightbox2G2_filter"] = array(
+ "#type" => "checkbox",
+ "#title" => t("Enable Gallery 2 Filter"),
+ "#description" => t("Checking this box will enable the Gallery 2 filter."),
+ "#default_value" => variable_get("lightbox2G2_filter", true),
+ );
+
+ $form["update"] = array(
+ '#type' => 'submit',
+ '#value' => t('Update'),
+ '#weight' => 3,
+ );
+
+ return $form;
+}
+
+function lightbox2_settings_form_submit($form_id, $form_values) {
+ if ($form_values['op'] == t('Update')) {
+ variable_set("lightbox2_plus", $form_values["lightbox2_plus"]);
+ variable_set("lightbox2G2_filter", $form_values["lightbox2G2_filter"]);
+ variable_set("lightbox2_image_node", $form_values["lightbox2_image_node"]);
+ variable_set("lightbox2_image_group", $form_values["lightbox2_image_group"]);
+ }
+}
+
+/**
+ *Implementation of hook_filter().
+ */
+function lightbox2_filter_tips($delta, $format, $long = false) {
+ return t('Image links from G2 are formatted for use with Lightbox.V2');
+}
+
+// Check to see if the G2 Filter is Enabled in Settings
+if (variable_get("lightbox2G2_filter", true)) {
+ function lightbox2_filter($op, $delta = 0, $format = -1, $text = '') {
+ switch ($op) {
+ case 'list':
+ return array(0 => t('Lightbox filter'));
+ case 'description':
+ return t('Turns g2_filter links into Lighbox.V2 appropriate links');
+ case 'process':
+ $text = ' '. $text .' ';
+ $text = preg_replace('/ShowItem/','DownloadItem',$text);
+ $text = preg_replace('/target=""/','rel="lightbox"',$text);
+ $text = substr($text, 1, -1);
+ return $text;
+ default:
+ return $text;
+ }
+ }
+}
+/**
+ * Provides a link to the CSS stylesheet associated with this module.
+ * Provides a link to the JS file associated with this module.
+ */
+
+function lightbox2_add_files() {
+
+ // Load required js and css files.
+ $path = drupal_get_path('module', 'lightbox2');
+
+ // Check to see if Lightbox2 Plus is enabled.
+ if (variable_get("lightbox2_plus", true)) {
+ if (function_exists('drupal_add_css')) {
+ drupal_add_css($path .'/lightbox.css');
+ }
+ else {
+ theme("add_style", $path .'/lightbox.css');
+ }
+
+ // Check to see if Libraries are installed correctly.
+ if (file_exists($path .'/js/prototype.js')) {
+ drupal_add_js($path .'/js/prototype.js');
+
+ // Check to see if the Image Node Option is enabled in settings.
+ if (variable_get("lightbox2_image_node", true) && variable_get("lightbox2_image_group", true)) {
+ drupal_add_js($path ."/js/image_nodes.js");
+ }
+ elseif (variable_get("lightbox2_image_node", true)) {
+ drupal_add_js($path ."/js/image_nodes_nogroup.js");
+ }
+ drupal_add_js($path .'/js/scriptaculous.js?load=effects');
+ drupal_add_js($path .'/js/lightbox.js');
+ // Future support for non-images will go here.
+ //drupal_add_js($path .'/js/lightbox_docs.js');
+ }
+
+ // Display warning message if Libraries aren't installed correctly.
+ else {
+ drupal_set_message(t('The script.aculo.us library is in not installed correctly. Please download from <a href="http://script.aculo.us/downloads">http://script.aculo.us/downloads</a>, follow the instructions in the Lightbox V.2 README.TXT file to copy the files to their correct locations.'), 'error');
+ }
+ }
+ // Load Lightbox Lite if Plus is not enabled.
+ else {
+ if (function_exists('drupal_add_css')) {
+ drupal_add_css($path .'/lightbox_lite.css');
+ }
+ else {
+ theme("add_style", $path .'/lightbox_lite.css');
+ }
+ drupal_add_js($path .'/js/lightbox_lite.js');
+ }
+}
diff --git a/lightbox_lite.css b/lightbox_lite.css
new file mode 100644
index 0000000..62a9bed
--- /dev/null
+++ b/lightbox_lite.css
@@ -0,0 +1,28 @@
+#lightbox {
+ background-color: #eee;
+ padding: 10px;
+ border-bottom: 2px solid #666;
+ border-right: 2px solid #666;
+}
+
+#lightboxDetails {
+ font-size: 1.2em;
+ padding-top: 0.6em;
+}
+
+#lightboxCaption { float: left; }
+#keyboardMsg { float: right; }
+#closeButton { top: 5px; right: 5px; }
+
+#lightbox img { border: none; clear: both;}
+#overlay img { border: none; }
+
+#overlay { background-image: url(/modules/lightbox2/images/overlay.png); }
+
+* html #overlay {
+ background-color: #333;
+ back\ground-color: transparent;
+ background-image: url(/modules/lightbox2/images/blank.gif);
+ filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/modules/lightbox2/images/overlay.png", sizingMethod="scale");
+}
+