Version Description
Download this release
Release Info
| Developer | masdiblogs |
| Plugin |  WP Lightbox 2 |
| Version | 2.0 |
| Comparing to | |
| See all releases | |
Version 2.0
- Themes/Black/images/blank.gif +0 -0
- Themes/Black/images/closelabel.gif +0 -0
- Themes/Black/images/loading.gif +0 -0
- Themes/Black/images/next.gif +0 -0
- Themes/Black/images/prev.gif +0 -0
- Themes/Black/lightbox.css +80 -0
- Themes/Dark Grey/images/blank.gif +0 -0
- Themes/Dark Grey/images/closelabel.gif +0 -0
- Themes/Dark Grey/images/loading.gif +0 -0
- Themes/Dark Grey/images/next.gif +0 -0
- Themes/Dark Grey/images/prev.gif +0 -0
- Themes/Dark Grey/lightbox.css +80 -0
- Themes/Grey/images/blank.gif +0 -0
- Themes/Grey/images/closelabel.gif +0 -0
- Themes/Grey/images/loading.gif +0 -0
- Themes/Grey/images/next.gif +0 -0
- Themes/Grey/images/prev.gif +0 -0
- Themes/Grey/lightbox.css +80 -0
- Themes/White/images/blank.gif +0 -0
- Themes/White/images/closelabel.gif +0 -0
- Themes/White/images/loading.gif +0 -0
- Themes/White/images/next.gif +0 -0
- Themes/White/images/prev.gif +0 -0
- Themes/White/lightbox.css +80 -0
- lightbox-resize.js +547 -0
- lightbox.js +534 -0
- lightbox2.php +103 -0
- options.php +90 -0
- readme.txt +39 -0
Themes/Black/images/blank.gif
ADDED
|
Binary file
|
Themes/Black/images/closelabel.gif
ADDED
|
Binary file
|
Themes/Black/images/loading.gif
ADDED
|
Binary file
|
Themes/Black/images/next.gif
ADDED
|
Binary file
|
Themes/Black/images/prev.gif
ADDED
|
Binary file
|
Themes/Black/lightbox.css
ADDED
|
@@ -0,0 +1,80 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
#stimuli_lightbox {
|
| 2 |
+
position: absolute;
|
| 3 |
+
left: 0;
|
| 4 |
+
width: 100%;
|
| 5 |
+
z-index: 100;
|
| 6 |
+
text-align: center;
|
| 7 |
+
line-height: 0;
|
| 8 |
+
}
|
| 9 |
+
|
| 10 |
+
#stimuli_lightbox a img { border: none; }
|
| 11 |
+
|
| 12 |
+
#stimuli_outerImageContainer {
|
| 13 |
+
position: relative;
|
| 14 |
+
background-color: #000;
|
| 15 |
+
width: 250px;
|
| 16 |
+
height: 250px;
|
| 17 |
+
margin: 0 auto;
|
| 18 |
+
}
|
| 19 |
+
|
| 20 |
+
#stimuli_imageContainer {
|
| 21 |
+
padding: 10px;
|
| 22 |
+
}
|
| 23 |
+
|
| 24 |
+
#stimuli_loading {
|
| 25 |
+
position: absolute;
|
| 26 |
+
top: 40%;
|
| 27 |
+
left: 0%;
|
| 28 |
+
height: 25%;
|
| 29 |
+
width: 100%;
|
| 30 |
+
text-align: center;
|
| 31 |
+
line-height: 0;
|
| 32 |
+
background: transparent center url(images/loading.gif) no-repeat;
|
| 33 |
+
}
|
| 34 |
+
#stimuli_hoverNav {
|
| 35 |
+
position: absolute;
|
| 36 |
+
top: 0;
|
| 37 |
+
left: 0;
|
| 38 |
+
height: 100%;
|
| 39 |
+
width: 100%;
|
| 40 |
+
z-index: 10;
|
| 41 |
+
}
|
| 42 |
+
#stimuli_imageContainer>#stimuli_hoverNav { left: 0;}
|
| 43 |
+
#stimuli_hoverNav a { outline: none;}
|
| 44 |
+
|
| 45 |
+
#stimuli_prevLink, #stimuli_nextLink {
|
| 46 |
+
width: 49%;
|
| 47 |
+
height: 100%;
|
| 48 |
+
background: transparent url(images/blank.gif) no-repeat; /* Trick IE into showing hover */
|
| 49 |
+
display: block;
|
| 50 |
+
}
|
| 51 |
+
#stimuli_prevLink { left: 0; float: left;}
|
| 52 |
+
#stimuli_nextLink { right: 0; float: right;}
|
| 53 |
+
#stimuli_prevLink:hover, #stimuli_prevLink:visited:hover { background: url(images/prev.gif) left 55% no-repeat; }
|
| 54 |
+
#stimuli_nextLink:hover, #stimuli_nextLink:visited:hover { background: url(images/next.gif) right 55% no-repeat; }
|
| 55 |
+
|
| 56 |
+
|
| 57 |
+
#stimuli_imageDataContainer {
|
| 58 |
+
font: 10px Verdana, Helvetica, sans-serif;
|
| 59 |
+
background-color: #000;
|
| 60 |
+
margin: 0 auto;
|
| 61 |
+
line-height: 1.4em;
|
| 62 |
+
overflow: auto;
|
| 63 |
+
width: 100%
|
| 64 |
+
}
|
| 65 |
+
|
| 66 |
+
#stimuli_imageData { padding:0 10px; color: #666; }
|
| 67 |
+
#stimuli_imageData #stimuli_imageDetails { width: 70%; float: left; text-align: left; }
|
| 68 |
+
#stimuli_imageData #stimuli_caption { font-weight: bold;}
|
| 69 |
+
#stimuli_imageData #stimuli_numberDisplay { display: block; clear: left; padding-bottom: 1.0em;}
|
| 70 |
+
#stimuli_imageData #stimuli_bottomNavClose { width: 66px; float: right; padding-bottom: 0.7em; background: url(images/closelabel.gif) right 55% no-repeat; padding-top: 1.0em; margin-bottom: 1.0em;}
|
| 71 |
+
|
| 72 |
+
#stimuli_overlay {
|
| 73 |
+
position: absolute;
|
| 74 |
+
top: 0;
|
| 75 |
+
left: 0;
|
| 76 |
+
z-index: 90;
|
| 77 |
+
width: 100%;
|
| 78 |
+
height: 500px;
|
| 79 |
+
background-color: #000;
|
| 80 |
+
}
|
Themes/Dark Grey/images/blank.gif
ADDED
|
Binary file
|
Themes/Dark Grey/images/closelabel.gif
ADDED
|
Binary file
|
Themes/Dark Grey/images/loading.gif
ADDED
|
Binary file
|
Themes/Dark Grey/images/next.gif
ADDED
|
Binary file
|
Themes/Dark Grey/images/prev.gif
ADDED
|
Binary file
|
Themes/Dark Grey/lightbox.css
ADDED
|
@@ -0,0 +1,80 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
#stimuli_lightbox {
|
| 2 |
+
position: absolute;
|
| 3 |
+
left: 0;
|
| 4 |
+
width: 100%;
|
| 5 |
+
z-index: 100;
|
| 6 |
+
text-align: center;
|
| 7 |
+
line-height: 0;
|
| 8 |
+
}
|
| 9 |
+
|
| 10 |
+
#stimuli_lightbox a img { border: none; }
|
| 11 |
+
|
| 12 |
+
#stimuli_outerImageContainer {
|
| 13 |
+
position: relative;
|
| 14 |
+
background-color: #333;
|
| 15 |
+
width: 250px;
|
| 16 |
+
height: 250px;
|
| 17 |
+
margin: 0 auto;
|
| 18 |
+
}
|
| 19 |
+
|
| 20 |
+
#stimuli_imageContainer {
|
| 21 |
+
padding: 10px;
|
| 22 |
+
}
|
| 23 |
+
|
| 24 |
+
#stimuli_loading {
|
| 25 |
+
position: absolute;
|
| 26 |
+
top: 40%;
|
| 27 |
+
left: 0%;
|
| 28 |
+
height: 25%;
|
| 29 |
+
width: 100%;
|
| 30 |
+
text-align: center;
|
| 31 |
+
line-height: 0;
|
| 32 |
+
background: transparent center url(images/loading.gif) no-repeat;
|
| 33 |
+
}
|
| 34 |
+
#stimuli_hoverNav {
|
| 35 |
+
position: absolute;
|
| 36 |
+
top: 0;
|
| 37 |
+
left: 0;
|
| 38 |
+
height: 100%;
|
| 39 |
+
width: 100%;
|
| 40 |
+
z-index: 10;
|
| 41 |
+
}
|
| 42 |
+
#stimuli_imageContainer>#stimuli_hoverNav { left: 0;}
|
| 43 |
+
#stimuli_hoverNav a { outline: none;}
|
| 44 |
+
|
| 45 |
+
#stimuli_prevLink, #stimuli_nextLink {
|
| 46 |
+
width: 49%;
|
| 47 |
+
height: 100%;
|
| 48 |
+
background: transparent url(images/blank.gif) no-repeat; /* Trick IE into showing hover */
|
| 49 |
+
display: block;
|
| 50 |
+
}
|
| 51 |
+
#stimuli_prevLink { left: 0; float: left;}
|
| 52 |
+
#stimuli_nextLink { right: 0; float: right;}
|
| 53 |
+
#stimuli_prevLink:hover, #stimuli_prevLink:visited:hover { background: url(images/prev.gif) left 55% no-repeat; }
|
| 54 |
+
#stimuli_nextLink:hover, #stimuli_nextLink:visited:hover { background: url(images/next.gif) right 55% no-repeat; }
|
| 55 |
+
|
| 56 |
+
|
| 57 |
+
#stimuli_imageDataContainer {
|
| 58 |
+
font: 10px Verdana, Helvetica, sans-serif;
|
| 59 |
+
background-color: #333;
|
| 60 |
+
margin: 0 auto;
|
| 61 |
+
line-height: 1.4em;
|
| 62 |
+
overflow: auto;
|
| 63 |
+
width: 100%
|
| 64 |
+
}
|
| 65 |
+
|
| 66 |
+
#stimuli_imageData { padding:0 10px; color: #FFF; }
|
| 67 |
+
#stimuli_imageData #stimuli_imageDetails { width: 70%; float: left; text-align: left; }
|
| 68 |
+
#stimuli_imageData #stimuli_caption { font-weight: bold;}
|
| 69 |
+
#stimuli_imageData #stimuli_numberDisplay { display: block; clear: left; padding-bottom: 1.0em;}
|
| 70 |
+
#stimuli_imageData #stimuli_bottomNavClose { width: 66px; float: right; padding-bottom: 0.7em; background: url(images/closelabel.gif) right 55% no-repeat; padding-top: 1.0em; margin-bottom: 1.0em;}
|
| 71 |
+
|
| 72 |
+
#stimuli_overlay {
|
| 73 |
+
position: absolute;
|
| 74 |
+
top: 0;
|
| 75 |
+
left: 0;
|
| 76 |
+
z-index: 90;
|
| 77 |
+
width: 100%;
|
| 78 |
+
height: 500px;
|
| 79 |
+
background-color: #666;
|
| 80 |
+
}
|
Themes/Grey/images/blank.gif
ADDED
|
Binary file
|
Themes/Grey/images/closelabel.gif
ADDED
|
Binary file
|
Themes/Grey/images/loading.gif
ADDED
|
Binary file
|
Themes/Grey/images/next.gif
ADDED
|
Binary file
|
Themes/Grey/images/prev.gif
ADDED
|
Binary file
|
Themes/Grey/lightbox.css
ADDED
|
@@ -0,0 +1,80 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
#stimuli_lightbox {
|
| 2 |
+
position: absolute;
|
| 3 |
+
left: 0;
|
| 4 |
+
width: 100%;
|
| 5 |
+
z-index: 100;
|
| 6 |
+
text-align: center;
|
| 7 |
+
line-height: 0;
|
| 8 |
+
}
|
| 9 |
+
|
| 10 |
+
#stimuli_lightbox a img { border: none; }
|
| 11 |
+
|
| 12 |
+
#stimuli_outerImageContainer {
|
| 13 |
+
position: relative;
|
| 14 |
+
background-color: #666;
|
| 15 |
+
width: 250px;
|
| 16 |
+
height: 250px;
|
| 17 |
+
margin: 0 auto;
|
| 18 |
+
}
|
| 19 |
+
|
| 20 |
+
#stimuli_imageContainer {
|
| 21 |
+
padding: 10px;
|
| 22 |
+
}
|
| 23 |
+
|
| 24 |
+
#stimuli_loading {
|
| 25 |
+
position: absolute;
|
| 26 |
+
top: 40%;
|
| 27 |
+
left: 0%;
|
| 28 |
+
height: 25%;
|
| 29 |
+
width: 100%;
|
| 30 |
+
text-align: center;
|
| 31 |
+
line-height: 0;
|
| 32 |
+
background: transparent center url(images/loading.gif) no-repeat;
|
| 33 |
+
}
|
| 34 |
+
#stimuli_hoverNav {
|
| 35 |
+
position: absolute;
|
| 36 |
+
top: 0;
|
| 37 |
+
left: 0;
|
| 38 |
+
height: 100%;
|
| 39 |
+
width: 100%;
|
| 40 |
+
z-index: 10;
|
| 41 |
+
}
|
| 42 |
+
#stimuli_imageContainer>#stimuli_hoverNav { left: 0;}
|
| 43 |
+
#stimuli_hoverNav a { outline: none;}
|
| 44 |
+
|
| 45 |
+
#stimuli_prevLink, #stimuli_nextLink {
|
| 46 |
+
width: 49%;
|
| 47 |
+
height: 100%;
|
| 48 |
+
background: transparent url(images/blank.gif) no-repeat; /* Trick IE into showing hover */
|
| 49 |
+
display: block;
|
| 50 |
+
}
|
| 51 |
+
#stimuli_prevLink { left: 0; float: left;}
|
| 52 |
+
#stimuli_nextLink { right: 0; float: right;}
|
| 53 |
+
#stimuli_prevLink:hover, #stimuli_prevLink:visited:hover { background: url(images/prev.gif) left 55% no-repeat; }
|
| 54 |
+
#stimuli_nextLink:hover, #stimuli_nextLink:visited:hover { background: url(images/next.gif) right 55% no-repeat; }
|
| 55 |
+
|
| 56 |
+
|
| 57 |
+
#stimuli_imageDataContainer {
|
| 58 |
+
font: 10px Verdana, Helvetica, sans-serif;
|
| 59 |
+
background-color: #666;
|
| 60 |
+
margin: 0 auto;
|
| 61 |
+
line-height: 1.4em;
|
| 62 |
+
overflow: auto;
|
| 63 |
+
width: 100%
|
| 64 |
+
}
|
| 65 |
+
|
| 66 |
+
#stimuli_imageData { padding:0 10px; color: #FFF; }
|
| 67 |
+
#stimuli_imageData #stimuli_imageDetails { width: 70%; float: left; text-align: left; }
|
| 68 |
+
#stimuli_imageData #stimuli_caption { font-weight: bold;}
|
| 69 |
+
#stimuli_imageData #stimuli_numberDisplay { display: block; clear: left; padding-bottom: 1.0em;}
|
| 70 |
+
#stimuli_imageData #stimuli_bottomNavClose { width: 66px; float: right; padding-bottom: 0.7em; background: url(images/closelabel.gif) right 55% no-repeat; padding-top: 1.0em; margin-bottom: 1.0em;}
|
| 71 |
+
|
| 72 |
+
#stimuli_overlay {
|
| 73 |
+
position: absolute;
|
| 74 |
+
top: 0;
|
| 75 |
+
left: 0;
|
| 76 |
+
z-index: 90;
|
| 77 |
+
width: 100%;
|
| 78 |
+
height: 500px;
|
| 79 |
+
background-color: #000;
|
| 80 |
+
}
|
Themes/White/images/blank.gif
ADDED
|
Binary file
|
Themes/White/images/closelabel.gif
ADDED
|
Binary file
|
Themes/White/images/loading.gif
ADDED
|
Binary file
|
Themes/White/images/next.gif
ADDED
|
Binary file
|
Themes/White/images/prev.gif
ADDED
|
Binary file
|
Themes/White/lightbox.css
ADDED
|
@@ -0,0 +1,80 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
#stimuli_lightbox {
|
| 2 |
+
position: absolute;
|
| 3 |
+
left: 0;
|
| 4 |
+
width: 100%;
|
| 5 |
+
z-index: 100;
|
| 6 |
+
text-align: center;
|
| 7 |
+
line-height: 0;
|
| 8 |
+
}
|
| 9 |
+
|
| 10 |
+
#stimuli_lightbox a img { border: none; }
|
| 11 |
+
|
| 12 |
+
#stimuli_outerImageContainer {
|
| 13 |
+
position: relative;
|
| 14 |
+
background-color: #fff;
|
| 15 |
+
width: 250px;
|
| 16 |
+
height: 250px;
|
| 17 |
+
margin: 0 auto;
|
| 18 |
+
}
|
| 19 |
+
|
| 20 |
+
#stimuli_imageContainer {
|
| 21 |
+
padding: 10px;
|
| 22 |
+
}
|
| 23 |
+
|
| 24 |
+
#stimuli_loading {
|
| 25 |
+
position: absolute;
|
| 26 |
+
top: 40%;
|
| 27 |
+
left: 0%;
|
| 28 |
+
height: 25%;
|
| 29 |
+
width: 100%;
|
| 30 |
+
text-align: center;
|
| 31 |
+
line-height: 0;
|
| 32 |
+
background: transparent center url(images/loading.gif) no-repeat;
|
| 33 |
+
}
|
| 34 |
+
#stimuli_hoverNav {
|
| 35 |
+
position: absolute;
|
| 36 |
+
top: 0;
|
| 37 |
+
left: 0;
|
| 38 |
+
height: 100%;
|
| 39 |
+
width: 100%;
|
| 40 |
+
z-index: 10;
|
| 41 |
+
}
|
| 42 |
+
#stimuli_imageContainer>#stimuli_hoverNav { left: 0;}
|
| 43 |
+
#stimuli_hoverNav a { outline: none;}
|
| 44 |
+
|
| 45 |
+
#stimuli_prevLink, #stimuli_nextLink {
|
| 46 |
+
width: 49%;
|
| 47 |
+
height: 100%;
|
| 48 |
+
background: transparent url(images/blank.gif) no-repeat; /* Trick IE into showing hover */
|
| 49 |
+
display: block;
|
| 50 |
+
}
|
| 51 |
+
#stimuli_prevLink { left: 0; float: left;}
|
| 52 |
+
#stimuli_nextLink { right: 0; float: right;}
|
| 53 |
+
#stimuli_prevLink:hover, #stimuli_prevLink:visited:hover { background: url(images/prev.gif) left 55% no-repeat; }
|
| 54 |
+
#stimuli_nextLink:hover, #stimuli_nextLink:visited:hover { background: url(images/next.gif) right 55% no-repeat; }
|
| 55 |
+
|
| 56 |
+
|
| 57 |
+
#stimuli_imageDataContainer {
|
| 58 |
+
font: 10px Verdana, Helvetica, sans-serif;
|
| 59 |
+
background-color: #fff;
|
| 60 |
+
margin: 0 auto;
|
| 61 |
+
line-height: 1.4em;
|
| 62 |
+
overflow: auto;
|
| 63 |
+
width: 100%
|
| 64 |
+
}
|
| 65 |
+
|
| 66 |
+
#stimuli_imageData { padding:0 10px; color: #666; }
|
| 67 |
+
#stimuli_imageData #stimuli_imageDetails { width: 70%; float: left; text-align: left; }
|
| 68 |
+
#stimuli_imageData #stimuli_caption { font-weight: bold;}
|
| 69 |
+
#stimuli_imageData #stimuli_numberDisplay { display: block; clear: left; padding-bottom: 1.0em;}
|
| 70 |
+
#stimuli_imageData #stimuli_bottomNavClose { width: 66px; float: right; padding-bottom: 0.7em; background: url(images/closelabel.gif) right 55% no-repeat; padding-top: 1.0em; margin-bottom: 1.0em;}
|
| 71 |
+
|
| 72 |
+
#stimuli_overlay {
|
| 73 |
+
position: absolute;
|
| 74 |
+
top: 0;
|
| 75 |
+
left: 0;
|
| 76 |
+
z-index: 90;
|
| 77 |
+
width: 100%;
|
| 78 |
+
height: 500px;
|
| 79 |
+
background-color: #000;
|
| 80 |
+
}
|
lightbox-resize.js
ADDED
|
@@ -0,0 +1,547 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
// For original FULL CODE COMMENTS grab the original lightbox source: http://www.huddletogether.com/projects/lightbox2/releases/lightbox2.03.3.zip
|
| 2 |
+
// Lightbox v2.03.3 by Lokesh Dhakar
|
| 3 |
+
// http://huddletogether.com/projects/lightbox2/
|
| 4 |
+
// Licensed under the Creative Commons Attribution 2.5 License
|
| 5 |
+
// -----------------------------------------------------------------------------------
|
| 6 |
+
// Configuration
|
| 7 |
+
var overlayOpacity = 0.8; // controls transparency of shadow overlay
|
| 8 |
+
var animate = true; // toggles resizing animations
|
| 9 |
+
var resizeSpeed = 9; // controls the speed of the image resizing animations (1=slowest and 10=fastest)
|
| 10 |
+
var borderSize = 10; //if you adjust the padding in the CSS, you will need to update this variable
|
| 11 |
+
// -----------------------------------------------------------------------------------
|
| 12 |
+
// Global Variables
|
| 13 |
+
var imageArray = new Array;
|
| 14 |
+
var activeImage;
|
| 15 |
+
if(animate == true){
|
| 16 |
+
overlayDuration = 0.2; // shadow fade in/out duration
|
| 17 |
+
if(resizeSpeed > 10){ resizeSpeed = 10;}
|
| 18 |
+
if(resizeSpeed < 1){ resizeSpeed = 1;}
|
| 19 |
+
resizeDuration = (11 - resizeSpeed) * 0.15;
|
| 20 |
+
} else {
|
| 21 |
+
overlayDuration = 0;
|
| 22 |
+
resizeDuration = 0;
|
| 23 |
+
}
|
| 24 |
+
// -----------------------------------------------------------------------------------
|
| 25 |
+
// Additional methods for Element
|
| 26 |
+
Object.extend(Element, {
|
| 27 |
+
getWidth: function(element) {
|
| 28 |
+
element = $(element);
|
| 29 |
+
return element.offsetWidth;
|
| 30 |
+
},
|
| 31 |
+
setWidth: function(element,w) {
|
| 32 |
+
element = $(element);
|
| 33 |
+
element.style.width = w +"px";
|
| 34 |
+
},
|
| 35 |
+
setHeight: function(element,h) {
|
| 36 |
+
element = $(element);
|
| 37 |
+
element.style.height = h +"px";
|
| 38 |
+
},
|
| 39 |
+
setTop: function(element,t) {
|
| 40 |
+
element = $(element);
|
| 41 |
+
element.style.top = t +"px";
|
| 42 |
+
},
|
| 43 |
+
setLeft: function(element,l) {
|
| 44 |
+
element = $(element);
|
| 45 |
+
element.style.left = l +"px";
|
| 46 |
+
},
|
| 47 |
+
setSrc: function(element,src) {
|
| 48 |
+
element = $(element);
|
| 49 |
+
element.src = src;
|
| 50 |
+
},
|
| 51 |
+
setHref: function(element,href) {
|
| 52 |
+
element = $(element);
|
| 53 |
+
element.href = href;
|
| 54 |
+
},
|
| 55 |
+
setInnerHTML: function(element,content) {
|
| 56 |
+
element = $(element);
|
| 57 |
+
element.innerHTML = content;
|
| 58 |
+
}
|
| 59 |
+
});
|
| 60 |
+
// -----------------------------------------------------------------------------------
|
| 61 |
+
// Extending built-in Array object
|
| 62 |
+
// - array.removeDuplicates()
|
| 63 |
+
// - array.empty()
|
| 64 |
+
Array.prototype.removeDuplicates = function () {
|
| 65 |
+
for(i = 0; i < this.length; i++){
|
| 66 |
+
for(j = this.length-1; j>i; j--){
|
| 67 |
+
if(this[i][0] == this[j][0]){
|
| 68 |
+
this.splice(j,1);
|
| 69 |
+
}
|
| 70 |
+
}
|
| 71 |
+
}
|
| 72 |
+
}
|
| 73 |
+
// -----------------------------------------------------------------------------------
|
| 74 |
+
Array.prototype.empty = function () {
|
| 75 |
+
for(i = 0; i <= this.length; i++){
|
| 76 |
+
this.shift();
|
| 77 |
+
}
|
| 78 |
+
}
|
| 79 |
+
// -----------------------------------------------------------------------------------
|
| 80 |
+
var Lightbox = Class.create();
|
| 81 |
+
Lightbox.prototype = {
|
| 82 |
+
// initialize()
|
| 83 |
+
// Constructor runs on completion of the DOM loading. Calls updateImageList and then
|
| 84 |
+
// the function inserts html at the bottom of the page which is used to display the shadow
|
| 85 |
+
// overlay and the image container.
|
| 86 |
+
initialize: function() {
|
| 87 |
+
|
| 88 |
+
this.updateImageList();
|
| 89 |
+
var objBody = document.getElementsByTagName("body").item(0);
|
| 90 |
+
var objOverlay = document.createElement("div");
|
| 91 |
+
objOverlay.setAttribute('id','stimuli_overlay');
|
| 92 |
+
objOverlay.style.display = 'none';
|
| 93 |
+
objOverlay.onclick = function() { myLightbox.end(); }
|
| 94 |
+
objBody.appendChild(objOverlay);
|
| 95 |
+
var objLightbox = document.createElement("div");
|
| 96 |
+
objLightbox.setAttribute('id','stimuli_lightbox');
|
| 97 |
+
objLightbox.style.display = 'none';
|
| 98 |
+
objLightbox.onclick = function(e) { // close Lightbox if user clicks shadow overlay
|
| 99 |
+
if (!e) var e = window.event;
|
| 100 |
+
var clickObj = Event.element(e).id;
|
| 101 |
+
if ( clickObj == 'stimuli_lightbox') {
|
| 102 |
+
myLightbox.end();
|
| 103 |
+
}
|
| 104 |
+
};
|
| 105 |
+
objBody.appendChild(objLightbox);
|
| 106 |
+
var objOuterImageContainer = document.createElement("div");
|
| 107 |
+
objOuterImageContainer.setAttribute('id','stimuli_outerImageContainer');
|
| 108 |
+
objLightbox.appendChild(objOuterImageContainer);
|
| 109 |
+
// When Lightbox starts it will resize itself from 250 by 250 to the current image dimension.
|
| 110 |
+
// If animations are turned off, it will be hidden as to prevent a flicker of a
|
| 111 |
+
// white 250 by 250 box.
|
| 112 |
+
if(animate){
|
| 113 |
+
Element.setWidth('stimuli_outerImageContainer', 250);
|
| 114 |
+
Element.setHeight('stimuli_outerImageContainer', 250);
|
| 115 |
+
} else {
|
| 116 |
+
Element.setWidth('stimuli_outerImageContainer', 1);
|
| 117 |
+
Element.setHeight('stimuli_outerImageContainer', 1);
|
| 118 |
+
}
|
| 119 |
+
var objImageContainer = document.createElement("div");
|
| 120 |
+
objImageContainer.setAttribute('id','stimuli_imageContainer');
|
| 121 |
+
objOuterImageContainer.appendChild(objImageContainer);
|
| 122 |
+
|
| 123 |
+
var objLightboxImage = document.createElement("img");
|
| 124 |
+
objLightboxImage.setAttribute('id','stimuli_lightboxImage');
|
| 125 |
+
objImageContainer.appendChild(objLightboxImage);
|
| 126 |
+
|
| 127 |
+
var objHoverNav = document.createElement("div");
|
| 128 |
+
objHoverNav.setAttribute('id','stimuli_hoverNav');
|
| 129 |
+
objImageContainer.appendChild(objHoverNav);
|
| 130 |
+
|
| 131 |
+
var objPrevLink = document.createElement("a");
|
| 132 |
+
objPrevLink.setAttribute('id','stimuli_prevLink');
|
| 133 |
+
objPrevLink.setAttribute('href','#');
|
| 134 |
+
objHoverNav.appendChild(objPrevLink);
|
| 135 |
+
|
| 136 |
+
var objNextLink = document.createElement("a");
|
| 137 |
+
objNextLink.setAttribute('id','stimuli_nextLink');
|
| 138 |
+
objNextLink.setAttribute('href','#');
|
| 139 |
+
objHoverNav.appendChild(objNextLink);
|
| 140 |
+
|
| 141 |
+
var objLoading = document.createElement("div");
|
| 142 |
+
objLoading.setAttribute('id','stimuli_loading');
|
| 143 |
+
objImageContainer.appendChild(objLoading);
|
| 144 |
+
|
| 145 |
+
var objLoadingLink = document.createElement("a");
|
| 146 |
+
objLoadingLink.setAttribute('id','stimuli_loadingLink');
|
| 147 |
+
objLoadingLink.setAttribute('href','#');
|
| 148 |
+
objLoadingLink.onclick = function() { myLightbox.end(); return false; }
|
| 149 |
+
objLoading.appendChild(objLoadingLink);
|
| 150 |
+
|
| 151 |
+
var objImageDataContainer = document.createElement("div");
|
| 152 |
+
objImageDataContainer.setAttribute('id','stimuli_imageDataContainer');
|
| 153 |
+
objLightbox.appendChild(objImageDataContainer);
|
| 154 |
+
var objImageData = document.createElement("div");
|
| 155 |
+
objImageData.setAttribute('id','stimuli_imageData');
|
| 156 |
+
objImageDataContainer.appendChild(objImageData);
|
| 157 |
+
|
| 158 |
+
var objImageDetails = document.createElement("div");
|
| 159 |
+
objImageDetails.setAttribute('id','stimuli_imageDetails');
|
| 160 |
+
objImageData.appendChild(objImageDetails);
|
| 161 |
+
|
| 162 |
+
var objCaption = document.createElement("span");
|
| 163 |
+
objCaption.setAttribute('id','stimuli_caption');
|
| 164 |
+
objImageDetails.appendChild(objCaption);
|
| 165 |
+
|
| 166 |
+
var objNumberDisplay = document.createElement("span");
|
| 167 |
+
objNumberDisplay.setAttribute('id','stimuli_numberDisplay');
|
| 168 |
+
objImageDetails.appendChild(objNumberDisplay);
|
| 169 |
+
|
| 170 |
+
var objBottomNav = document.createElement("div");
|
| 171 |
+
objBottomNav.setAttribute('id','stimuli_bottomNav');
|
| 172 |
+
objImageData.appendChild(objBottomNav);
|
| 173 |
+
|
| 174 |
+
var objBottomNavCloseLink = document.createElement("a");
|
| 175 |
+
objBottomNavCloseLink.setAttribute('id','stimuli_bottomNavClose');
|
| 176 |
+
objBottomNavCloseLink.setAttribute('href','#');
|
| 177 |
+
objBottomNavCloseLink.onclick = function() { myLightbox.end(); return false; }
|
| 178 |
+
objBottomNav.appendChild(objBottomNavCloseLink);
|
| 179 |
+
},
|
| 180 |
+
// updateImageList()
|
| 181 |
+
// Loops through anchor tags looking for 'lightbox' references and applies onclick
|
| 182 |
+
// events to appropriate links. You can rerun after dynamically adding images w/ajax.
|
| 183 |
+
updateImageList: function() {
|
| 184 |
+
if (!document.getElementsByTagName){ return; }
|
| 185 |
+
var anchors = document.getElementsByTagName('a');
|
| 186 |
+
var areas = document.getElementsByTagName('area');
|
| 187 |
+
// loop through all anchor tags
|
| 188 |
+
for (var i=0; i<anchors.length; i++){
|
| 189 |
+
var anchor = anchors[i];
|
| 190 |
+
var relAttribute = String(anchor.getAttribute('rel'));
|
| 191 |
+
// use the string.match() method to catch 'lightbox' references in the rel attribute
|
| 192 |
+
if (anchor.getAttribute('href') && (relAttribute.toLowerCase().match('lightbox'))){
|
| 193 |
+
anchor.onclick = function () {myLightbox.start(this); return false;}
|
| 194 |
+
}
|
| 195 |
+
}
|
| 196 |
+
// loop through all area tags
|
| 197 |
+
// todo: combine anchor & area tag loops
|
| 198 |
+
for (var i=0; i< areas.length; i++){
|
| 199 |
+
var area = areas[i];
|
| 200 |
+
var relAttribute = String(area.getAttribute('rel'));
|
| 201 |
+
// use the string.match() method to catch 'lightbox' references in the rel attribute
|
| 202 |
+
if (area.getAttribute('href') && (relAttribute.toLowerCase().match('lightbox'))){
|
| 203 |
+
area.onclick = function () {myLightbox.start(this); return false;}
|
| 204 |
+
}
|
| 205 |
+
}
|
| 206 |
+
},
|
| 207 |
+
// start()
|
| 208 |
+
// Display overlay and lightbox. If image is part of a set, add siblings to imageArray.
|
| 209 |
+
start: function(imageLink) {
|
| 210 |
+
hideSelectBoxes();
|
| 211 |
+
hideFlash();
|
| 212 |
+
// stretch overlay to fill page and fade in
|
| 213 |
+
var arrayPageSize = getPageSize();
|
| 214 |
+
Element.setWidth('stimuli_overlay', arrayPageSize[0]);
|
| 215 |
+
Element.setHeight('stimuli_overlay', arrayPageSize[1]);
|
| 216 |
+
new Effect.Appear('stimuli_overlay', { duration: overlayDuration, from: 0.0, to: overlayOpacity });
|
| 217 |
+
imageArray = [];
|
| 218 |
+
imageNum = 0;
|
| 219 |
+
if (!document.getElementsByTagName){ return; }
|
| 220 |
+
var anchors = document.getElementsByTagName( imageLink.tagName);
|
| 221 |
+
var stimuli_image_title = "";
|
| 222 |
+
// if image is NOT part of a set... ie not lightbox[someset]
|
| 223 |
+
if((imageLink.getAttribute('rel') == 'lightbox')){
|
| 224 |
+
// check for title-less links, and grab image title if needed
|
| 225 |
+
stimuli_image_title = "";
|
| 226 |
+
var possibleLightboxImageTitles = [imageLink.getAttribute('title'), imageLink.childNodes[0]['title'], imageLink.childNodes[0]['alt'], " "];
|
| 227 |
+
var possible_Int = 0;
|
| 228 |
+
while (stimuli_image_title == ("")) {
|
| 229 |
+
stimuli_image_title = possibleLightboxImageTitles[possible_Int];
|
| 230 |
+
possible_Int++;
|
| 231 |
+
}
|
| 232 |
+
// add single image to imageArray
|
| 233 |
+
imageArray.push(new Array(imageLink.getAttribute('href'), stimuli_image_title));
|
| 234 |
+
} else {
|
| 235 |
+
// if image is part of a set... ie lightbox[someset]
|
| 236 |
+
// loop through anchors, find other images in set, and add them to imageArray
|
| 237 |
+
for (var i=0; i<anchors.length; i++){
|
| 238 |
+
var anchor = anchors[i];
|
| 239 |
+
if (anchor.getAttribute('href') && (anchor.getAttribute('rel') == imageLink.getAttribute('rel'))){
|
| 240 |
+
// check for title-less links, and grab image title if needed
|
| 241 |
+
stimuli_image_title = "";
|
| 242 |
+
var possibleLightboxImageTitles = [ anchor['title'], anchor.childNodes[0]['title'], anchor.childNodes[0]['alt'], " " ];
|
| 243 |
+
var possible_Int = 0;
|
| 244 |
+
while (stimuli_image_title == ("")) {
|
| 245 |
+
stimuli_image_title = possibleLightboxImageTitles[possible_Int];
|
| 246 |
+
possible_Int++;
|
| 247 |
+
}
|
| 248 |
+
imageArray.push(new Array(anchor.getAttribute('href'), stimuli_image_title));
|
| 249 |
+
}
|
| 250 |
+
}
|
| 251 |
+
imageArray.removeDuplicates();
|
| 252 |
+
while(imageArray[imageNum][0] != imageLink.getAttribute('href')) { imageNum++;}
|
| 253 |
+
}
|
| 254 |
+
// calculate top and left offset for the lightbox
|
| 255 |
+
var arrayPageScroll = getPageScroll();
|
| 256 |
+
var lightboxTop = arrayPageScroll[1] + (arrayPageSize[3] / 10);
|
| 257 |
+
var lightboxLeft = arrayPageScroll[0];
|
| 258 |
+
Element.setTop('stimuli_lightbox', lightboxTop);
|
| 259 |
+
Element.setLeft('stimuli_lightbox', lightboxLeft);
|
| 260 |
+
Element.show('stimuli_lightbox');
|
| 261 |
+
this.changeImage(imageNum);
|
| 262 |
+
},
|
| 263 |
+
// changeImage()
|
| 264 |
+
// Hide most elements and preload image in preparation for resizing image container.
|
| 265 |
+
changeImage: function(imageNum) {
|
| 266 |
+
activeImage = imageNum; // update global var
|
| 267 |
+
// hide elements during transition
|
| 268 |
+
if(animate){ Element.show('stimuli_loading');}
|
| 269 |
+
Element.hide('stimuli_lightboxImage');
|
| 270 |
+
Element.hide('stimuli_hoverNav');
|
| 271 |
+
Element.hide('stimuli_prevLink');
|
| 272 |
+
Element.hide('stimuli_nextLink');
|
| 273 |
+
Element.hide('stimuli_imageDataContainer');
|
| 274 |
+
Element.hide('stimuli_numberDisplay');
|
| 275 |
+
imgPreloader = new Image();
|
| 276 |
+
// once image is preloaded, resize image container
|
| 277 |
+
imgPreloader.onload=function(){
|
| 278 |
+
// Shrink larger images horizontally and/or vertically to fit screen without scrolling:
|
| 279 |
+
if(arrayPageSize[0]<imgPreloader.width) {
|
| 280 |
+
imgPreloader.height=(imgPreloader.height*(arrayPageSize[0]-2*borderSize)/imgPreloader.width);
|
| 281 |
+
imgPreloader.width=(arrayPageSize[0]-2*borderSize);
|
| 282 |
+
}
|
| 283 |
+
if(arrayPageSize[3]<imgPreloader.height) { //15 is a number that 'just works'
|
| 284 |
+
imgPreloader.width=(imgPreloader.width*(arrayPageSize[3]-15*borderSize)/imgPreloader.height);
|
| 285 |
+
imgPreloader.height=(arrayPageSize[3]-15*borderSize);
|
| 286 |
+
}
|
| 287 |
+
Element.setSrc('stimuli_lightboxImage', imageArray[activeImage][0]);
|
| 288 |
+
Element.setWidth('stimuli_lightboxImage', imgPreloader.width);
|
| 289 |
+
Element.setHeight('stimuli_lightboxImage', imgPreloader.height);
|
| 290 |
+
myLightbox.resizeImageContainer(imgPreloader.width, imgPreloader.height);
|
| 291 |
+
imgPreloader.onload=function(){}; // clear onLoad, IE behaves erratically with animated gifs otherwise
|
| 292 |
+
}
|
| 293 |
+
imgPreloader.src = imageArray[activeImage][0];
|
| 294 |
+
},
|
| 295 |
+
// resizeImageContainer()
|
| 296 |
+
resizeImageContainer: function( imgWidth, imgHeight) {
|
| 297 |
+
// get curren width and height
|
| 298 |
+
this.widthCurrent = Element.getWidth('stimuli_outerImageContainer');
|
| 299 |
+
this.heightCurrent = Element.getHeight('stimuli_outerImageContainer');
|
| 300 |
+
// get new width and height
|
| 301 |
+
var widthNew = (imgWidth + (borderSize * 2));
|
| 302 |
+
var heightNew = (imgHeight + (borderSize * 2));
|
| 303 |
+
// scalars based on change from old to new
|
| 304 |
+
this.xScale = ( widthNew / this.widthCurrent) * 100;
|
| 305 |
+
this.yScale = ( heightNew / this.heightCurrent) * 100;
|
| 306 |
+
// calculate size difference between new and old image, and resize if necessary
|
| 307 |
+
wDiff = this.widthCurrent - widthNew;
|
| 308 |
+
hDiff = this.heightCurrent - heightNew;
|
| 309 |
+
if(!( hDiff == 0)){ new Effect.Scale('stimuli_outerImageContainer', this.yScale, {scaleX: false, duration: resizeDuration, queue: 'front'}); }
|
| 310 |
+
if(!( wDiff == 0)){ new Effect.Scale('stimuli_outerImageContainer', this.xScale, {scaleY: false, delay: resizeDuration, duration: resizeDuration}); }
|
| 311 |
+
// if new and old image are same size and no scaling transition is necessary,
|
| 312 |
+
// do a quick stimuli_pause to prevent image flicker.
|
| 313 |
+
if((hDiff == 0) && (wDiff == 0)){
|
| 314 |
+
if (navigator.appVersion.indexOf("MSIE")!=-1){ stimuli_pause(250); } else { stimuli_pause(100);}
|
| 315 |
+
}
|
| 316 |
+
Element.setHeight('stimuli_prevLink', imgHeight);
|
| 317 |
+
Element.setHeight('stimuli_nextLink', imgHeight);
|
| 318 |
+
Element.setWidth( 'stimuli_imageDataContainer', widthNew);
|
| 319 |
+
this.showImage();
|
| 320 |
+
},
|
| 321 |
+
// showImage()
|
| 322 |
+
// Display image and begin preloading neighbors.
|
| 323 |
+
showImage: function(){
|
| 324 |
+
Element.hide('stimuli_loading');
|
| 325 |
+
new Effect.Appear('stimuli_lightboxImage', { duration: resizeDuration, queue: 'end', afterFinish: function(){ myLightbox.updateDetails(); } });
|
| 326 |
+
this.preloadNeighborImages();
|
| 327 |
+
},
|
| 328 |
+
// updateDetails()
|
| 329 |
+
// Display caption, image number, and bottom nav.
|
| 330 |
+
updateDetails: function() {
|
| 331 |
+
// if caption is not null
|
| 332 |
+
if(imageArray[activeImage][1]){
|
| 333 |
+
Element.show('stimuli_caption');
|
| 334 |
+
Element.setInnerHTML( 'stimuli_caption', imageArray[activeImage][1]);
|
| 335 |
+
}
|
| 336 |
+
// if image is part of set display 'Image x of x'
|
| 337 |
+
if(imageArray.length > 1){
|
| 338 |
+
Element.show('stimuli_numberDisplay');
|
| 339 |
+
Element.setInnerHTML( 'stimuli_numberDisplay', "Image " + eval(activeImage + 1) + " of " + imageArray.length);
|
| 340 |
+
}
|
| 341 |
+
new Effect.Parallel(
|
| 342 |
+
[ new Effect.SlideDown( 'stimuli_imageDataContainer', { sync: true, duration: resizeDuration, from: 0.0, to: 1.0 }),
|
| 343 |
+
new Effect.Appear('stimuli_imageDataContainer', { sync: true, duration: resizeDuration }) ],
|
| 344 |
+
{ duration: resizeDuration, afterFinish: function() {
|
| 345 |
+
// update overlay size and update nav
|
| 346 |
+
var arrayPageSize = getPageSize();
|
| 347 |
+
Element.setHeight('stimuli_overlay', arrayPageSize[1]);
|
| 348 |
+
myLightbox.updateNav();
|
| 349 |
+
}
|
| 350 |
+
}
|
| 351 |
+
);
|
| 352 |
+
},
|
| 353 |
+
// updateNav()
|
| 354 |
+
// Display appropriate previous and next hover navigation.
|
| 355 |
+
updateNav: function() {
|
| 356 |
+
Element.show('stimuli_hoverNav');
|
| 357 |
+
// if not first image in set, display prev image button
|
| 358 |
+
if(activeImage != 0){
|
| 359 |
+
Element.show('stimuli_prevLink');
|
| 360 |
+
document.getElementById('stimuli_prevLink').onclick = function() {
|
| 361 |
+
myLightbox.changeImage(activeImage - 1); return false;
|
| 362 |
+
}
|
| 363 |
+
}
|
| 364 |
+
// if not last image in set, display next image button
|
| 365 |
+
if(activeImage != (imageArray.length - 1)){
|
| 366 |
+
Element.show('stimuli_nextLink');
|
| 367 |
+
document.getElementById('stimuli_nextLink').onclick = function() {
|
| 368 |
+
myLightbox.changeImage(activeImage + 1); return false;
|
| 369 |
+
}
|
| 370 |
+
}
|
| 371 |
+
this.enableKeyboardNav();
|
| 372 |
+
},
|
| 373 |
+
// enableKeyboardNav()
|
| 374 |
+
enableKeyboardNav: function() {
|
| 375 |
+
document.onkeydown = this.keyboardAction;
|
| 376 |
+
},
|
| 377 |
+
// disableKeyboardNav()
|
| 378 |
+
disableKeyboardNav: function() {
|
| 379 |
+
document.onkeydown = '';
|
| 380 |
+
},
|
| 381 |
+
// keyboardAction()
|
| 382 |
+
keyboardAction: function(e) {
|
| 383 |
+
if (e == null) { // ie
|
| 384 |
+
keycode = event.keyCode;
|
| 385 |
+
escapeKey = 27;
|
| 386 |
+
} else { // mozilla
|
| 387 |
+
keycode = e.keyCode;
|
| 388 |
+
escapeKey = e.DOM_VK_ESCAPE;
|
| 389 |
+
}
|
| 390 |
+
key = String.fromCharCode(keycode).toLowerCase();
|
| 391 |
+
if((key == 'x') || (key == 'o') || (key == 'c') || (keycode == escapeKey)){ // close lightbox
|
| 392 |
+
myLightbox.end();
|
| 393 |
+
} else if((key == 'p') || (keycode == 37)){ // display previous image
|
| 394 |
+
if(activeImage != 0){
|
| 395 |
+
myLightbox.disableKeyboardNav();
|
| 396 |
+
myLightbox.changeImage(activeImage - 1);
|
| 397 |
+
}
|
| 398 |
+
} else if((key == 'n') || (keycode == 39)){ // display next image
|
| 399 |
+
if(activeImage != (imageArray.length - 1)){
|
| 400 |
+
myLightbox.disableKeyboardNav();
|
| 401 |
+
myLightbox.changeImage(activeImage + 1);
|
| 402 |
+
}
|
| 403 |
+
}
|
| 404 |
+
},
|
| 405 |
+
// preloadNeighborImages()
|
| 406 |
+
// Preload previous and next images.
|
| 407 |
+
preloadNeighborImages: function(){
|
| 408 |
+
if((imageArray.length - 1) > activeImage){
|
| 409 |
+
preloadNextImage = new Image();
|
| 410 |
+
preloadNextImage.src = imageArray[activeImage + 1][0];
|
| 411 |
+
}
|
| 412 |
+
if(activeImage > 0){
|
| 413 |
+
preloadPrevImage = new Image();
|
| 414 |
+
preloadPrevImage.src = imageArray[activeImage - 1][0];
|
| 415 |
+
}
|
| 416 |
+
},
|
| 417 |
+
// end()
|
| 418 |
+
end: function() {
|
| 419 |
+
this.disableKeyboardNav();
|
| 420 |
+
Element.hide('stimuli_lightbox');
|
| 421 |
+
new Effect.Fade('stimuli_overlay', { duration: overlayDuration});
|
| 422 |
+
showSelectBoxes();
|
| 423 |
+
showFlash();
|
| 424 |
+
}
|
| 425 |
+
}
|
| 426 |
+
// -----------------------------------------------------------------------------------
|
| 427 |
+
// getPageScroll()
|
| 428 |
+
function getPageScroll(){
|
| 429 |
+
var xScroll, yScroll;
|
| 430 |
+
if (self.pageYOffset) {
|
| 431 |
+
yScroll = self.pageYOffset;
|
| 432 |
+
xScroll = self.pageXOffset;
|
| 433 |
+
} else if (document.documentElement && document.documentElement.scrollTop){ // Explorer 6 Strict
|
| 434 |
+
yScroll = document.documentElement.scrollTop;
|
| 435 |
+
xScroll = document.documentElement.scrollLeft;
|
| 436 |
+
} else if (document.body) {// all other Explorers
|
| 437 |
+
yScroll = document.body.scrollTop;
|
| 438 |
+
xScroll = document.body.scrollLeft;
|
| 439 |
+
}
|
| 440 |
+
arrayPageScroll = new Array(xScroll,yScroll)
|
| 441 |
+
return arrayPageScroll;
|
| 442 |
+
}
|
| 443 |
+
// -----------------------------------------------------------------------------------
|
| 444 |
+
// getPageSize()
|
| 445 |
+
function getPageSize(){
|
| 446 |
+
var xScroll, yScroll;
|
| 447 |
+
if (window.innerHeight && window.scrollMaxY) {
|
| 448 |
+
xScroll = window.innerWidth + window.scrollMaxX;
|
| 449 |
+
yScroll = window.innerHeight + window.scrollMaxY;
|
| 450 |
+
} else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
|
| 451 |
+
xScroll = document.body.scrollWidth;
|
| 452 |
+
yScroll = document.body.scrollHeight;
|
| 453 |
+
} else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
|
| 454 |
+
xScroll = document.body.offsetWidth;
|
| 455 |
+
yScroll = document.body.offsetHeight;
|
| 456 |
+
}
|
| 457 |
+
var windowWidth, windowHeight;
|
| 458 |
+
if (self.innerHeight) { // all except Explorer
|
| 459 |
+
if(document.documentElement.clientWidth){
|
| 460 |
+
windowWidth = document.documentElement.clientWidth;
|
| 461 |
+
} else {
|
| 462 |
+
windowWidth = self.innerWidth;
|
| 463 |
+
}
|
| 464 |
+
windowHeight = self.innerHeight;
|
| 465 |
+
} else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
|
| 466 |
+
windowWidth = document.documentElement.clientWidth;
|
| 467 |
+
windowHeight = document.documentElement.clientHeight;
|
| 468 |
+
} else if (document.body) { // other Explorers
|
| 469 |
+
windowWidth = document.body.clientWidth;
|
| 470 |
+
windowHeight = document.body.clientHeight;
|
| 471 |
+
}
|
| 472 |
+
// for small pages with total height less then height of the viewport
|
| 473 |
+
if(yScroll < windowHeight){
|
| 474 |
+
pageHeight = windowHeight;
|
| 475 |
+
} else {
|
| 476 |
+
pageHeight = yScroll;
|
| 477 |
+
}
|
| 478 |
+
// for small pages with total width less then width of the viewport
|
| 479 |
+
if(xScroll < windowWidth){
|
| 480 |
+
pageWidth = xScroll;
|
| 481 |
+
} else {
|
| 482 |
+
pageWidth = windowWidth;
|
| 483 |
+
}
|
| 484 |
+
arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight)
|
| 485 |
+
return arrayPageSize;
|
| 486 |
+
}
|
| 487 |
+
// -----------------------------------------------------------------------------------
|
| 488 |
+
// getKey(key)
|
| 489 |
+
function getKey(e){
|
| 490 |
+
if (e == null) { // ie
|
| 491 |
+
keycode = event.keyCode;
|
| 492 |
+
} else { // mozilla
|
| 493 |
+
keycode = e.which;
|
| 494 |
+
}
|
| 495 |
+
key = String.fromCharCode(keycode).toLowerCase();
|
| 496 |
+
if(key == 'x'){
|
| 497 |
+
}
|
| 498 |
+
}
|
| 499 |
+
// -----------------------------------------------------------------------------------
|
| 500 |
+
// listenKey()
|
| 501 |
+
function listenKey () { document.onkeypress = getKey; }
|
| 502 |
+
// ---------------------------------------------------
|
| 503 |
+
function showSelectBoxes(){
|
| 504 |
+
var selects = document.getElementsByTagName("select");
|
| 505 |
+
for (i = 0; i != selects.length; i++) {
|
| 506 |
+
selects[i].style.visibility = "visible";
|
| 507 |
+
}
|
| 508 |
+
}
|
| 509 |
+
// ---------------------------------------------------
|
| 510 |
+
function hideSelectBoxes(){
|
| 511 |
+
var selects = document.getElementsByTagName("select");
|
| 512 |
+
for (i = 0; i != selects.length; i++) {
|
| 513 |
+
selects[i].style.visibility = "hidden";
|
| 514 |
+
}
|
| 515 |
+
}
|
| 516 |
+
// ---------------------------------------------------
|
| 517 |
+
function showFlash(){
|
| 518 |
+
var flashObjects = document.getElementsByTagName("object");
|
| 519 |
+
for (i = 0; i < flashObjects.length; i++) {
|
| 520 |
+
flashObjects[i].style.visibility = "visible";
|
| 521 |
+
}
|
| 522 |
+
var flashEmbeds = document.getElementsByTagName("embed");
|
| 523 |
+
for (i = 0; i < flashEmbeds.length; i++) {
|
| 524 |
+
flashEmbeds[i].style.visibility = "visible";
|
| 525 |
+
}
|
| 526 |
+
}
|
| 527 |
+
// ---------------------------------------------------
|
| 528 |
+
function hideFlash(){
|
| 529 |
+
var flashObjects = document.getElementsByTagName("object");
|
| 530 |
+
for (i = 0; i < flashObjects.length; i++) {
|
| 531 |
+
flashObjects[i].style.visibility = "hidden";
|
| 532 |
+
}
|
| 533 |
+
var flashEmbeds = document.getElementsByTagName("embed");
|
| 534 |
+
for (i = 0; i < flashEmbeds.length; i++) {
|
| 535 |
+
flashEmbeds[i].style.visibility = "hidden";
|
| 536 |
+
}
|
| 537 |
+
}
|
| 538 |
+
// ---------------------------------------------------
|
| 539 |
+
function stimuli_pause(ms){
|
| 540 |
+
var date = new Date();
|
| 541 |
+
curDate = null;
|
| 542 |
+
do{var curDate = new Date();}
|
| 543 |
+
while( curDate - date < ms);
|
| 544 |
+
}
|
| 545 |
+
// ---------------------------------------------------
|
| 546 |
+
function initLightbox() { myLightbox = new Lightbox(); }
|
| 547 |
+
Event.observe(window, 'load', initLightbox, false);
|
lightbox.js
ADDED
|
@@ -0,0 +1,534 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
// -----------------------------------------------------------------------------------
|
| 2 |
+
// Configuration
|
| 3 |
+
var overlayOpacity = 0.8; // controls transparency of shadow overlay
|
| 4 |
+
var animate = true; // toggles resizing animations
|
| 5 |
+
var resizeSpeed = 9; // controls the speed of the image resizing animations (1=slowest and 10=fastest)
|
| 6 |
+
var borderSize = 10; //if you adjust the padding in the CSS, you will need to update this variable
|
| 7 |
+
// -----------------------------------------------------------------------------------
|
| 8 |
+
// Global Variables
|
| 9 |
+
var imageArray = new Array;
|
| 10 |
+
var activeImage;
|
| 11 |
+
if(animate == true){
|
| 12 |
+
overlayDuration = 0.2; // shadow fade in/out duration
|
| 13 |
+
if(resizeSpeed > 10){ resizeSpeed = 10;}
|
| 14 |
+
if(resizeSpeed < 1){ resizeSpeed = 1;}
|
| 15 |
+
resizeDuration = (11 - resizeSpeed) * 0.15;
|
| 16 |
+
} else {
|
| 17 |
+
overlayDuration = 0;
|
| 18 |
+
resizeDuration = 0;
|
| 19 |
+
}
|
| 20 |
+
// -----------------------------------------------------------------------------------
|
| 21 |
+
// Additional methods for Element
|
| 22 |
+
Object.extend(Element, {
|
| 23 |
+
getWidth: function(element) {
|
| 24 |
+
element = $(element);
|
| 25 |
+
return element.offsetWidth;
|
| 26 |
+
},
|
| 27 |
+
setWidth: function(element,w) {
|
| 28 |
+
element = $(element);
|
| 29 |
+
element.style.width = w +"px";
|
| 30 |
+
},
|
| 31 |
+
setHeight: function(element,h) {
|
| 32 |
+
element = $(element);
|
| 33 |
+
element.style.height = h +"px";
|
| 34 |
+
},
|
| 35 |
+
setTop: function(element,t) {
|
| 36 |
+
element = $(element);
|
| 37 |
+
element.style.top = t +"px";
|
| 38 |
+
},
|
| 39 |
+
setLeft: function(element,l) {
|
| 40 |
+
element = $(element);
|
| 41 |
+
element.style.left = l +"px";
|
| 42 |
+
},
|
| 43 |
+
setSrc: function(element,src) {
|
| 44 |
+
element = $(element);
|
| 45 |
+
element.src = src;
|
| 46 |
+
},
|
| 47 |
+
setHref: function(element,href) {
|
| 48 |
+
element = $(element);
|
| 49 |
+
element.href = href;
|
| 50 |
+
},
|
| 51 |
+
setInnerHTML: function(element,content) {
|
| 52 |
+
element = $(element);
|
| 53 |
+
element.innerHTML = content;
|
| 54 |
+
}
|
| 55 |
+
});
|
| 56 |
+
// -----------------------------------------------------------------------------------
|
| 57 |
+
// Extending built-in Array object
|
| 58 |
+
// - array.removeDuplicates()
|
| 59 |
+
// - array.empty()
|
| 60 |
+
Array.prototype.removeDuplicates = function () {
|
| 61 |
+
for(i = 0; i < this.length; i++){
|
| 62 |
+
for(j = this.length-1; j>i; j--){
|
| 63 |
+
if(this[i][0] == this[j][0]){
|
| 64 |
+
this.splice(j,1);
|
| 65 |
+
}
|
| 66 |
+
}
|
| 67 |
+
}
|
| 68 |
+
}
|
| 69 |
+
// -----------------------------------------------------------------------------------
|
| 70 |
+
Array.prototype.empty = function () {
|
| 71 |
+
for(i = 0; i <= this.length; i++){
|
| 72 |
+
this.shift();
|
| 73 |
+
}
|
| 74 |
+
}
|
| 75 |
+
// -----------------------------------------------------------------------------------
|
| 76 |
+
var Lightbox = Class.create();
|
| 77 |
+
Lightbox.prototype = {
|
| 78 |
+
// initialize()
|
| 79 |
+
// Constructor runs on completion of the DOM loading. Calls updateImageList and then
|
| 80 |
+
// the function inserts html at the bottom of the page which is used to display the shadow
|
| 81 |
+
// overlay and the image container.
|
| 82 |
+
initialize: function() {
|
| 83 |
+
|
| 84 |
+
this.updateImageList();
|
| 85 |
+
var objBody = document.getElementsByTagName("body").item(0);
|
| 86 |
+
var objOverlay = document.createElement("div");
|
| 87 |
+
objOverlay.setAttribute('id','stimuli_overlay');
|
| 88 |
+
objOverlay.style.display = 'none';
|
| 89 |
+
objOverlay.onclick = function() { myLightbox.end(); }
|
| 90 |
+
objBody.appendChild(objOverlay);
|
| 91 |
+
var objLightbox = document.createElement("div");
|
| 92 |
+
objLightbox.setAttribute('id','stimuli_lightbox');
|
| 93 |
+
objLightbox.style.display = 'none';
|
| 94 |
+
objLightbox.onclick = function(e) { // close Lightbox if user clicks shadow overlay
|
| 95 |
+
if (!e) var e = window.event;
|
| 96 |
+
var clickObj = Event.element(e).id;
|
| 97 |
+
if ( clickObj == 'stimuli_lightbox') {
|
| 98 |
+
myLightbox.end();
|
| 99 |
+
}
|
| 100 |
+
};
|
| 101 |
+
objBody.appendChild(objLightbox);
|
| 102 |
+
var objOuterImageContainer = document.createElement("div");
|
| 103 |
+
objOuterImageContainer.setAttribute('id','stimuli_outerImageContainer');
|
| 104 |
+
objLightbox.appendChild(objOuterImageContainer);
|
| 105 |
+
// When Lightbox starts it will resize itself from 250 by 250 to the current image dimension.
|
| 106 |
+
// If animations are turned off, it will be hidden as to prevent a flicker of a
|
| 107 |
+
// white 250 by 250 box.
|
| 108 |
+
if(animate){
|
| 109 |
+
Element.setWidth('stimuli_outerImageContainer', 250);
|
| 110 |
+
Element.setHeight('stimuli_outerImageContainer', 250);
|
| 111 |
+
} else {
|
| 112 |
+
Element.setWidth('stimuli_outerImageContainer', 1);
|
| 113 |
+
Element.setHeight('stimuli_outerImageContainer', 1);
|
| 114 |
+
}
|
| 115 |
+
var objImageContainer = document.createElement("div");
|
| 116 |
+
objImageContainer.setAttribute('id','stimuli_imageContainer');
|
| 117 |
+
objOuterImageContainer.appendChild(objImageContainer);
|
| 118 |
+
|
| 119 |
+
var objLightboxImage = document.createElement("img");
|
| 120 |
+
objLightboxImage.setAttribute('id','stimuli_lightboxImage');
|
| 121 |
+
objImageContainer.appendChild(objLightboxImage);
|
| 122 |
+
|
| 123 |
+
var objHoverNav = document.createElement("div");
|
| 124 |
+
objHoverNav.setAttribute('id','stimuli_hoverNav');
|
| 125 |
+
objImageContainer.appendChild(objHoverNav);
|
| 126 |
+
|
| 127 |
+
var objPrevLink = document.createElement("a");
|
| 128 |
+
objPrevLink.setAttribute('id','stimuli_prevLink');
|
| 129 |
+
objPrevLink.setAttribute('href','#');
|
| 130 |
+
objHoverNav.appendChild(objPrevLink);
|
| 131 |
+
|
| 132 |
+
var objNextLink = document.createElement("a");
|
| 133 |
+
objNextLink.setAttribute('id','stimuli_nextLink');
|
| 134 |
+
objNextLink.setAttribute('href','#');
|
| 135 |
+
objHoverNav.appendChild(objNextLink);
|
| 136 |
+
|
| 137 |
+
var objLoading = document.createElement("div");
|
| 138 |
+
objLoading.setAttribute('id','stimuli_loading');
|
| 139 |
+
objImageContainer.appendChild(objLoading);
|
| 140 |
+
|
| 141 |
+
var objLoadingLink = document.createElement("a");
|
| 142 |
+
objLoadingLink.setAttribute('id','stimuli_loadingLink');
|
| 143 |
+
objLoadingLink.setAttribute('href','#');
|
| 144 |
+
objLoadingLink.onclick = function() { myLightbox.end(); return false; }
|
| 145 |
+
objLoading.appendChild(objLoadingLink);
|
| 146 |
+
|
| 147 |
+
var objImageDataContainer = document.createElement("div");
|
| 148 |
+
objImageDataContainer.setAttribute('id','stimuli_imageDataContainer');
|
| 149 |
+
objLightbox.appendChild(objImageDataContainer);
|
| 150 |
+
var objImageData = document.createElement("div");
|
| 151 |
+
objImageData.setAttribute('id','stimuli_imageData');
|
| 152 |
+
objImageDataContainer.appendChild(objImageData);
|
| 153 |
+
|
| 154 |
+
var objImageDetails = document.createElement("div");
|
| 155 |
+
objImageDetails.setAttribute('id','stimuli_imageDetails');
|
| 156 |
+
objImageData.appendChild(objImageDetails);
|
| 157 |
+
|
| 158 |
+
var objCaption = document.createElement("span");
|
| 159 |
+
objCaption.setAttribute('id','stimuli_caption');
|
| 160 |
+
objImageDetails.appendChild(objCaption);
|
| 161 |
+
|
| 162 |
+
var objNumberDisplay = document.createElement("span");
|
| 163 |
+
objNumberDisplay.setAttribute('id','stimuli_numberDisplay');
|
| 164 |
+
objImageDetails.appendChild(objNumberDisplay);
|
| 165 |
+
|
| 166 |
+
var objBottomNav = document.createElement("div");
|
| 167 |
+
objBottomNav.setAttribute('id','stimuli_bottomNav');
|
| 168 |
+
objImageData.appendChild(objBottomNav);
|
| 169 |
+
|
| 170 |
+
var objBottomNavCloseLink = document.createElement("a");
|
| 171 |
+
objBottomNavCloseLink.setAttribute('id','stimuli_bottomNavClose');
|
| 172 |
+
objBottomNavCloseLink.setAttribute('href','#');
|
| 173 |
+
objBottomNavCloseLink.onclick = function() { myLightbox.end(); return false; }
|
| 174 |
+
objBottomNav.appendChild(objBottomNavCloseLink);
|
| 175 |
+
},
|
| 176 |
+
// updateImageList()
|
| 177 |
+
// Loops through anchor tags looking for 'lightbox' references and applies onclick
|
| 178 |
+
// events to appropriate links. You can rerun after dynamically adding images w/ajax.
|
| 179 |
+
updateImageList: function() {
|
| 180 |
+
if (!document.getElementsByTagName){ return; }
|
| 181 |
+
var anchors = document.getElementsByTagName('a');
|
| 182 |
+
var areas = document.getElementsByTagName('area');
|
| 183 |
+
// loop through all anchor tags
|
| 184 |
+
for (var i=0; i<anchors.length; i++){
|
| 185 |
+
var anchor = anchors[i];
|
| 186 |
+
var relAttribute = String(anchor.getAttribute('rel'));
|
| 187 |
+
// use the string.match() method to catch 'lightbox' references in the rel attribute
|
| 188 |
+
if (anchor.getAttribute('href') && (relAttribute.toLowerCase().match('lightbox'))){
|
| 189 |
+
anchor.onclick = function () {myLightbox.start(this); return false;}
|
| 190 |
+
}
|
| 191 |
+
}
|
| 192 |
+
// loop through all area tags
|
| 193 |
+
// todo: combine anchor & area tag loops
|
| 194 |
+
for (var i=0; i< areas.length; i++){
|
| 195 |
+
var area = areas[i];
|
| 196 |
+
var relAttribute = String(area.getAttribute('rel'));
|
| 197 |
+
// use the string.match() method to catch 'lightbox' references in the rel attribute
|
| 198 |
+
if (area.getAttribute('href') && (relAttribute.toLowerCase().match('lightbox'))){
|
| 199 |
+
area.onclick = function () {myLightbox.start(this); return false;}
|
| 200 |
+
}
|
| 201 |
+
}
|
| 202 |
+
},
|
| 203 |
+
// start()
|
| 204 |
+
// Display overlay and lightbox. If image is part of a set, add siblings to imageArray.
|
| 205 |
+
start: function(imageLink) {
|
| 206 |
+
hideSelectBoxes();
|
| 207 |
+
hideFlash();
|
| 208 |
+
// stretch overlay to fill page and fade in
|
| 209 |
+
var arrayPageSize = getPageSize();
|
| 210 |
+
Element.setWidth('stimuli_overlay', arrayPageSize[0]);
|
| 211 |
+
Element.setHeight('stimuli_overlay', arrayPageSize[1]);
|
| 212 |
+
new Effect.Appear('stimuli_overlay', { duration: overlayDuration, from: 0.0, to: overlayOpacity });
|
| 213 |
+
imageArray = [];
|
| 214 |
+
imageNum = 0;
|
| 215 |
+
if (!document.getElementsByTagName){ return; }
|
| 216 |
+
var anchors = document.getElementsByTagName( imageLink.tagName);
|
| 217 |
+
var stimuli_image_title = "";
|
| 218 |
+
// if image is NOT part of a set... ie not lightbox[someset]
|
| 219 |
+
if((imageLink.getAttribute('rel') == 'lightbox')){
|
| 220 |
+
// check for title-less links, and grab image title if needed
|
| 221 |
+
stimuli_image_title = "";
|
| 222 |
+
var possibleLightboxImageTitles = [imageLink.getAttribute('title'), imageLink.childNodes[0]['title'], imageLink.childNodes[0]['alt'], " "];
|
| 223 |
+
var possible_Int = 0;
|
| 224 |
+
while (stimuli_image_title == ("")) {
|
| 225 |
+
stimuli_image_title = possibleLightboxImageTitles[possible_Int];
|
| 226 |
+
possible_Int++;
|
| 227 |
+
}
|
| 228 |
+
// add single image to imageArray
|
| 229 |
+
imageArray.push(new Array(imageLink.getAttribute('href'), stimuli_image_title));
|
| 230 |
+
} else {
|
| 231 |
+
// if image is part of a set... ie lightbox[someset]
|
| 232 |
+
// loop through anchors, find other images in set, and add them to imageArray
|
| 233 |
+
for (var i=0; i<anchors.length; i++){
|
| 234 |
+
var anchor = anchors[i];
|
| 235 |
+
if (anchor.getAttribute('href') && (anchor.getAttribute('rel') == imageLink.getAttribute('rel'))){
|
| 236 |
+
// check for title-less links, and grab image title if needed
|
| 237 |
+
stimuli_image_title = "";
|
| 238 |
+
var possibleLightboxImageTitles = [ anchor['title'], anchor.childNodes[0]['title'], anchor.childNodes[0]['alt'], " " ];
|
| 239 |
+
var possible_Int = 0;
|
| 240 |
+
while (stimuli_image_title == ("")) {
|
| 241 |
+
stimuli_image_title = possibleLightboxImageTitles[possible_Int];
|
| 242 |
+
possible_Int++;
|
| 243 |
+
}
|
| 244 |
+
imageArray.push(new Array(anchor.getAttribute('href'), stimuli_image_title));
|
| 245 |
+
}
|
| 246 |
+
}
|
| 247 |
+
imageArray.removeDuplicates();
|
| 248 |
+
while(imageArray[imageNum][0] != imageLink.getAttribute('href')) { imageNum++;}
|
| 249 |
+
}
|
| 250 |
+
// calculate top and left offset for the lightbox
|
| 251 |
+
var arrayPageScroll = getPageScroll();
|
| 252 |
+
var lightboxTop = arrayPageScroll[1] + (arrayPageSize[3] / 10);
|
| 253 |
+
var lightboxLeft = arrayPageScroll[0];
|
| 254 |
+
Element.setTop('stimuli_lightbox', lightboxTop);
|
| 255 |
+
Element.setLeft('stimuli_lightbox', lightboxLeft);
|
| 256 |
+
Element.show('stimuli_lightbox');
|
| 257 |
+
this.changeImage(imageNum);
|
| 258 |
+
},
|
| 259 |
+
// changeImage()
|
| 260 |
+
// Hide most elements and preload image in preparation for resizing image container.
|
| 261 |
+
changeImage: function(imageNum) {
|
| 262 |
+
activeImage = imageNum; // update global var
|
| 263 |
+
// hide elements during transition
|
| 264 |
+
if(animate){ Element.show('stimuli_loading');}
|
| 265 |
+
Element.hide('stimuli_lightboxImage');
|
| 266 |
+
Element.hide('stimuli_hoverNav');
|
| 267 |
+
Element.hide('stimuli_prevLink');
|
| 268 |
+
Element.hide('stimuli_nextLink');
|
| 269 |
+
Element.hide('stimuli_imageDataContainer');
|
| 270 |
+
Element.hide('stimuli_numberDisplay');
|
| 271 |
+
imgPreloader = new Image();
|
| 272 |
+
// once image is preloaded, resize image container
|
| 273 |
+
imgPreloader.onload=function(){
|
| 274 |
+
Element.setSrc('stimuli_lightboxImage', imageArray[activeImage][0]);
|
| 275 |
+
Element.setWidth('stimuli_lightboxImage', imgPreloader.width);
|
| 276 |
+
Element.setHeight('stimuli_lightboxImage', imgPreloader.height);
|
| 277 |
+
myLightbox.resizeImageContainer(imgPreloader.width, imgPreloader.height);
|
| 278 |
+
imgPreloader.onload=function(){}; // clear onLoad, IE behaves irratically with animated gifs otherwise
|
| 279 |
+
}
|
| 280 |
+
imgPreloader.src = imageArray[activeImage][0];
|
| 281 |
+
},
|
| 282 |
+
// resizeImageContainer()
|
| 283 |
+
resizeImageContainer: function( imgWidth, imgHeight) {
|
| 284 |
+
// get curren width and height
|
| 285 |
+
this.widthCurrent = Element.getWidth('stimuli_outerImageContainer');
|
| 286 |
+
this.heightCurrent = Element.getHeight('stimuli_outerImageContainer');
|
| 287 |
+
// get new width and height
|
| 288 |
+
var widthNew = (imgWidth + (borderSize * 2));
|
| 289 |
+
var heightNew = (imgHeight + (borderSize * 2));
|
| 290 |
+
// scalars based on change from old to new
|
| 291 |
+
this.xScale = ( widthNew / this.widthCurrent) * 100;
|
| 292 |
+
this.yScale = ( heightNew / this.heightCurrent) * 100;
|
| 293 |
+
// calculate size difference between new and old image, and resize if necessary
|
| 294 |
+
wDiff = this.widthCurrent - widthNew;
|
| 295 |
+
hDiff = this.heightCurrent - heightNew;
|
| 296 |
+
if(!( hDiff == 0)){ new Effect.Scale('stimuli_outerImageContainer', this.yScale, {scaleX: false, duration: resizeDuration, queue: 'front'}); }
|
| 297 |
+
if(!( wDiff == 0)){ new Effect.Scale('stimuli_outerImageContainer', this.xScale, {scaleY: false, delay: resizeDuration, duration: resizeDuration}); }
|
| 298 |
+
// if new and old image are same size and no scaling transition is necessary,
|
| 299 |
+
// do a quick stimuli_pause to prevent image flicker.
|
| 300 |
+
if((hDiff == 0) && (wDiff == 0)){
|
| 301 |
+
if (navigator.appVersion.indexOf("MSIE")!=-1){ stimuli_pause(250); } else { stimuli_pause(100);}
|
| 302 |
+
}
|
| 303 |
+
Element.setHeight('stimuli_prevLink', imgHeight);
|
| 304 |
+
Element.setHeight('stimuli_nextLink', imgHeight);
|
| 305 |
+
Element.setWidth( 'stimuli_imageDataContainer', widthNew);
|
| 306 |
+
this.showImage();
|
| 307 |
+
},
|
| 308 |
+
// showImage()
|
| 309 |
+
// Display image and begin preloading neighbors.
|
| 310 |
+
showImage: function(){
|
| 311 |
+
Element.hide('stimuli_loading');
|
| 312 |
+
new Effect.Appear('stimuli_lightboxImage', { duration: resizeDuration, queue: 'end', afterFinish: function(){ myLightbox.updateDetails(); } });
|
| 313 |
+
this.preloadNeighborImages();
|
| 314 |
+
},
|
| 315 |
+
// updateDetails()
|
| 316 |
+
// Display caption, image number, and bottom nav.
|
| 317 |
+
updateDetails: function() {
|
| 318 |
+
// if caption is not null
|
| 319 |
+
if(imageArray[activeImage][1]){
|
| 320 |
+
Element.show('stimuli_caption');
|
| 321 |
+
Element.setInnerHTML( 'stimuli_caption', imageArray[activeImage][1]);
|
| 322 |
+
}
|
| 323 |
+
// if image is part of set display 'Image x of x'
|
| 324 |
+
if(imageArray.length > 1){
|
| 325 |
+
Element.show('stimuli_numberDisplay');
|
| 326 |
+
Element.setInnerHTML( 'stimuli_numberDisplay', "Image " + eval(activeImage + 1) + " of " + imageArray.length);
|
| 327 |
+
}
|
| 328 |
+
new Effect.Parallel(
|
| 329 |
+
[ new Effect.SlideDown( 'stimuli_imageDataContainer', { sync: true, duration: resizeDuration, from: 0.0, to: 1.0 }),
|
| 330 |
+
new Effect.Appear('stimuli_imageDataContainer', { sync: true, duration: resizeDuration }) ],
|
| 331 |
+
{ duration: resizeDuration, afterFinish: function() {
|
| 332 |
+
// update overlay size and update nav
|
| 333 |
+
var arrayPageSize = getPageSize();
|
| 334 |
+
Element.setHeight('stimuli_overlay', arrayPageSize[1]);
|
| 335 |
+
myLightbox.updateNav();
|
| 336 |
+
}
|
| 337 |
+
}
|
| 338 |
+
);
|
| 339 |
+
},
|
| 340 |
+
// updateNav()
|
| 341 |
+
// Display appropriate previous and next hover navigation.
|
| 342 |
+
updateNav: function() {
|
| 343 |
+
Element.show('stimuli_hoverNav');
|
| 344 |
+
// if not first image in set, display prev image button
|
| 345 |
+
if(activeImage != 0){
|
| 346 |
+
Element.show('stimuli_prevLink');
|
| 347 |
+
document.getElementById('stimuli_prevLink').onclick = function() {
|
| 348 |
+
myLightbox.changeImage(activeImage - 1); return false;
|
| 349 |
+
}
|
| 350 |
+
}
|
| 351 |
+
// if not last image in set, display next image button
|
| 352 |
+
if(activeImage != (imageArray.length - 1)){
|
| 353 |
+
Element.show('stimuli_nextLink');
|
| 354 |
+
document.getElementById('stimuli_nextLink').onclick = function() {
|
| 355 |
+
myLightbox.changeImage(activeImage + 1); return false;
|
| 356 |
+
}
|
| 357 |
+
}
|
| 358 |
+
this.enableKeyboardNav();
|
| 359 |
+
},
|
| 360 |
+
// enableKeyboardNav()
|
| 361 |
+
enableKeyboardNav: function() {
|
| 362 |
+
document.onkeydown = this.keyboardAction;
|
| 363 |
+
},
|
| 364 |
+
// disableKeyboardNav()
|
| 365 |
+
disableKeyboardNav: function() {
|
| 366 |
+
document.onkeydown = '';
|
| 367 |
+
},
|
| 368 |
+
// keyboardAction()
|
| 369 |
+
keyboardAction: function(e) {
|
| 370 |
+
if (e == null) { // ie
|
| 371 |
+
keycode = event.keyCode;
|
| 372 |
+
escapeKey = 27;
|
| 373 |
+
} else { // mozilla
|
| 374 |
+
keycode = e.keyCode;
|
| 375 |
+
escapeKey = e.DOM_VK_ESCAPE;
|
| 376 |
+
}
|
| 377 |
+
key = String.fromCharCode(keycode).toLowerCase();
|
| 378 |
+
if((key == 'x') || (key == 'o') || (key == 'c') || (keycode == escapeKey)){ // close lightbox
|
| 379 |
+
myLightbox.end();
|
| 380 |
+
} else if((key == 'p') || (keycode == 37)){ // display previous image
|
| 381 |
+
if(activeImage != 0){
|
| 382 |
+
myLightbox.disableKeyboardNav();
|
| 383 |
+
myLightbox.changeImage(activeImage - 1);
|
| 384 |
+
}
|
| 385 |
+
} else if((key == 'n') || (keycode == 39)){ // display next image
|
| 386 |
+
if(activeImage != (imageArray.length - 1)){
|
| 387 |
+
myLightbox.disableKeyboardNav();
|
| 388 |
+
myLightbox.changeImage(activeImage + 1);
|
| 389 |
+
}
|
| 390 |
+
}
|
| 391 |
+
},
|
| 392 |
+
// preloadNeighborImages()
|
| 393 |
+
// Preload previous and next images.
|
| 394 |
+
preloadNeighborImages: function(){
|
| 395 |
+
if((imageArray.length - 1) > activeImage){
|
| 396 |
+
preloadNextImage = new Image();
|
| 397 |
+
preloadNextImage.src = imageArray[activeImage + 1][0];
|
| 398 |
+
}
|
| 399 |
+
if(activeImage > 0){
|
| 400 |
+
preloadPrevImage = new Image();
|
| 401 |
+
preloadPrevImage.src = imageArray[activeImage - 1][0];
|
| 402 |
+
}
|
| 403 |
+
},
|
| 404 |
+
// end()
|
| 405 |
+
end: function() {
|
| 406 |
+
this.disableKeyboardNav();
|
| 407 |
+
Element.hide('stimuli_lightbox');
|
| 408 |
+
new Effect.Fade('stimuli_overlay', { duration: overlayDuration});
|
| 409 |
+
showSelectBoxes();
|
| 410 |
+
showFlash();
|
| 411 |
+
}
|
| 412 |
+
}
|
| 413 |
+
// -----------------------------------------------------------------------------------
|
| 414 |
+
// getPageScroll()
|
| 415 |
+
function getPageScroll(){
|
| 416 |
+
var xScroll, yScroll;
|
| 417 |
+
if (self.pageYOffset) {
|
| 418 |
+
yScroll = self.pageYOffset;
|
| 419 |
+
xScroll = self.pageXOffset;
|
| 420 |
+
} else if (document.documentElement && document.documentElement.scrollTop){ // Explorer 6 Strict
|
| 421 |
+
yScroll = document.documentElement.scrollTop;
|
| 422 |
+
xScroll = document.documentElement.scrollLeft;
|
| 423 |
+
} else if (document.body) {// all other Explorers
|
| 424 |
+
yScroll = document.body.scrollTop;
|
| 425 |
+
xScroll = document.body.scrollLeft;
|
| 426 |
+
}
|
| 427 |
+
arrayPageScroll = new Array(xScroll,yScroll)
|
| 428 |
+
return arrayPageScroll;
|
| 429 |
+
}
|
| 430 |
+
// -----------------------------------------------------------------------------------
|
| 431 |
+
// getPageSize()
|
| 432 |
+
function getPageSize(){
|
| 433 |
+
var xScroll, yScroll;
|
| 434 |
+
if (window.innerHeight && window.scrollMaxY) {
|
| 435 |
+
xScroll = window.innerWidth + window.scrollMaxX;
|
| 436 |
+
yScroll = window.innerHeight + window.scrollMaxY;
|
| 437 |
+
} else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
|
| 438 |
+
xScroll = document.body.scrollWidth;
|
| 439 |
+
yScroll = document.body.scrollHeight;
|
| 440 |
+
} else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
|
| 441 |
+
xScroll = document.body.offsetWidth;
|
| 442 |
+
yScroll = document.body.offsetHeight;
|
| 443 |
+
}
|
| 444 |
+
var windowWidth, windowHeight;
|
| 445 |
+
if (self.innerHeight) { // all except Explorer
|
| 446 |
+
if(document.documentElement.clientWidth){
|
| 447 |
+
windowWidth = document.documentElement.clientWidth;
|
| 448 |
+
} else {
|
| 449 |
+
windowWidth = self.innerWidth;
|
| 450 |
+
}
|
| 451 |
+
windowHeight = self.innerHeight;
|
| 452 |
+
} else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
|
| 453 |
+
windowWidth = document.documentElement.clientWidth;
|
| 454 |
+
windowHeight = document.documentElement.clientHeight;
|
| 455 |
+
} else if (document.body) { // other Explorers
|
| 456 |
+
windowWidth = document.body.clientWidth;
|
| 457 |
+
windowHeight = document.body.clientHeight;
|
| 458 |
+
}
|
| 459 |
+
// for small pages with total height less then height of the viewport
|
| 460 |
+
if(yScroll < windowHeight){
|
| 461 |
+
pageHeight = windowHeight;
|
| 462 |
+
} else {
|
| 463 |
+
pageHeight = yScroll;
|
| 464 |
+
}
|
| 465 |
+
// for small pages with total width less then width of the viewport
|
| 466 |
+
if(xScroll < windowWidth){
|
| 467 |
+
pageWidth = xScroll;
|
| 468 |
+
} else {
|
| 469 |
+
pageWidth = windowWidth;
|
| 470 |
+
}
|
| 471 |
+
arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight)
|
| 472 |
+
return arrayPageSize;
|
| 473 |
+
}
|
| 474 |
+
// -----------------------------------------------------------------------------------
|
| 475 |
+
// getKey(key)
|
| 476 |
+
function getKey(e){
|
| 477 |
+
if (e == null) { // ie
|
| 478 |
+
keycode = event.keyCode;
|
| 479 |
+
} else { // mozilla
|
| 480 |
+
keycode = e.which;
|
| 481 |
+
}
|
| 482 |
+
key = String.fromCharCode(keycode).toLowerCase();
|
| 483 |
+
if(key == 'x'){
|
| 484 |
+
}
|
| 485 |
+
}
|
| 486 |
+
// -----------------------------------------------------------------------------------
|
| 487 |
+
// listenKey()
|
| 488 |
+
function listenKey () { document.onkeypress = getKey; }
|
| 489 |
+
// ---------------------------------------------------
|
| 490 |
+
function showSelectBoxes(){
|
| 491 |
+
var selects = document.getElementsByTagName("select");
|
| 492 |
+
for (i = 0; i != selects.length; i++) {
|
| 493 |
+
selects[i].style.visibility = "visible";
|
| 494 |
+
}
|
| 495 |
+
}
|
| 496 |
+
// ---------------------------------------------------
|
| 497 |
+
function hideSelectBoxes(){
|
| 498 |
+
var selects = document.getElementsByTagName("select");
|
| 499 |
+
for (i = 0; i != selects.length; i++) {
|
| 500 |
+
selects[i].style.visibility = "hidden";
|
| 501 |
+
}
|
| 502 |
+
}
|
| 503 |
+
// ---------------------------------------------------
|
| 504 |
+
function showFlash(){
|
| 505 |
+
var flashObjects = document.getElementsByTagName("object");
|
| 506 |
+
for (i = 0; i < flashObjects.length; i++) {
|
| 507 |
+
flashObjects[i].style.visibility = "visible";
|
| 508 |
+
}
|
| 509 |
+
var flashEmbeds = document.getElementsByTagName("embed");
|
| 510 |
+
for (i = 0; i < flashEmbeds.length; i++) {
|
| 511 |
+
flashEmbeds[i].style.visibility = "visible";
|
| 512 |
+
}
|
| 513 |
+
}
|
| 514 |
+
// ---------------------------------------------------
|
| 515 |
+
function hideFlash(){
|
| 516 |
+
var flashObjects = document.getElementsByTagName("object");
|
| 517 |
+
for (i = 0; i < flashObjects.length; i++) {
|
| 518 |
+
flashObjects[i].style.visibility = "hidden";
|
| 519 |
+
}
|
| 520 |
+
var flashEmbeds = document.getElementsByTagName("embed");
|
| 521 |
+
for (i = 0; i < flashEmbeds.length; i++) {
|
| 522 |
+
flashEmbeds[i].style.visibility = "hidden";
|
| 523 |
+
}
|
| 524 |
+
}
|
| 525 |
+
// ---------------------------------------------------
|
| 526 |
+
function stimuli_pause(ms){
|
| 527 |
+
var date = new Date();
|
| 528 |
+
curDate = null;
|
| 529 |
+
do{var curDate = new Date();}
|
| 530 |
+
while( curDate - date < ms);
|
| 531 |
+
}
|
| 532 |
+
// ---------------------------------------------------
|
| 533 |
+
function initLightbox() { myLightbox = new Lightbox(); }
|
| 534 |
+
Event.observe(window, 'load', initLightbox, false);
|
lightbox2.php
ADDED
|
@@ -0,0 +1,103 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<?php
|
| 2 |
+
/*
|
| 3 |
+
* Plugin Name: WP Lightbox 2
|
| 4 |
+
* Plugin URI: http://onlinewebapplication.com/2011/11/wp-lightbox-2.html
|
| 5 |
+
* Description: This plugin used to add the lightbox (overlay) effect to the current page images on your WordPress blog.
|
| 6 |
+
* Version: 2.0
|
| 7 |
+
* Author: Pankaj Jha
|
| 8 |
+
* Author URI: http://onlinewebapplication.com/
|
| 9 |
+
* License: GNU General Public License, v2 (or newer)
|
| 10 |
+
* License URI: http://www.gnu.org/licenses/old-licenses/gpl-2.0.html
|
| 11 |
+
*
|
| 12 |
+
* This program is free software; you can redistribute it and/or modify
|
| 13 |
+
* it under the terms of the GNU General Public License as published by
|
| 14 |
+
* the Free Software Foundation; either version 2 of the License, or
|
| 15 |
+
* (at your option) any later version.
|
| 16 |
+
*
|
| 17 |
+
* This program is distributed in the hope that it will be useful,
|
| 18 |
+
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
| 19 |
+
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
| 20 |
+
* GNU General Public License for more details.
|
| 21 |
+
*
|
| 22 |
+
* This program was modified from Ajax Contact Form plugin, version 1.0.0,
|
| 23 |
+
* Copyright (C) 2011 Richard Gigs, released under the GNU General Public License.
|
| 24 |
+
*/
|
| 25 |
+
|
| 26 |
+
/* Where our theme reside: */
|
| 27 |
+
$lightbox_2_theme_path = (dirname(__FILE__)."/Themes");
|
| 28 |
+
update_option('lightbox_2_theme_path', $lightbox_2_theme_path);
|
| 29 |
+
/* Set the default theme to Black */
|
| 30 |
+
add_option('lightbox_2_theme', 'Black');
|
| 31 |
+
add_option('lightbox_2_automate', 1);
|
| 32 |
+
add_option('lightbox_2_resize_on_demand', 0);
|
| 33 |
+
|
| 34 |
+
/* use WP_PLUGIN_URL if version of WP >= 2.6.0. If earlier, use wp_url */
|
| 35 |
+
if($wp_version >= '2.6.0') {
|
| 36 |
+
$stimuli_lightbox_plugin_prefix = WP_PLUGIN_URL."/wp-lightbox-2/"; /* plugins dir can be anywhere after WP2.6 */
|
| 37 |
+
} else {
|
| 38 |
+
$stimuli_lightbox_plugin_prefix = get_bloginfo('wpurl')."/wp-content/plugins/wp-lightbox-2/";
|
| 39 |
+
}
|
| 40 |
+
|
| 41 |
+
/* options page (required for saving prefs)*/
|
| 42 |
+
$options_page = get_option('siteurl') . '/wp-admin/admin.php?page=wp-lightbox-2/options.php';
|
| 43 |
+
/* Adds our admin options under "Options" */
|
| 44 |
+
function lightbox_2_options_page() {
|
| 45 |
+
add_options_page('Lightbox Options', 'Lightbox 2', 10, 'wp-lightbox-2/options.php');
|
| 46 |
+
}
|
| 47 |
+
|
| 48 |
+
function lightbox_styles() {
|
| 49 |
+
/* What version of WP is running? */
|
| 50 |
+
global $wp_version;
|
| 51 |
+
global $stimuli_lightbox_plugin_prefix;
|
| 52 |
+
/* The next line figures out where the javascripts and images and CSS are installed,
|
| 53 |
+
relative to your wordpress server's root: */
|
| 54 |
+
$lightbox_2_theme = urldecode(get_option('lightbox_2_theme'));
|
| 55 |
+
$lightbox_style = ($stimuli_lightbox_plugin_prefix."Themes/".$lightbox_2_theme."/");
|
| 56 |
+
|
| 57 |
+
/* The xhtml header code needed for lightbox to work: */
|
| 58 |
+
$lightboxscript = "
|
| 59 |
+
<!-- begin lightbox scripts -->
|
| 60 |
+
<script type=\"text/javascript\">
|
| 61 |
+
//<![CDATA[
|
| 62 |
+
document.write('<link rel=\"stylesheet\" href=\"".$lightbox_style."lightbox.css\" type=\"text/css\" media=\"screen\" />');
|
| 63 |
+
//]]>
|
| 64 |
+
</script>
|
| 65 |
+
<!-- end lightbox scripts -->\n";
|
| 66 |
+
/* Output $lightboxscript as text for our web pages: */
|
| 67 |
+
echo($lightboxscript);
|
| 68 |
+
}
|
| 69 |
+
|
| 70 |
+
/* Added a code to automatically insert rel="lightbox[nameofpost]" to every image with no manual work.
|
| 71 |
+
If there are already rel="lightbox[something]" attributes, they are not clobbered.
|
| 72 |
+
Michael Tyson, you are a regular expressions god! ;)
|
| 73 |
+
http://atastypixel.com
|
| 74 |
+
*/
|
| 75 |
+
function autoexpand_rel_wlightbox ($content) {
|
| 76 |
+
global $post;
|
| 77 |
+
$pattern = "/(<a(?![^>]*?rel=['\"]lightbox.*)[^>]*?href=['\"][^'\"]+?\.(?:bmp|gif|jpg|jpeg|png)['\"][^\>]*)>/i";
|
| 78 |
+
$replacement = '$1 rel="lightbox['.$post->ID.']">';
|
| 79 |
+
$content = preg_replace($pattern, $replacement, $content);
|
| 80 |
+
return $content;
|
| 81 |
+
}
|
| 82 |
+
|
| 83 |
+
if (get_option('lightbox_2_automate') == 1){
|
| 84 |
+
add_filter('the_content', 'autoexpand_rel_wlightbox', 99);
|
| 85 |
+
add_filter('the_excerpt', 'autoexpand_rel_wlightbox', 99);
|
| 86 |
+
}
|
| 87 |
+
|
| 88 |
+
/* To resize images, or not to resize; that is the question */
|
| 89 |
+
$resize_images_or_not = get_option('lightbox_2_resize_on_demand');
|
| 90 |
+
if ($resize_images_or_not == 1) {
|
| 91 |
+
$stimuli_lightbox_js = "lightbox-resize.js";
|
| 92 |
+
} else {
|
| 93 |
+
$stimuli_lightbox_js = "lightbox.js";
|
| 94 |
+
}
|
| 95 |
+
|
| 96 |
+
if (!is_admin()) { // if we are *not* viewing an admin page, like writing a post or making a page:
|
| 97 |
+
wp_enqueue_script('lightbox', ($stimuli_lightbox_plugin_prefix.$stimuli_lightbox_js), array('scriptaculous-effects'), '1.8');
|
| 98 |
+
}
|
| 99 |
+
|
| 100 |
+
/* we want to add the above xhtml to the header of our pages: */
|
| 101 |
+
add_action('wp_head', 'lightbox_styles');
|
| 102 |
+
add_action('admin_menu', 'lightbox_2_options_page');
|
| 103 |
+
?>
|
options.php
ADDED
|
@@ -0,0 +1,90 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<?php
|
| 2 |
+
$location = $options_page; // Form Action URI
|
| 3 |
+
|
| 4 |
+
/* Check for admin Options submission and update options*/
|
| 5 |
+
if ('process' == $_POST['stage']) {
|
| 6 |
+
update_option('lightbox_2_theme', $_POST['lightbox_2_theme']);
|
| 7 |
+
update_option('lightbox_2_automate', $_POST['lightbox_2_automate']);
|
| 8 |
+
update_option('lightbox_2_resize_on_demand', $_POST['lightbox_2_resize_on_demand']);
|
| 9 |
+
}
|
| 10 |
+
/*Get options for form fields*/
|
| 11 |
+
$lightbox_2_theme = stripslashes(get_option('lightbox_2_theme'));
|
| 12 |
+
|
| 13 |
+
//print_r($_POST);
|
| 14 |
+
?>
|
| 15 |
+
|
| 16 |
+
<div class="wrap">
|
| 17 |
+
<h2><?php _e('WP Lightbox 2 Options', 'lightbox_2') ?></h2>
|
| 18 |
+
<form name="form1" method="post" action="<?php echo $location ?>&updated=true">
|
| 19 |
+
<input type="hidden" name="stage" value="process" />
|
| 20 |
+
<table width="100%" cellspacing="2" cellpadding="5" class="form-table">
|
| 21 |
+
<tr valign="baseline">
|
| 22 |
+
<th scope="row"><?php _e('Lightbox Appearance', 'lightbox_2') ?></th>
|
| 23 |
+
<td>
|
| 24 |
+
|
| 25 |
+
<?php
|
| 26 |
+
/* Check if there are themes: */
|
| 27 |
+
$lightbox_2_theme_path = get_option('lightbox_2_theme_path');
|
| 28 |
+
//print_r($lightbox_2_theme_path);
|
| 29 |
+
if ($handle = opendir($lightbox_2_theme_path)) {
|
| 30 |
+
while (false !== ($file = readdir($handle))) {
|
| 31 |
+
if ($file != "." && $file != ".." && $file != ".DS_Store") {
|
| 32 |
+
$theme_dirs[$file] = $lightbox_2_theme_path."/".$file."/";
|
| 33 |
+
}
|
| 34 |
+
}
|
| 35 |
+
closedir($handle);
|
| 36 |
+
}
|
| 37 |
+
//print_r($theme_dirs);
|
| 38 |
+
|
| 39 |
+
/* Create a drop-down menu of the valid themes: */
|
| 40 |
+
echo("\n<select name=\"lightbox_2_theme\">\n");
|
| 41 |
+
$current_theme = get_option('lightbox_2_theme');
|
| 42 |
+
foreach($theme_dirs as $shortname => $fullpath) {
|
| 43 |
+
if((file_exists($fullpath."/lightbox.css")) && (file_exists($fullpath."/lightbox.css"))) {
|
| 44 |
+
if($current_theme == urlencode($shortname)) {
|
| 45 |
+
echo("<option value=\"".urlencode($shortname)."\" selected=\"selected\">".$shortname."</option>\n");
|
| 46 |
+
} else {
|
| 47 |
+
echo("<option value=\"".urlencode($shortname)."\">".$shortname."</option>\n");
|
| 48 |
+
|
| 49 |
+
}
|
| 50 |
+
}
|
| 51 |
+
}
|
| 52 |
+
echo("\n</select>");
|
| 53 |
+
?>
|
| 54 |
+
<p><small><?php _e('If in doubt, try the Black theme', 'lightbox_2') ?></small></p>
|
| 55 |
+
</td>
|
| 56 |
+
</tr>
|
| 57 |
+
<tr valign="baseline">
|
| 58 |
+
<th scope="row"><?php _e('Auto-lightbox image links', 'lightbox_2') ?></th>
|
| 59 |
+
<td>
|
| 60 |
+
<?php
|
| 61 |
+
$lightbox_2_automate = get_option('lightbox_2_automate');
|
| 62 |
+
if($lightbox_2_automate == 1) {
|
| 63 |
+
echo("\n<input type=\"checkbox\" name=\"lightbox_2_automate\" value=\"1\" checked=\"checked\" />\n");
|
| 64 |
+
} else {
|
| 65 |
+
echo("\n<input type=\"checkbox\" name=\"lightbox_2_automate\" value=\"1\" />\n");
|
| 66 |
+
}
|
| 67 |
+
?>
|
| 68 |
+
<p><small><?php _e('Let the plugin add necessary html to image links', 'lightbox_2') ?></small></p>
|
| 69 |
+
</td>
|
| 70 |
+
<tr valign="baseline">
|
| 71 |
+
<th scope="row"><?php _e('Shrink large images to fit smaller screens', 'lightbox_2') ?></th>
|
| 72 |
+
<td>
|
| 73 |
+
<?php
|
| 74 |
+
$lightbox_2_resize_on_demand = get_option('lightbox_2_resize_on_demand');
|
| 75 |
+
if($lightbox_2_resize_on_demand == 1) {
|
| 76 |
+
echo("\n<input type=\"checkbox\" name=\"lightbox_2_resize_on_demand\" value=\"1\" checked=\"checked\" />\n");
|
| 77 |
+
} else {
|
| 78 |
+
echo("\n<input type=\"checkbox\" name=\"lightbox_2_resize_on_demand\" value=\"1\" />\n");
|
| 79 |
+
}
|
| 80 |
+
?>
|
| 81 |
+
<p><small><?php _e('Note: <u>Excessively large images</u> waste bandwidth and slow browsing!', 'lightbox_2') ?></small></p>
|
| 82 |
+
</td>
|
| 83 |
+
</tr>
|
| 84 |
+
</table>
|
| 85 |
+
|
| 86 |
+
<p class="submit">
|
| 87 |
+
<input type="submit" name="Submit" value="<?php _e('Save Changes', 'lightbox_2') ?>" />
|
| 88 |
+
</p>
|
| 89 |
+
</form>
|
| 90 |
+
</div>
|
readme.txt
ADDED
|
@@ -0,0 +1,39 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
=== WP Lightbox 2 ===
|
| 2 |
+
Contributors: Pankaj Jha
|
| 3 |
+
Plugin Site: http://onlinewebapplication.com/
|
| 4 |
+
Tags: lightbox, WP Lightbox, AJAX, image, photo, picture, JQuery WP Image Plugin
|
| 5 |
+
Requires at least: 1.5
|
| 6 |
+
Tested up to: 3.2.1
|
| 7 |
+
Stable tag: 3.0.0
|
| 8 |
+
|
| 9 |
+
This plugin used to add the lightbox (overlay) effect to the current page images on your WordPress blog.
|
| 10 |
+
== Description ==
|
| 11 |
+
<br />
|
| 12 |
+
[Author Site](http://onlinewebapplication.com)|
|
| 13 |
+
[Plugin Home Page](http://onlinewebapplication.com/2011/11/wp-lightbox-2.html)
|
| 14 |
+
<br />
|
| 15 |
+
<br />
|
| 16 |
+
This plugin used to add the lightbox (overlay) effect to the current page images on your WordPress blog.
|
| 17 |
+
Used to overlay images on the current page. Extension of Lightbox 2 which features 'auto-lightboxing' of image links, courtesy of Michael Tyson ( http://atastypixel.com ).
|
| 18 |
+
|
| 19 |
+
Just install and sit back. This plugin enable image overlay lighbox effect for all the post images in your wordpress plugin. No configuration required.
|
| 20 |
+
|
| 21 |
+
== Installation ==
|
| 22 |
+
|
| 23 |
+
To do a new installation of the plugin, please follow these steps
|
| 24 |
+
|
| 25 |
+
1. Download the zipped plugin file to your local machine.
|
| 26 |
+
2. Unzip the file.
|
| 27 |
+
3. Upload the `WP-lightbox-2` folder to the `/wp-content/plugins/` directory.
|
| 28 |
+
4. Activate the plugin through the 'Plugins' menu in WordPress.
|
| 29 |
+
5. Optionally, go to the Options page and select a new Lightbox colour scheme.
|
| 30 |
+
|
| 31 |
+
|
| 32 |
+
== Frequently Asked Questions ==
|
| 33 |
+
|
| 34 |
+
You can Check Screen Shots on my website :<br />
|
| 35 |
+
[WP Lightbox 2](http://onlinewebapplication.com/2011/11/wp-lightbox-2.html)<br />
|
| 36 |
+
|
| 37 |
+
== Screenshots ==
|
| 38 |
+
You can Check Screen Shots on my website :<br />
|
| 39 |
+
[WP Lightbox 2](http://onlinewebapplication.com/2011/11/wp-lightbox-2.html)<br />
|
