This commit was manufactured as part of Drupal's Great Git Migration to

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
parent 12af9211
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.
// 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);
}
}
// 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);
}
}
This diff is collapsed.
This diff is collapsed.
#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;
}
; $Id$
name = Lightbox2
description = Enables Lightbox V2 for Drupal
\ No newline at end of file
<?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');
}
This diff is collapsed.
#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");
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment