IG_LightBox - Version 1.0.12

Version Notes

Enjoy it ;)

Release Info

Developer	Magento Core Team
Extension	IG_LightBox
Version	1.0.12
Comparing to
See all releases

Code changes from version 1.0.9 to 1.0.12

Files changed (16) hide show

app/code/community/IG/LightBox/CHANGELOG.txt +11 -0
app/code/community/IG/LightBox/etc/config.xml +1 -1
app/design/frontend/base/default/layout/ig_lightbox.xml +28 -0
app/design/frontend/base/default/template/ig_lightbox/media.phtml +91 -0
app/design/frontend/default/default/template/ig_lightbox/media.phtml +12 -10
package.xml +4 -4
skin/frontend/base/default/css/ig_lightbox.css +70 -0
skin/frontend/base/default/images/ig_lightbox/close.png +0 -0
skin/frontend/base/default/images/ig_lightbox/loader.gif +0 -0
skin/frontend/base/default/images/ig_lightbox/next.png +0 -0
skin/frontend/base/default/images/ig_lightbox/prev.png +0 -0
skin/frontend/base/default/js/ig_effects.js +1123 -0
skin/frontend/base/default/js/ig_lightbox.js +417 -0
skin/frontend/default/default/css/ig_lightbox.css +16 -3
skin/frontend/default/default/images/ig_lightbox/loader.gif +0 -0
skin/frontend/default/default/js/ig_lightbox.js +85 -16

app/code/community/IG/LightBox/CHANGELOG.txt ADDED Viewed

	@@ -0,0 +1,11 @@


1	+ 1.0.12:
2	+ - Fixed control buttons on small images
3	+
4	+ 1.0.11:
5	+ - Fixed missing loader <div>
6	+
7	+ 1.0.10:
8	+ - Fixed image resize problem when the product has only a single image
9	+ - Fixed resizing problem on Chrome
10	+ - Added automatic preloading function
11	+ - Added loader gif

app/code/community/IG/LightBox/etc/config.xml CHANGED Viewed

	@@ -1,7 +1,7 @@
1	<config>
2	<modules>
3	<IG_LightBox>
4	- <version>1.0.8</version>
5	</IG_LightBox>
6	</modules>
7


1	<config>
2	<modules>
3	<IG_LightBox>
4	+ <version>1.0.12</version>
5	</IG_LightBox>
6	</modules>
7

app/design/frontend/base/default/layout/ig_lightbox.xml ADDED Viewed

	@@ -0,0 +1,28 @@


1	+ <?xml version="1.0" encoding="UTF-8"?>
2	+
3	+ <layout version="0.1.0">
4	+
5	+ <catalog_product_view>
6	+ <reference name="head">
7	+ <action method="addItem" ifconfig="ig_lightbox/general/enabled"><type>skin_css</type><name>css/ig_lightbox.css</name></action>
8	+ <action method="addItem" ifconfig="ig_lightbox/general/enabled"><type>skin_js</type><name>js/ig_effects.js</name></action>
9	+ <action method="addItem" ifconfig="ig_lightbox/general/enabled"><type>skin_js</type><name>js/ig_lightbox.js</name></action>
10	+ </reference>
11	+ <reference name="product.info.media">
12	+ <action method="setTemplate" ifconfig="ig_lightbox/general/enabled"><template>ig_lightbox/media.phtml</template></action>
13	+ </reference>
14	+ </catalog_product_view>
15	+
16	+ <review_product_list>
17	+ <reference name="head">
18	+ <action method="addItem" ifconfig="ig_lightbox/general/enabled"><type>skin_css</type><name>css/ig_lightbox.css</name></action>
19	+ <action method="addItem" ifconfig="ig_lightbox/general/enabled"><type>skin_js</type><name>js/ig_effects.js</name></action>
20	+ <action method="addItem" ifconfig="ig_lightbox/general/enabled"><type>skin_js</type><name>js/ig_lightbox.js</name></action>
21	+ </reference>
22	+ <reference name="product.info.media">
23	+ <action method="setTemplate" ifconfig="ig_lightbox/general/enabled"><template>ig_lightbox/media.phtml</template></action>
24	+ <action method="disableGallery"/>
25	+ </reference>
26	+ </review_product_list>
27	+
28	+ </layout>

app/design/frontend/base/default/template/ig_lightbox/media.phtml ADDED Viewed

	@@ -0,0 +1,91 @@


1	+ <?php echo $this->getIgLightBoxJsConfig() ?>
2	+
3	+ <div id="ig-lightbox-back"></div>
4	+ <div id="ig-lightbox-image"></div>
5	+ <div id="ig-lightbox-loading"></div>
6	+ <img id="ig-lightbox-image-src" />
7	+ <table id="ig-lightbox-image-commands" style="dispaly:none">
8	+ <tbody>
9	+ <tr>
10	+ <td style="text-align: center" width="64"><a href="#" onclick="ig_lightbox_prev()"><img id="ig-lightbox-prev" src="<?php echo $this->getSkinUrl('images/ig_lightbox/prev.png') ?>" alt="prev" /></a></td>
11	+ <td id="ig-lightbox-image-commands-label-td"><div id="image-label"></div></td>
12	+ <td style="text-align: center" width="64"><a href="#" onclick="ig_lightbox_next()"><img id="ig-lightbox-next" src="<?php echo $this->getSkinUrl('images/ig_lightbox/next.png') ?>" alt="next" /></a></td>
13	+ </tr>
14	+ </tbody>
15	+ </table>
16	+ <div id="ig-lightbox-image-close" style="dispaly:none"><a href="#" onclick="ig_lightbox_hide()"><img id="ig-lightbox-image-close-img" src="<?php echo $this->getSkinUrl('images/ig_lightbox/close.png') ?>" alt="close" /></a></div>
17	+
18	+ <?php
19	+ $_ig_lightbox_images_count = 0;
20	+
21	+ $_product = $this->getProduct();
22	+ $_helper = $this->helper('catalog/output');
23	+ ?>
24	+
25	+ <a href="#" onclick="ig_lightbox_show(-1)">
26	+ <?php
27	+ list($width, $height)=$this->getIgLightBoxMainImageSize();
28	+ $_img = '<img id="image" src="'.$this->helper('catalog/image')->init($_product, 'image')->keepFrame(false)->resize($width, $height).'" alt="'.$this->htmlEscape($this->getImageLabel()).'" title="'.$this->htmlEscape($this->getImageLabel()).'" />';
29	+ echo $_helper->productAttribute($_product, $_img, 'image')
30	+ ?>
31	+ </a>
32	+
33	+ <?php
34	+ $js_load=array();
35	+ if (count($this->getGalleryImages()) > 1)
36	+ {
37	+ ?>
38	+ <div class="more-views">
39	+ <h4><?php echo $this->__('More Views') ?></h4>
40	+ <ul>
41	+ <?php
42	+ $c=0;
43	+ foreach ($this->getGalleryImages() as $_image)
44	+ {
45	+ list($width, $height)=$this->getIgLightBoxBigImageSize();
46	+ $src=$this->helper('catalog/image')->init($this->getProduct(), 'image', $_image->getFile())->keepFrame(false)->constrainOnly(true)->resize($width, $height);
47	+
48	+ if ($_image->getFile() == $_product->getImage())
49	+ {
50	+ array_push($js_load, "ig_lightbox_main_img=$c;");
51	+ }
52	+
53	+ $lbl=$this->__("Photo %d of %d", $c+1, sizeof($this->getGalleryImages()));
54	+
55	+ if ($_image->getLabel())
56	+ $lbl.=' - '.$this->htmlEscape($_image->getLabel());
57	+
58	+ array_push($js_load, "ig_lightbox_img_sequence.push('$src');");
59	+ array_push($js_load, "ig_lightbox_img_labels.push(".json_encode($lbl).");");
60	+
61	+ list($width, $height)=$this->getIgLightBoxThumbnailImageSize();
62	+ ?>
63	+ <li>
64	+ <a href="#" onclick="ig_lightbox_show('<?php echo $_ig_lightbox_images_count; ?>')">
65	+ <img src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'image', $_image->getFile())->keepFrame(true)->resize($width, $height); ?>" alt="<?php echo $this->htmlEscape($_image->getLabel()) ?>" title="<?php echo $this->htmlEscape($_image->getLabel()) ?>" />
66	+ </a>
67	+ </li>
68	+ <?php
69	+ $_ig_lightbox_images_count++;
70	+ $c++;
71	+ }
72	+ ?>
73	+ </ul>
74	+ </div>
75	+ <?php
76	+ }
77	+ else
78	+ {
79	+ list($width, $height)=$this->getIgLightBoxBigImageSize();
80	+ $src = $this->helper('catalog/image')->init($_product, 'image')->keepFrame(false)->resize($width, $height);
81	+
82	+ array_push($js_load, "ig_lightbox_img_sequence.push('$src');");
83	+ array_push($js_load, "ig_lightbox_img_labels.push(".json_encode($_product->getName()).");");
84	+ }
85	+ ?>
86	+
87	+ <script type="text/javascript">
88	+ Event.observe(window, 'load', function() {
89	+ <?php foreach ($js_load as $line) echo "$line\n" ?>
90	+ });
91	+ </script>

app/design/frontend/default/default/template/ig_lightbox/media.phtml CHANGED Viewed

	@@ -2,8 +2,9 @@
2
3	<div id="ig-lightbox-back"></div>
4	<div id="ig-lightbox-image"></div>
5	- <~~img~~ id="ig-lightbox-~~image-src~~" ~~/></img~~>
6	- <~~table~~ id="ig-lightbox-image-~~commands~~">

7	<tbody>
8	<tr>
9	<td style="text-align: center" width="64"><a href="#" onclick="ig_lightbox_prev()"><img id="ig-lightbox-prev" src="<?php echo $this->getSkinUrl('images/ig_lightbox/prev.png') ?>" alt="prev" /></a></td>
	@@ -12,7 +13,7 @@
12	</tr>
13	</tbody>
14	</table>
15	- <div id="ig-lightbox-image-close"><a href="#" onclick="ig_lightbox_hide()"><img id="ig-lightbox-image-close-img" src="<?php echo $this->getSkinUrl('images/ig_lightbox/close.png') ?>" alt="close" /></a></div>
16
17	<?php
18	$_ig_lightbox_images_count = 0;
	@@ -42,7 +43,7 @@
42	foreach ($this->getGalleryImages() as $_image)
43	{
44	list($width, $height)=$this->getIgLightBoxBigImageSize();
45	- $src=$this->helper('catalog/image')->init($this->getProduct(), 'image', $_image->getFile())->~~constrainOnly~~(~~true~~)->~~keepFrame~~(~~false~~)->resize($width, $height);
46
47	if ($_image->getFile() == $_product->getImage())
48	{
	@@ -54,10 +55,8 @@
54	if ($_image->getLabel())
55	$lbl.=' - '.$this->htmlEscape($_image->getLabel());
56
57	- ~~str_replace~~(~~"'"~~, "\\'", $~~lbl~~);
58	-
59	- array_push($js_load, "ig_lightbox_img_sequence.push('$src');");
60	- array_push($js_load, "ig_lightbox_img_labels.push('$lbl');");
61
62	list($width, $height)=$this->getIgLightBoxThumbnailImageSize();
63	?>
	@@ -77,8 +76,11 @@
77	}
78	else
79	{
80	- ~~array_push~~($~~js_load~~, ~~"ig_lightbox_img_sequence.push('".$_product~~->~~getImageUrl~~()~~."')~~;~~");~~
81	- ~~array_push~~($~~js_load~~, ~~"ig_lightbox_img_labels.push(~~'~~".$_product~~->~~getName~~()~~."'~~);~~");~~



82	}
83	?>
84


2
3	<div id="ig-lightbox-back"></div>
4	<div id="ig-lightbox-image"></div>
5	+ <div id="ig-lightbox-loading"></div>
6	+ <img id="ig-lightbox-image-src" />
7	+ <table id="ig-lightbox-image-commands" style="dispaly:none">
8	<tbody>
9	<tr>
10	<td style="text-align: center" width="64"><a href="#" onclick="ig_lightbox_prev()"><img id="ig-lightbox-prev" src="<?php echo $this->getSkinUrl('images/ig_lightbox/prev.png') ?>" alt="prev" /></a></td>

13	</tr>
14	</tbody>
15	</table>
16	+ <div id="ig-lightbox-image-close" style="dispaly:none"><a href="#" onclick="ig_lightbox_hide()"><img id="ig-lightbox-image-close-img" src="<?php echo $this->getSkinUrl('images/ig_lightbox/close.png') ?>" alt="close" /></a></div>
17
18	<?php
19	$_ig_lightbox_images_count = 0;

43	foreach ($this->getGalleryImages() as $_image)
44	{
45	list($width, $height)=$this->getIgLightBoxBigImageSize();
46	+ $src=$this->helper('catalog/image')->init($this->getProduct(), 'image', $_image->getFile())->keepFrame(false)->constrainOnly(true)->resize($width, $height);
47
48	if ($_image->getFile() == $_product->getImage())
49	{

55	if ($_image->getLabel())
56	$lbl.=' - '.$this->htmlEscape($_image->getLabel());
57
58	+ array_push($js_load, "ig_lightbox_img_sequence.push('$src');");
59	+ array_push($js_load, "ig_lightbox_img_labels.push(".json_encode($lbl).");");


60
61	list($width, $height)=$this->getIgLightBoxThumbnailImageSize();
62	?>

76	}
77	else
78	{
79	+ list($width, $height)=$this->getIgLightBoxBigImageSize();
80	+ $src = $this->helper('catalog/image')->init($_product, 'image')->keepFrame(false)->resize($width, $height);
81	+
82	+ array_push($js_load, "ig_lightbox_img_sequence.push('$src');");
83	+ array_push($js_load, "ig_lightbox_img_labels.push(".json_encode($_product->getName()).");");
84	}
85	?>
86

package.xml CHANGED Viewed

	@@ -1,7 +1,7 @@
1	<?xml version="1.0"?>
2	<package>
3	<name>IG_LightBox</name>
4	- <version>1.0.9</version>
5	<stability>stable</stability>
6	<license uri="http://www.opensource.org/licenses/osl-3.0.php">OSL</license>
7	<channel>community</channel>
	@@ -18,9 +18,9 @@ You can change colors, effect, fonts or image sizes directly FROM MAGENTO BACK-E
18	IDEALIAGroup LightBox is fully integrated in Magento system configuration.</description>
19	<notes>Enjoy it ;)</notes>
20	<authors><author><name>Riccardo Tempesta</name><user>auto-converted</user><email>tempesta@idealiagroup.com</email></author><author><name>Marco Giorgetti</name><user>auto-converted</user><email>giorgetti@idealiagroup.com</email></author><author><name>Maria Chiara Luongo</name><user>auto-converted</user><email>sunlight10@hotmail.it</email></author></authors>
21	- <date>2010-03-18</date>
22	- <time>16:49:20</time>
23	- <contents><target name="magelocale"><dir name="de_DE"><file name="IG_LightBox.csv" hash="0ba5aeb54e9ed302fa26773a36ef3ab5"/></dir><dir name="en_US"><file name="IG_LightBox.csv" hash="d0e240588dab13a1ed211586334ca8d1"/></dir><dir name="it_IT"><file name="IG_LightBox.csv" hash="461be43e55b6b407637d2b6ef4079ac2"/></dir></target><target name="mageskin"><dir name="frontend"><dir name="default"><dir name="default"><dir name="css"><file name="ig_lightbox.css" hash="~~57d9a0cc9187bb6aee681a48d3950c36~~"/></dir><dir name="images"><dir name="ig_lightbox"><file name="close.png" hash="d27820a6f000dc575004e5b2e00152fb"/><file name="next.png" hash="ef678358e90669e00dad3d50137a9dfa"/><file name="prev.png" hash="9c0b22c4237e51b5be3447ee53eca339"/></dir></dir><dir name="js"><file name="ig_effects.js" hash="8433b39a8e7c93a0ed56e467e251f84b"/><file name="ig_lightbox.js" hash="~~563a570c791b067ea0dee5191f0ee6b2~~"/></dir></dir></dir></dir></target><target name="magedesign"><dir name="frontend"><dir name="default"><dir name="default"><dir name="layout"><file name="ig_lightbox.xml" hash="8ae77032c53744338128c6cb63dd9938"/></dir><dir name="template"><dir name="ig_lightbox"><file name="media.phtml" hash="~~9383e589a6ed745dca566eaa81f758e5~~"/></dir></dir></dir></dir></dir></target><target name="magecommunity"><dir name="IG"><dir name="LightBox"><dir name="Block"><file name="Media.php" hash="6f04ce0212fbb2d2fb57dfe91ede339c"/></dir><dir name="etc"><file name="config.xml" hash="~~e686a05e05d3b5acd15393f0510791da~~"/><file name="system.xml" hash="a083627cd216f73bbd0ed318f3f50b2a"/></dir><dir name="Helper"><file name="Data.php" hash="28a54a1190969c7023ddc67c3f242b34"/></dir><dir name="sql"><dir name="ig_lightbox_setup"><file name="mysql4-install-1.0.3.php" hash="f7cf810260f5e96cd6fa6ff314bd5330"/><file name="mysql4-install-1.0.4.php" hash="f7cf810260f5e96cd6fa6ff314bd5330"/></dir></dir><file name="LICENSE.txt" hash="b7870fbc716085862b4cba9b4629a24e"/></dir></dir></target><target name="mageetc"><dir name="modules"><file name="IG_LightBox.xml" hash="5d8f136255066de4f378d5c9bfe6edaf"/></dir></target></contents>
24	<compatible/>
25	<dependencies/>
26	</package>


1	<?xml version="1.0"?>
2	<package>
3	<name>IG_LightBox</name>
4	+ <version>1.0.12</version>
5	<stability>stable</stability>
6	<license uri="http://www.opensource.org/licenses/osl-3.0.php">OSL</license>
7	<channel>community</channel>

18	IDEALIAGroup LightBox is fully integrated in Magento system configuration.</description>
19	<notes>Enjoy it ;)</notes>
20	<authors><author><name>Riccardo Tempesta</name><user>auto-converted</user><email>tempesta@idealiagroup.com</email></author><author><name>Marco Giorgetti</name><user>auto-converted</user><email>giorgetti@idealiagroup.com</email></author><author><name>Maria Chiara Luongo</name><user>auto-converted</user><email>sunlight10@hotmail.it</email></author></authors>
21	+ <date>2010-09-07</date>
22	+ <time>12:31:21</time>
23	+ <contents><target name="magelocale"><dir name="de_DE"><file name="IG_LightBox.csv" hash="0ba5aeb54e9ed302fa26773a36ef3ab5"/></dir><dir name="en_US"><file name="IG_LightBox.csv" hash="d0e240588dab13a1ed211586334ca8d1"/></dir><dir name="it_IT"><file name="IG_LightBox.csv" hash="461be43e55b6b407637d2b6ef4079ac2"/></dir></target><target name="mageskin"><dir name="frontend"><dir name="base"><dir name="default"><dir name="css"><file name="ig_lightbox.css" hash="90013fca813ded63dcfa451fba4becee"/></dir><dir name="images"><dir name="ig_lightbox"><file name="close.png" hash="d27820a6f000dc575004e5b2e00152fb"/><file name="loader.gif" hash="3d97df91cb14210546102f0ddb775db0"/><file name="next.png" hash="ef678358e90669e00dad3d50137a9dfa"/><file name="prev.png" hash="9c0b22c4237e51b5be3447ee53eca339"/></dir></dir><dir name="js"><file name="ig_effects.js" hash="8433b39a8e7c93a0ed56e467e251f84b"/><file name="ig_lightbox.js" hash="45db078e1378322e24673ffbdb0cf426"/></dir></dir></dir><dir name="default"><dir name="default"><dir name="css"><file name="ig_lightbox.css" hash="90013fca813ded63dcfa451fba4becee"/></dir><dir name="images"><dir name="ig_lightbox"><file name="close.png" hash="d27820a6f000dc575004e5b2e00152fb"/><file name="loader.gif" hash="3d97df91cb14210546102f0ddb775db0"/><file name="next.png" hash="ef678358e90669e00dad3d50137a9dfa"/><file name="prev.png" hash="9c0b22c4237e51b5be3447ee53eca339"/></dir></dir><dir name="js"><file name="ig_effects.js" hash="8433b39a8e7c93a0ed56e467e251f84b"/><file name="ig_lightbox.js" hash="45db078e1378322e24673ffbdb0cf426"/></dir></dir></dir></dir></target><target name="magedesign"><dir name="frontend"><dir name="base"><dir name="default"><dir name="layout"><file name="ig_lightbox.xml" hash="8ae77032c53744338128c6cb63dd9938"/></dir><dir name="template"><dir name="ig_lightbox"><file name="media.phtml" hash="387c5db5de2f8c525a1970b29300fa88"/></dir></dir></dir></dir><dir name="default"><dir name="default"><dir name="layout"><file name="ig_lightbox.xml" hash="8ae77032c53744338128c6cb63dd9938"/></dir><dir name="template"><dir name="ig_lightbox"><file name="media.phtml" hash="ec6a319a9cff68d4f77a85cf4b6cc70f"/></dir></dir></dir></dir></dir></target><target name="magecommunity"><dir name="IG"><dir name="LightBox"><dir name="Block"><file name="Media.php" hash="6f04ce0212fbb2d2fb57dfe91ede339c"/></dir><dir name="etc"><file name="config.xml" hash="2c07decba3e9f18cd07fcdc7b33338f6"/><file name="system.xml" hash="a083627cd216f73bbd0ed318f3f50b2a"/></dir><dir name="Helper"><file name="Data.php" hash="28a54a1190969c7023ddc67c3f242b34"/></dir><dir name="sql"><dir name="ig_lightbox_setup"><file name="mysql4-install-1.0.3.php" hash="f7cf810260f5e96cd6fa6ff314bd5330"/><file name="mysql4-install-1.0.4.php" hash="f7cf810260f5e96cd6fa6ff314bd5330"/></dir></dir><file name="CHANGELOG.txt" hash="959c2d2c07e93b5df99c7d4d3d7027db"/><file name="LICENSE.txt" hash="b7870fbc716085862b4cba9b4629a24e"/></dir></dir></target><target name="mageetc"><dir name="modules"><file name="IG_LightBox.xml" hash="5d8f136255066de4f378d5c9bfe6edaf"/></dir></target></contents>
24	<compatible/>
25	<dependencies/>
26	</package>

skin/frontend/base/default/css/ig_lightbox.css ADDED Viewed

	@@ -0,0 +1,70 @@


1	+ #ig-lightbox-image
2	+ {
3	+ position: absolute;
4	+ top: 0;
5	+ left: 0;
6	+
7	+ width: 100px;
8	+ height: 100px;
9	+
10	+ z-index: 1000;
11	+ /* opacity: 0; */
12	+ }
13	+
14	+ #ig-lightbox-back
15	+ {
16	+ position: absolute;
17	+ top: 0;
18	+ left: 0;
19	+ z-index: 900;
20	+ /* opacity: 0; */
21	+ }
22	+
23	+ #ig-lightbox-image-src
24	+ {
25	+ position: absolute;
26	+ top: 0;
27	+ left: 0;
28	+
29	+ z-index: 1050;
30	+ /* opacity: 0; */
31	+ }
32	+
33	+ #ig-lightbox-image-commands
34	+ {
35	+ position: absolute;
36	+ text-align: center;
37	+ z-index: 1100;
38	+ visibility: hidden;
39	+ /* opacity: 0; */
40	+ }
41	+
42	+ #image-label
43	+ {
44	+ text-align: center;
45	+ }
46	+
47	+ #ig-lightbox-image-commands td
48	+ {
49	+ vertical-align: middle;
50	+ }
51	+
52	+ #ig-lightbox-image-close
53	+ {
54	+ position: absolute;
55	+ left : -1000px;
56	+ top : -1000px;
57	+ z-index: 2000;
58	+ }
59	+
60	+ #ig-lightbox-loading
61	+ {
62	+ position: absolute;
63	+ background: #000000 url(../images/ig_lightbox/loader.gif) no-repeat center center;
64	+ border: 1px solid #8e8e8e;
65	+ z-index: 2100;
66	+ width: 200px;
67	+ height: 200px;
68	+ visibility: hidden;
69	+ }
70	+

skin/frontend/base/default/images/ig_lightbox/close.png ADDED Viewed

Binary file

skin/frontend/base/default/images/ig_lightbox/loader.gif ADDED Viewed

Binary file

skin/frontend/base/default/images/ig_lightbox/next.png ADDED Viewed

Binary file

skin/frontend/base/default/images/ig_lightbox/prev.png ADDED Viewed

Binary file

skin/frontend/base/default/js/ig_effects.js ADDED Viewed

	@@ -0,0 +1,1123 @@


1	+ // Copyright (c) 2005-2009 Thomas Fuchs (http://script.aculo.us, http://mir.aculo.us)
2	+ // Contributors:
3	+ // Justin Palmer (http://encytemedia.com/)
4	+ // Mark Pilgrim (http://diveintomark.org/)
5	+ // Martin Bialasinki
6	+ //
7	+ // script.aculo.us is freely distributable under the terms of an MIT-style license.
8	+ // For details, see the script.aculo.us web site: http://script.aculo.us/
9	+
10	+ // converts rgb() and #xxx to #xxxxxx format,
11	+ // returns self (or first argument) if not convertable
12	+
13	+ String.prototype.parseColor = function() {
14	+ var color = '#';
15	+ if (this.slice(0,4) == 'rgb(') {
16	+ var cols = this.slice(4,this.length-1).split(',');
17	+ var i=0; do { color += parseInt(cols[i]).toColorPart() } while (++i<3);
18	+ } else {
19	+ if (this.slice(0,1) == '#') {
20	+ if (this.length==4) for(var i=1;i<4;i++) color += (this.charAt(i) + this.charAt(i)).toLowerCase();
21	+ if (this.length==7) color = this.toLowerCase();
22	+ }
23	+ }
24	+ return (color.length==7 ? color : (arguments[0] \|\| this));
25	+ };
26	+
27	+ /--------------------------------------------------------------------------/
28	+
29	+ Element.collectTextNodes = function(element) {
30	+ return $A($(element).childNodes).collect( function(node) {
31	+ return (node.nodeType==3 ? node.nodeValue :
32	+ (node.hasChildNodes() ? Element.collectTextNodes(node) : ''));
33	+ }).flatten().join('');
34	+ };
35	+
36	+ Element.collectTextNodesIgnoreClass = function(element, className) {
37	+ return $A($(element).childNodes).collect( function(node) {
38	+ return (node.nodeType==3 ? node.nodeValue :
39	+ ((node.hasChildNodes() && !Element.hasClassName(node,className)) ?
40	+ Element.collectTextNodesIgnoreClass(node, className) : ''));
41	+ }).flatten().join('');
42	+ };
43	+
44	+ Element.setContentZoom = function(element, percent) {
45	+ element = $(element);
46	+ element.setStyle({fontSize: (percent/100) + 'em'});
47	+ if (Prototype.Browser.WebKit) window.scrollBy(0,0);
48	+ return element;
49	+ };
50	+
51	+ Element.getInlineOpacity = function(element){
52	+ return $(element).style.opacity \|\| '';
53	+ };
54	+
55	+ Element.forceRerendering = function(element) {
56	+ try {
57	+ element = $(element);
58	+ var n = document.createTextNode(' ');
59	+ element.appendChild(n);
60	+ element.removeChild(n);
61	+ } catch(e) { }
62	+ };
63	+
64	+ /--------------------------------------------------------------------------/
65	+
66	+ var Effect = {
67	+ _elementDoesNotExistError: {
68	+ name: 'ElementDoesNotExistError',
69	+ message: 'The specified DOM element does not exist, but is required for this effect to operate'
70	+ },
71	+ Transitions: {
72	+ linear: Prototype.K,
73	+ sinoidal: function(pos) {
74	+ return (-Math.cos(pos*Math.PI)/2) + .5;
75	+ },
76	+ reverse: function(pos) {
77	+ return 1-pos;
78	+ },
79	+ flicker: function(pos) {
80	+ var pos = ((-Math.cos(pos*Math.PI)/4) + .75) + Math.random()/4;
81	+ return pos > 1 ? 1 : pos;
82	+ },
83	+ wobble: function(pos) {
84	+ return (-Math.cos(posMath.PI(9*pos))/2) + .5;
85	+ },
86	+ pulse: function(pos, pulses) {
87	+ return (-Math.cos((pos((pulses\|\|5)-.5)2)*Math.PI)/2) + .5;
88	+ },
89	+ spring: function(pos) {
90	+ return 1 - (Math.cos(pos * 4.5 * Math.PI) * Math.exp(-pos * 6));
91	+ },
92	+ none: function(pos) {
93	+ return 0;
94	+ },
95	+ full: function(pos) {
96	+ return 1;
97	+ }
98	+ },
99	+ DefaultOptions: {
100	+ duration: 1.0, // seconds
101	+ fps: 100, // 100= assume 66fps max.
102	+ sync: false, // true for combining
103	+ from: 0.0,
104	+ to: 1.0,
105	+ delay: 0.0,
106	+ queue: 'parallel'
107	+ },
108	+ tagifyText: function(element) {
109	+ var tagifyStyle = 'position:relative';
110	+ if (Prototype.Browser.IE) tagifyStyle += ';zoom:1';
111	+
112	+ element = $(element);
113	+ $A(element.childNodes).each( function(child) {
114	+ if (child.nodeType==3) {
115	+ child.nodeValue.toArray().each( function(character) {
116	+ element.insertBefore(
117	+ new Element('span', {style: tagifyStyle}).update(
118	+ character == ' ' ? String.fromCharCode(160) : character),
119	+ child);
120	+ });
121	+ Element.remove(child);
122	+ }
123	+ });
124	+ },
125	+ multiple: function(element, effect) {
126	+ var elements;
127	+ if (((typeof element == 'object') \|\|
128	+ Object.isFunction(element)) &&
129	+ (element.length))
130	+ elements = element;
131	+ else
132	+ elements = $(element).childNodes;
133	+
134	+ var options = Object.extend({
135	+ speed: 0.1,
136	+ delay: 0.0
137	+ }, arguments[2] \|\| { });
138	+ var masterDelay = options.delay;
139	+
140	+ $A(elements).each( function(element, index) {
141	+ new effect(element, Object.extend(options, { delay: index * options.speed + masterDelay }));
142	+ });
143	+ },
144	+ PAIRS: {
145	+ 'slide': ['SlideDown','SlideUp'],
146	+ 'blind': ['BlindDown','BlindUp'],
147	+ 'appear': ['Appear','Fade']
148	+ },
149	+ toggle: function(element, effect) {
150	+ element = $(element);
151	+ effect = (effect \|\| 'appear').toLowerCase();
152	+ var options = Object.extend({
153	+ queue: { position:'end', scope:(element.id \|\| 'global'), limit: 1 }
154	+ }, arguments[2] \|\| { });
155	+ Effect[element.visible() ?
156	+ Effect.PAIRS[effect][1] : Effect.PAIRS[effect][0]](element, options);
157	+ }
158	+ };
159	+
160	+ Effect.DefaultOptions.transition = Effect.Transitions.sinoidal;
161	+
162	+ /* ------------- core effects ------------- */
163	+
164	+ Effect.ScopedQueue = Class.create(Enumerable, {
165	+ initialize: function() {
166	+ this.effects = [];
167	+ this.interval = null;
168	+ },
169	+ _each: function(iterator) {
170	+ this.effects._each(iterator);
171	+ },
172	+ add: function(effect) {
173	+ var timestamp = new Date().getTime();
174	+
175	+ var position = Object.isString(effect.options.queue) ?
176	+ effect.options.queue : effect.options.queue.position;
177	+
178	+ switch(position) {
179	+ case 'front':
180	+ // move unstarted effects after this effect
181	+ this.effects.findAll(function(e){ return e.state=='idle' }).each( function(e) {
182	+ e.startOn += effect.finishOn;
183	+ e.finishOn += effect.finishOn;
184	+ });
185	+ break;
186	+ case 'with-last':
187	+ timestamp = this.effects.pluck('startOn').max() \|\| timestamp;
188	+ break;
189	+ case 'end':
190	+ // start effect after last queued effect has finished
191	+ timestamp = this.effects.pluck('finishOn').max() \|\| timestamp;
192	+ break;
193	+ }
194	+
195	+ effect.startOn += timestamp;
196	+ effect.finishOn += timestamp;
197	+
198	+ if (!effect.options.queue.limit \|\| (this.effects.length < effect.options.queue.limit))
199	+ this.effects.push(effect);
200	+
201	+ if (!this.interval)
202	+ this.interval = setInterval(this.loop.bind(this), 15);
203	+ },
204	+ remove: function(effect) {
205	+ this.effects = this.effects.reject(function(e) { return e==effect });
206	+ if (this.effects.length == 0) {
207	+ clearInterval(this.interval);
208	+ this.interval = null;
209	+ }
210	+ },
211	+ loop: function() {
212	+ var timePos = new Date().getTime();
213	+ for(var i=0, len=this.effects.length;i<len;i++)
214	+ this.effects[i] && this.effects[i].loop(timePos);
215	+ }
216	+ });
217	+
218	+ Effect.Queues = {
219	+ instances: $H(),
220	+ get: function(queueName) {
221	+ if (!Object.isString(queueName)) return queueName;
222	+
223	+ return this.instances.get(queueName) \|\|
224	+ this.instances.set(queueName, new Effect.ScopedQueue());
225	+ }
226	+ };
227	+ Effect.Queue = Effect.Queues.get('global');
228	+
229	+ Effect.Base = Class.create({
230	+ position: null,
231	+ start: function(options) {
232	+ if (options && options.transition === false) options.transition = Effect.Transitions.linear;
233	+ this.options = Object.extend(Object.extend({ },Effect.DefaultOptions), options \|\| { });
234	+ this.currentFrame = 0;
235	+ this.state = 'idle';
236	+ this.startOn = this.options.delay*1000;
237	+ this.finishOn = this.startOn+(this.options.duration*1000);
238	+ this.fromToDelta = this.options.to-this.options.from;
239	+ this.totalTime = this.finishOn-this.startOn;
240	+ this.totalFrames = this.options.fps*this.options.duration;
241	+
242	+ this.render = (function() {
243	+ function dispatch(effect, eventName) {
244	+ if (effect.options[eventName + 'Internal'])
245	+ effect.options[eventName + 'Internal'](effect);
246	+ if (effect.options[eventName])
247	+ effect.options[eventName](effect);
248	+ }
249	+
250	+ return function(pos) {
251	+ if (this.state === "idle") {
252	+ this.state = "running";
253	+ dispatch(this, 'beforeSetup');
254	+ if (this.setup) this.setup();
255	+ dispatch(this, 'afterSetup');
256	+ }
257	+ if (this.state === "running") {
258	+ pos = (this.options.transition(pos) * this.fromToDelta) + this.options.from;
259	+ this.position = pos;
260	+ dispatch(this, 'beforeUpdate');
261	+ if (this.update) this.update(pos);
262	+ dispatch(this, 'afterUpdate');
263	+ }
264	+ };
265	+ })();
266	+
267	+ this.event('beforeStart');
268	+ if (!this.options.sync)
269	+ Effect.Queues.get(Object.isString(this.options.queue) ?
270	+ 'global' : this.options.queue.scope).add(this);
271	+ },
272	+ loop: function(timePos) {
273	+ if (timePos >= this.startOn) {
274	+ if (timePos >= this.finishOn) {
275	+ this.render(1.0);
276	+ this.cancel();
277	+ this.event('beforeFinish');
278	+ if (this.finish) this.finish();
279	+ this.event('afterFinish');
280	+ return;
281	+ }
282	+ var pos = (timePos - this.startOn) / this.totalTime,
283	+ frame = (pos * this.totalFrames).round();
284	+ if (frame > this.currentFrame) {
285	+ this.render(pos);
286	+ this.currentFrame = frame;
287	+ }
288	+ }
289	+ },
290	+ cancel: function() {
291	+ if (!this.options.sync)
292	+ Effect.Queues.get(Object.isString(this.options.queue) ?
293	+ 'global' : this.options.queue.scope).remove(this);
294	+ this.state = 'finished';
295	+ },
296	+ event: function(eventName) {
297	+ if (this.options[eventName + 'Internal']) this.options[eventName + 'Internal'](this);
298	+ if (this.options[eventName]) this.options[eventName](this);
299	+ },
300	+ inspect: function() {
301	+ var data = $H();
302	+ for(property in this)
303	+ if (!Object.isFunction(this[property])) data.set(property, this[property]);
304	+ return '#<Effect:' + data.inspect() + ',options:' + $H(this.options).inspect() + '>';
305	+ }
306	+ });
307	+
308	+ Effect.Parallel = Class.create(Effect.Base, {
309	+ initialize: function(effects) {
310	+ this.effects = effects \|\| [];
311	+ this.start(arguments[1]);
312	+ },
313	+ update: function(position) {
314	+ this.effects.invoke('render', position);
315	+ },
316	+ finish: function(position) {
317	+ this.effects.each( function(effect) {
318	+ effect.render(1.0);
319	+ effect.cancel();
320	+ effect.event('beforeFinish');
321	+ if (effect.finish) effect.finish(position);
322	+ effect.event('afterFinish');
323	+ });
324	+ }
325	+ });
326	+
327	+ Effect.Tween = Class.create(Effect.Base, {
328	+ initialize: function(object, from, to) {
329	+ object = Object.isString(object) ? $(object) : object;
330	+ var args = $A(arguments), method = args.last(),
331	+ options = args.length == 5 ? args[3] : null;
332	+ this.method = Object.isFunction(method) ? method.bind(object) :
333	+ Object.isFunction(object[method]) ? object[method].bind(object) :
334	+ function(value) { object[method] = value };
335	+ this.start(Object.extend({ from: from, to: to }, options \|\| { }));
336	+ },
337	+ update: function(position) {
338	+ this.method(position);
339	+ }
340	+ });
341	+
342	+ Effect.Event = Class.create(Effect.Base, {
343	+ initialize: function() {
344	+ this.start(Object.extend({ duration: 0 }, arguments[0] \|\| { }));
345	+ },
346	+ update: Prototype.emptyFunction
347	+ });
348	+
349	+ Effect.Opacity = Class.create(Effect.Base, {
350	+ initialize: function(element) {
351	+ this.element = $(element);
352	+ if (!this.element) throw(Effect._elementDoesNotExistError);
353	+ // make this work on IE on elements without 'layout'
354	+ if (Prototype.Browser.IE && (!this.element.currentStyle.hasLayout))
355	+ this.element.setStyle({zoom: 1});
356	+ var options = Object.extend({
357	+ from: this.element.getOpacity() \|\| 0.0,
358	+ to: 1.0
359	+ }, arguments[1] \|\| { });
360	+ this.start(options);
361	+ },
362	+ update: function(position) {
363	+ this.element.setOpacity(position);
364	+ }
365	+ });
366	+
367	+ Effect.Move = Class.create(Effect.Base, {
368	+ initialize: function(element) {
369	+ this.element = $(element);
370	+ if (!this.element) throw(Effect._elementDoesNotExistError);
371	+ var options = Object.extend({
372	+ x: 0,
373	+ y: 0,
374	+ mode: 'relative'
375	+ }, arguments[1] \|\| { });
376	+ this.start(options);
377	+ },
378	+ setup: function() {
379	+ this.element.makePositioned();
380	+ this.originalLeft = parseFloat(this.element.getStyle('left') \|\| '0');
381	+ this.originalTop = parseFloat(this.element.getStyle('top') \|\| '0');
382	+ if (this.options.mode == 'absolute') {
383	+ this.options.x = this.options.x - this.originalLeft;
384	+ this.options.y = this.options.y - this.originalTop;
385	+ }
386	+ },
387	+ update: function(position) {
388	+ this.element.setStyle({
389	+ left: (this.options.x * position + this.originalLeft).round() + 'px',
390	+ top: (this.options.y * position + this.originalTop).round() + 'px'
391	+ });
392	+ }
393	+ });
394	+
395	+ // for backwards compatibility
396	+ Effect.MoveBy = function(element, toTop, toLeft) {
397	+ return new Effect.Move(element,
398	+ Object.extend({ x: toLeft, y: toTop }, arguments[3] \|\| { }));
399	+ };
400	+
401	+ Effect.Scale = Class.create(Effect.Base, {
402	+ initialize: function(element, percent) {
403	+ this.element = $(element);
404	+ if (!this.element) throw(Effect._elementDoesNotExistError);
405	+ var options = Object.extend({
406	+ scaleX: true,
407	+ scaleY: true,
408	+ scaleContent: true,
409	+ scaleFromCenter: false,
410	+ scaleMode: 'box', // 'box' or 'contents' or { } with provided values
411	+ scaleFrom: 100.0,
412	+ scaleTo: percent
413	+ }, arguments[2] \|\| { });
414	+ this.start(options);
415	+ },
416	+ setup: function() {
417	+ this.restoreAfterFinish = this.options.restoreAfterFinish \|\| false;
418	+ this.elementPositioning = this.element.getStyle('position');
419	+
420	+ this.originalStyle = { };
421	+ ['top','left','width','height','fontSize'].each( function(k) {
422	+ this.originalStyle[k] = this.element.style[k];
423	+ }.bind(this));
424	+
425	+ this.originalTop = this.element.offsetTop;
426	+ this.originalLeft = this.element.offsetLeft;
427	+
428	+ var fontSize = this.element.getStyle('font-size') \|\| '100%';
429	+ ['em','px','%','pt'].each( function(fontSizeType) {
430	+ if (fontSize.indexOf(fontSizeType)>0) {
431	+ this.fontSize = parseFloat(fontSize);
432	+ this.fontSizeType = fontSizeType;
433	+ }
434	+ }.bind(this));
435	+
436	+ this.factor = (this.options.scaleTo - this.options.scaleFrom)/100;
437	+
438	+ this.dims = null;
439	+ if (this.options.scaleMode=='box')
440	+ this.dims = [this.element.offsetHeight, this.element.offsetWidth];
441	+ if (/^content/.test(this.options.scaleMode))
442	+ this.dims = [this.element.scrollHeight, this.element.scrollWidth];
443	+ if (!this.dims)
444	+ this.dims = [this.options.scaleMode.originalHeight,
445	+ this.options.scaleMode.originalWidth];
446	+ },
447	+ update: function(position) {
448	+ var currentScale = (this.options.scaleFrom/100.0) + (this.factor * position);
449	+ if (this.options.scaleContent && this.fontSize)
450	+ this.element.setStyle({fontSize: this.fontSize * currentScale + this.fontSizeType });
451	+ this.setDimensions(this.dims[0] * currentScale, this.dims[1] * currentScale);
452	+ },
453	+ finish: function(position) {
454	+ if (this.restoreAfterFinish) this.element.setStyle(this.originalStyle);
455	+ },
456	+ setDimensions: function(height, width) {
457	+ var d = { };
458	+ if (this.options.scaleX) d.width = width.round() + 'px';
459	+ if (this.options.scaleY) d.height = height.round() + 'px';
460	+ if (this.options.scaleFromCenter) {
461	+ var topd = (height - this.dims[0])/2;
462	+ var leftd = (width - this.dims[1])/2;
463	+ if (this.elementPositioning == 'absolute') {
464	+ if (this.options.scaleY) d.top = this.originalTop-topd + 'px';
465	+ if (this.options.scaleX) d.left = this.originalLeft-leftd + 'px';
466	+ } else {
467	+ if (this.options.scaleY) d.top = -topd + 'px';
468	+ if (this.options.scaleX) d.left = -leftd + 'px';
469	+ }
470	+ }
471	+ this.element.setStyle(d);
472	+ }
473	+ });
474	+
475	+ Effect.Highlight = Class.create(Effect.Base, {
476	+ initialize: function(element) {
477	+ this.element = $(element);
478	+ if (!this.element) throw(Effect._elementDoesNotExistError);
479	+ var options = Object.extend({ startcolor: '#ffff99' }, arguments[1] \|\| { });
480	+ this.start(options);
481	+ },
482	+ setup: function() {
483	+ // Prevent executing on elements not in the layout flow
484	+ if (this.element.getStyle('display')=='none') { this.cancel(); return; }
485	+ // Disable background image during the effect
486	+ this.oldStyle = { };
487	+ if (!this.options.keepBackgroundImage) {
488	+ this.oldStyle.backgroundImage = this.element.getStyle('background-image');
489	+ this.element.setStyle({backgroundImage: 'none'});
490	+ }
491	+ if (!this.options.endcolor)
492	+ this.options.endcolor = this.element.getStyle('background-color').parseColor('#ffffff');
493	+ if (!this.options.restorecolor)
494	+ this.options.restorecolor = this.element.getStyle('background-color');
495	+ // init color calculations
496	+ this._base = $R(0,2).map(function(i){ return parseInt(this.options.startcolor.slice(i2+1,i2+3),16) }.bind(this));
497	+ this._delta = $R(0,2).map(function(i){ return parseInt(this.options.endcolor.slice(i2+1,i2+3),16)-this._base[i] }.bind(this));
498	+ },
499	+ update: function(position) {
500	+ this.element.setStyle({backgroundColor: $R(0,2).inject('#',function(m,v,i){
501	+ return m+((this._base[i]+(this._delta[i]*position)).round().toColorPart()); }.bind(this)) });
502	+ },
503	+ finish: function() {
504	+ this.element.setStyle(Object.extend(this.oldStyle, {
505	+ backgroundColor: this.options.restorecolor
506	+ }));
507	+ }
508	+ });
509	+
510	+ Effect.ScrollTo = function(element) {
511	+ var options = arguments[1] \|\| { },
512	+ scrollOffsets = document.viewport.getScrollOffsets(),
513	+ elementOffsets = $(element).cumulativeOffset();
514	+
515	+ if (options.offset) elementOffsets[1] += options.offset;
516	+
517	+ return new Effect.Tween(null,
518	+ scrollOffsets.top,
519	+ elementOffsets[1],
520	+ options,
521	+ function(p){ scrollTo(scrollOffsets.left, p.round()); }
522	+ );
523	+ };
524	+
525	+ /* ------------- combination effects ------------- */
526	+
527	+ Effect.Fade = function(element) {
528	+ element = $(element);
529	+ var oldOpacity = element.getInlineOpacity();
530	+ var options = Object.extend({
531	+ from: element.getOpacity() \|\| 1.0,
532	+ to: 0.0,
533	+ afterFinishInternal: function(effect) {
534	+ if (effect.options.to!=0) return;
535	+ effect.element.hide().setStyle({opacity: oldOpacity});
536	+ }
537	+ }, arguments[1] \|\| { });
538	+ return new Effect.Opacity(element,options);
539	+ };
540	+
541	+ Effect.Appear = function(element) {
542	+ element = $(element);
543	+ var options = Object.extend({
544	+ from: (element.getStyle('display') == 'none' ? 0.0 : element.getOpacity() \|\| 0.0),
545	+ to: 1.0,
546	+ // force Safari to render floated elements properly
547	+ afterFinishInternal: function(effect) {
548	+ effect.element.forceRerendering();
549	+ },
550	+ beforeSetup: function(effect) {
551	+ effect.element.setOpacity(effect.options.from).show();
552	+ }}, arguments[1] \|\| { });
553	+ return new Effect.Opacity(element,options);
554	+ };
555	+
556	+ Effect.Puff = function(element) {
557	+ element = $(element);
558	+ var oldStyle = {
559	+ opacity: element.getInlineOpacity(),
560	+ position: element.getStyle('position'),
561	+ top: element.style.top,
562	+ left: element.style.left,
563	+ width: element.style.width,
564	+ height: element.style.height
565	+ };
566	+ return new Effect.Parallel(
567	+ [ new Effect.Scale(element, 200,
568	+ { sync: true, scaleFromCenter: true, scaleContent: true, restoreAfterFinish: true }),
569	+ new Effect.Opacity(element, { sync: true, to: 0.0 } ) ],
570	+ Object.extend({ duration: 1.0,
571	+ beforeSetupInternal: function(effect) {
572	+ Position.absolutize(effect.effects[0].element);
573	+ },
574	+ afterFinishInternal: function(effect) {
575	+ effect.effects[0].element.hide().setStyle(oldStyle); }
576	+ }, arguments[1] \|\| { })
577	+ );
578	+ };
579	+
580	+ Effect.BlindUp = function(element) {
581	+ element = $(element);
582	+ element.makeClipping();
583	+ return new Effect.Scale(element, 0,
584	+ Object.extend({ scaleContent: false,
585	+ scaleX: false,
586	+ restoreAfterFinish: true,
587	+ afterFinishInternal: function(effect) {
588	+ effect.element.hide().undoClipping();
589	+ }
590	+ }, arguments[1] \|\| { })
591	+ );
592	+ };
593	+
594	+ Effect.BlindDown = function(element) {
595	+ element = $(element);
596	+ var elementDimensions = element.getDimensions();
597	+ return new Effect.Scale(element, 100, Object.extend({
598	+ scaleContent: false,
599	+ scaleX: false,
600	+ scaleFrom: 0,
601	+ scaleMode: {originalHeight: elementDimensions.height, originalWidth: elementDimensions.width},
602	+ restoreAfterFinish: true,
603	+ afterSetup: function(effect) {
604	+ effect.element.makeClipping().setStyle({height: '0px'}).show();
605	+ },
606	+ afterFinishInternal: function(effect) {
607	+ effect.element.undoClipping();
608	+ }
609	+ }, arguments[1] \|\| { }));
610	+ };
611	+
612	+ Effect.SwitchOff = function(element) {
613	+ element = $(element);
614	+ var oldOpacity = element.getInlineOpacity();
615	+ return new Effect.Appear(element, Object.extend({
616	+ duration: 0.4,
617	+ from: 0,
618	+ transition: Effect.Transitions.flicker,
619	+ afterFinishInternal: function(effect) {
620	+ new Effect.Scale(effect.element, 1, {
621	+ duration: 0.3, scaleFromCenter: true,
622	+ scaleX: false, scaleContent: false, restoreAfterFinish: true,
623	+ beforeSetup: function(effect) {
624	+ effect.element.makePositioned().makeClipping();
625	+ },
626	+ afterFinishInternal: function(effect) {
627	+ effect.element.hide().undoClipping().undoPositioned().setStyle({opacity: oldOpacity});
628	+ }
629	+ });
630	+ }
631	+ }, arguments[1] \|\| { }));
632	+ };
633	+
634	+ Effect.DropOut = function(element) {
635	+ element = $(element);
636	+ var oldStyle = {
637	+ top: element.getStyle('top'),
638	+ left: element.getStyle('left'),
639	+ opacity: element.getInlineOpacity() };
640	+ return new Effect.Parallel(
641	+ [ new Effect.Move(element, {x: 0, y: 100, sync: true }),
642	+ new Effect.Opacity(element, { sync: true, to: 0.0 }) ],
643	+ Object.extend(
644	+ { duration: 0.5,
645	+ beforeSetup: function(effect) {
646	+ effect.effects[0].element.makePositioned();
647	+ },
648	+ afterFinishInternal: function(effect) {
649	+ effect.effects[0].element.hide().undoPositioned().setStyle(oldStyle);
650	+ }
651	+ }, arguments[1] \|\| { }));
652	+ };
653	+
654	+ Effect.Shake = function(element) {
655	+ element = $(element);
656	+ var options = Object.extend({
657	+ distance: 20,
658	+ duration: 0.5
659	+ }, arguments[1] \|\| {});
660	+ var distance = parseFloat(options.distance);
661	+ var split = parseFloat(options.duration) / 10.0;
662	+ var oldStyle = {
663	+ top: element.getStyle('top'),
664	+ left: element.getStyle('left') };
665	+ return new Effect.Move(element,
666	+ { x: distance, y: 0, duration: split, afterFinishInternal: function(effect) {
667	+ new Effect.Move(effect.element,
668	+ { x: -distance2, y: 0, duration: split2, afterFinishInternal: function(effect) {
669	+ new Effect.Move(effect.element,
670	+ { x: distance2, y: 0, duration: split2, afterFinishInternal: function(effect) {
671	+ new Effect.Move(effect.element,
672	+ { x: -distance2, y: 0, duration: split2, afterFinishInternal: function(effect) {
673	+ new Effect.Move(effect.element,
674	+ { x: distance2, y: 0, duration: split2, afterFinishInternal: function(effect) {
675	+ new Effect.Move(effect.element,
676	+ { x: -distance, y: 0, duration: split, afterFinishInternal: function(effect) {
677	+ effect.element.undoPositioned().setStyle(oldStyle);
678	+ }}); }}); }}); }}); }}); }});
679	+ };
680	+
681	+ Effect.SlideDown = function(element) {
682	+ element = $(element).cleanWhitespace();
683	+ // SlideDown need to have the content of the element wrapped in a container element with fixed height!
684	+ var oldInnerBottom = element.down().getStyle('bottom');
685	+ var elementDimensions = element.getDimensions();
686	+ return new Effect.Scale(element, 100, Object.extend({
687	+ scaleContent: false,
688	+ scaleX: false,
689	+ scaleFrom: window.opera ? 0 : 1,
690	+ scaleMode: {originalHeight: elementDimensions.height, originalWidth: elementDimensions.width},
691	+ restoreAfterFinish: true,
692	+ afterSetup: function(effect) {
693	+ effect.element.makePositioned();
694	+ effect.element.down().makePositioned();
695	+ if (window.opera) effect.element.setStyle({top: ''});
696	+ effect.element.makeClipping().setStyle({height: '0px'}).show();
697	+ },
698	+ afterUpdateInternal: function(effect) {
699	+ effect.element.down().setStyle({bottom:
700	+ (effect.dims[0] - effect.element.clientHeight) + 'px' });
701	+ },
702	+ afterFinishInternal: function(effect) {
703	+ effect.element.undoClipping().undoPositioned();
704	+ effect.element.down().undoPositioned().setStyle({bottom: oldInnerBottom}); }
705	+ }, arguments[1] \|\| { })
706	+ );
707	+ };
708	+
709	+ Effect.SlideUp = function(element) {
710	+ element = $(element).cleanWhitespace();
711	+ var oldInnerBottom = element.down().getStyle('bottom');
712	+ var elementDimensions = element.getDimensions();
713	+ return new Effect.Scale(element, window.opera ? 0 : 1,
714	+ Object.extend({ scaleContent: false,
715	+ scaleX: false,
716	+ scaleMode: 'box',
717	+ scaleFrom: 100,
718	+ scaleMode: {originalHeight: elementDimensions.height, originalWidth: elementDimensions.width},
719	+ restoreAfterFinish: true,
720	+ afterSetup: function(effect) {
721	+ effect.element.makePositioned();
722	+ effect.element.down().makePositioned();
723	+ if (window.opera) effect.element.setStyle({top: ''});
724	+ effect.element.makeClipping().show();
725	+ },
726	+ afterUpdateInternal: function(effect) {
727	+ effect.element.down().setStyle({bottom:
728	+ (effect.dims[0] - effect.element.clientHeight) + 'px' });
729	+ },
730	+ afterFinishInternal: function(effect) {
731	+ effect.element.hide().undoClipping().undoPositioned();
732	+ effect.element.down().undoPositioned().setStyle({bottom: oldInnerBottom});
733	+ }
734	+ }, arguments[1] \|\| { })
735	+ );
736	+ };
737	+
738	+ // Bug in opera makes the TD containing this element expand for a instance after finish
739	+ Effect.Squish = function(element) {
740	+ return new Effect.Scale(element, window.opera ? 1 : 0, {
741	+ restoreAfterFinish: true,
742	+ beforeSetup: function(effect) {
743	+ effect.element.makeClipping();
744	+ },
745	+ afterFinishInternal: function(effect) {
746	+ effect.element.hide().undoClipping();
747	+ }
748	+ });
749	+ };
750	+
751	+ Effect.Grow = function(element) {
752	+ element = $(element);
753	+ var options = Object.extend({
754	+ direction: 'center',
755	+ moveTransition: Effect.Transitions.sinoidal,
756	+ scaleTransition: Effect.Transitions.sinoidal,
757	+ opacityTransition: Effect.Transitions.full
758	+ }, arguments[1] \|\| { });
759	+ var oldStyle = {
760	+ top: element.style.top,
761	+ left: element.style.left,
762	+ height: element.style.height,
763	+ width: element.style.width,
764	+ opacity: element.getInlineOpacity() };
765	+
766	+ var dims = element.getDimensions();
767	+ var initialMoveX, initialMoveY;
768	+ var moveX, moveY;
769	+
770	+ switch (options.direction) {
771	+ case 'top-left':
772	+ initialMoveX = initialMoveY = moveX = moveY = 0;
773	+ break;
774	+ case 'top-right':
775	+ initialMoveX = dims.width;
776	+ initialMoveY = moveY = 0;
777	+ moveX = -dims.width;
778	+ break;
779	+ case 'bottom-left':
780	+ initialMoveX = moveX = 0;
781	+ initialMoveY = dims.height;
782	+ moveY = -dims.height;
783	+ break;
784	+ case 'bottom-right':
785	+ initialMoveX = dims.width;
786	+ initialMoveY = dims.height;
787	+ moveX = -dims.width;
788	+ moveY = -dims.height;
789	+ break;
790	+ case 'center':
791	+ initialMoveX = dims.width / 2;
792	+ initialMoveY = dims.height / 2;
793	+ moveX = -dims.width / 2;
794	+ moveY = -dims.height / 2;
795	+ break;
796	+ }
797	+
798	+ return new Effect.Move(element, {
799	+ x: initialMoveX,
800	+ y: initialMoveY,
801	+ duration: 0.01,
802	+ beforeSetup: function(effect) {
803	+ effect.element.hide().makeClipping().makePositioned();
804	+ },
805	+ afterFinishInternal: function(effect) {
806	+ new Effect.Parallel(
807	+ [ new Effect.Opacity(effect.element, { sync: true, to: 1.0, from: 0.0, transition: options.opacityTransition }),
808	+ new Effect.Move(effect.element, { x: moveX, y: moveY, sync: true, transition: options.moveTransition }),
809	+ new Effect.Scale(effect.element, 100, {
810	+ scaleMode: { originalHeight: dims.height, originalWidth: dims.width },
811	+ sync: true, scaleFrom: window.opera ? 1 : 0, transition: options.scaleTransition, restoreAfterFinish: true})
812	+ ], Object.extend({
813	+ beforeSetup: function(effect) {
814	+ effect.effects[0].element.setStyle({height: '0px'}).show();
815	+ },
816	+ afterFinishInternal: function(effect) {
817	+ effect.effects[0].element.undoClipping().undoPositioned().setStyle(oldStyle);
818	+ }
819	+ }, options)
820	+ );
821	+ }
822	+ });
823	+ };
824	+
825	+ Effect.Shrink = function(element) {
826	+ element = $(element);
827	+ var options = Object.extend({
828	+ direction: 'center',
829	+ moveTransition: Effect.Transitions.sinoidal,
830	+ scaleTransition: Effect.Transitions.sinoidal,
831	+ opacityTransition: Effect.Transitions.none
832	+ }, arguments[1] \|\| { });
833	+ var oldStyle = {
834	+ top: element.style.top,
835	+ left: element.style.left,
836	+ height: element.style.height,
837	+ width: element.style.width,
838	+ opacity: element.getInlineOpacity() };
839	+
840	+ var dims = element.getDimensions();
841	+ var moveX, moveY;
842	+
843	+ switch (options.direction) {
844	+ case 'top-left':
845	+ moveX = moveY = 0;
846	+ break;
847	+ case 'top-right':
848	+ moveX = dims.width;
849	+ moveY = 0;
850	+ break;
851	+ case 'bottom-left':
852	+ moveX = 0;
853	+ moveY = dims.height;
854	+ break;
855	+ case 'bottom-right':
856	+ moveX = dims.width;
857	+ moveY = dims.height;
858	+ break;
859	+ case 'center':
860	+ moveX = dims.width / 2;
861	+ moveY = dims.height / 2;
862	+ break;
863	+ }
864	+
865	+ return new Effect.Parallel(
866	+ [ new Effect.Opacity(element, { sync: true, to: 0.0, from: 1.0, transition: options.opacityTransition }),
867	+ new Effect.Scale(element, window.opera ? 1 : 0, { sync: true, transition: options.scaleTransition, restoreAfterFinish: true}),
868	+ new Effect.Move(element, { x: moveX, y: moveY, sync: true, transition: options.moveTransition })
869	+ ], Object.extend({
870	+ beforeStartInternal: function(effect) {
871	+ effect.effects[0].element.makePositioned().makeClipping();
872	+ },
873	+ afterFinishInternal: function(effect) {
874	+ effect.effects[0].element.hide().undoClipping().undoPositioned().setStyle(oldStyle); }
875	+ }, options)
876	+ );
877	+ };
878	+
879	+ Effect.Pulsate = function(element) {
880	+ element = $(element);
881	+ var options = arguments[1] \|\| { },
882	+ oldOpacity = element.getInlineOpacity(),
883	+ transition = options.transition \|\| Effect.Transitions.linear,
884	+ reverser = function(pos){
885	+ return 1 - transition((-Math.cos((pos(options.pulses\|\|5)2)*Math.PI)/2) + .5);
886	+ };
887	+
888	+ return new Effect.Opacity(element,
889	+ Object.extend(Object.extend({ duration: 2.0, from: 0,
890	+ afterFinishInternal: function(effect) { effect.element.setStyle({opacity: oldOpacity}); }
891	+ }, options), {transition: reverser}));
892	+ };
893	+
894	+ Effect.Fold = function(element) {
895	+ element = $(element);
896	+ var oldStyle = {
897	+ top: element.style.top,
898	+ left: element.style.left,
899	+ width: element.style.width,
900	+ height: element.style.height };
901	+ element.makeClipping();
902	+ return new Effect.Scale(element, 5, Object.extend({
903	+ scaleContent: false,
904	+ scaleX: false,
905	+ afterFinishInternal: function(effect) {
906	+ new Effect.Scale(element, 1, {
907	+ scaleContent: false,
908	+ scaleY: false,
909	+ afterFinishInternal: function(effect) {
910	+ effect.element.hide().undoClipping().setStyle(oldStyle);
911	+ } });
912	+ }}, arguments[1] \|\| { }));
913	+ };
914	+
915	+ Effect.Morph = Class.create(Effect.Base, {
916	+ initialize: function(element) {
917	+ this.element = $(element);
918	+ if (!this.element) throw(Effect._elementDoesNotExistError);
919	+ var options = Object.extend({
920	+ style: { }
921	+ }, arguments[1] \|\| { });
922	+
923	+ if (!Object.isString(options.style)) this.style = $H(options.style);
924	+ else {
925	+ if (options.style.include(':'))
926	+ this.style = options.style.parseStyle();
927	+ else {
928	+ this.element.addClassName(options.style);
929	+ this.style = $H(this.element.getStyles());
930	+ this.element.removeClassName(options.style);
931	+ var css = this.element.getStyles();
932	+ this.style = this.style.reject(function(style) {
933	+ return style.value == css[style.key];
934	+ });
935	+ options.afterFinishInternal = function(effect) {
936	+ effect.element.addClassName(effect.options.style);
937	+ effect.transforms.each(function(transform) {
938	+ effect.element.style[transform.style] = '';
939	+ });
940	+ };
941	+ }
942	+ }
943	+ this.start(options);
944	+ },
945	+
946	+ setup: function(){
947	+ function parseColor(color){
948	+ if (!color \|\| ['rgba(0, 0, 0, 0)','transparent'].include(color)) color = '#ffffff';
949	+ color = color.parseColor();
950	+ return $R(0,2).map(function(i){
951	+ return parseInt( color.slice(i2+1,i2+3), 16 );
952	+ });
953	+ }
954	+ this.transforms = this.style.map(function(pair){
955	+ var property = pair[0], value = pair[1], unit = null;
956	+
957	+ if (value.parseColor('#zzzzzz') != '#zzzzzz') {
958	+ value = value.parseColor();
959	+ unit = 'color';
960	+ } else if (property == 'opacity') {
961	+ value = parseFloat(value);
962	+ if (Prototype.Browser.IE && (!this.element.currentStyle.hasLayout))
963	+ this.element.setStyle({zoom: 1});
964	+ } else if (Element.CSS_LENGTH.test(value)) {
965	+ var components = value.match(/^([\+\-]?[0-9\.]+)(.*)$/);
966	+ value = parseFloat(components[1]);
967	+ unit = (components.length == 3) ? components[2] : null;
968	+ }
969	+
970	+ var originalValue = this.element.getStyle(property);
971	+ return {
972	+ style: property.camelize(),
973	+ originalValue: unit=='color' ? parseColor(originalValue) : parseFloat(originalValue \|\| 0),
974	+ targetValue: unit=='color' ? parseColor(value) : value,
975	+ unit: unit
976	+ };
977	+ }.bind(this)).reject(function(transform){
978	+ return (
979	+ (transform.originalValue == transform.targetValue) \|\|
980	+ (
981	+ transform.unit != 'color' &&
982	+ (isNaN(transform.originalValue) \|\| isNaN(transform.targetValue))
983	+ )
984	+ );
985	+ });
986	+ },
987	+ update: function(position) {
988	+ var style = { }, transform, i = this.transforms.length;
989	+ while(i--)
990	+ style[(transform = this.transforms[i]).style] =
991	+ transform.unit=='color' ? '#'+
992	+ (Math.round(transform.originalValue[0]+
993	+ (transform.targetValue[0]-transform.originalValue[0])*position)).toColorPart() +
994	+ (Math.round(transform.originalValue[1]+
995	+ (transform.targetValue[1]-transform.originalValue[1])*position)).toColorPart() +
996	+ (Math.round(transform.originalValue[2]+
997	+ (transform.targetValue[2]-transform.originalValue[2])*position)).toColorPart() :
998	+ (transform.originalValue +
999	+ (transform.targetValue - transform.originalValue) * position).toFixed(3) +
1000	+ (transform.unit === null ? '' : transform.unit);
1001	+ this.element.setStyle(style, true);
1002	+ }
1003	+ });
1004	+
1005	+ Effect.Transform = Class.create({
1006	+ initialize: function(tracks){
1007	+ this.tracks = [];
1008	+ this.options = arguments[1] \|\| { };
1009	+ this.addTracks(tracks);
1010	+ },
1011	+ addTracks: function(tracks){
1012	+ tracks.each(function(track){
1013	+ track = $H(track);
1014	+ var data = track.values().first();
1015	+ this.tracks.push($H({
1016	+ ids: track.keys().first(),
1017	+ effect: Effect.Morph,
1018	+ options: { style: data }
1019	+ }));
1020	+ }.bind(this));
1021	+ return this;
1022	+ },
1023	+ play: function(){
1024	+ return new Effect.Parallel(
1025	+ this.tracks.map(function(track){
1026	+ var ids = track.get('ids'), effect = track.get('effect'), options = track.get('options');
1027	+ var elements = [$(ids) \|\| $$(ids)].flatten();
1028	+ return elements.map(function(e){ return new effect(e, Object.extend({ sync:true }, options)) });
1029	+ }).flatten(),
1030	+ this.options
1031	+ );
1032	+ }
1033	+ });
1034	+
1035	+ Element.CSS_PROPERTIES = $w(
1036	+ 'backgroundColor backgroundPosition borderBottomColor borderBottomStyle ' +
1037	+ 'borderBottomWidth borderLeftColor borderLeftStyle borderLeftWidth ' +
1038	+ 'borderRightColor borderRightStyle borderRightWidth borderSpacing ' +
1039	+ 'borderTopColor borderTopStyle borderTopWidth bottom clip color ' +
1040	+ 'fontSize fontWeight height left letterSpacing lineHeight ' +
1041	+ 'marginBottom marginLeft marginRight marginTop markerOffset maxHeight '+
1042	+ 'maxWidth minHeight minWidth opacity outlineColor outlineOffset ' +
1043	+ 'outlineWidth paddingBottom paddingLeft paddingRight paddingTop ' +
1044	+ 'right textIndent top width wordSpacing zIndex');
1045	+
1046	+ Element.CSS_LENGTH = /^(([\+\-]?[0-9\.]+)(em\|ex\|px\|in\|cm\|mm\|pt\|pc\|\%))\|0$/;
1047	+
1048	+ String.__parseStyleElement = document.createElement('div');
1049	+ String.prototype.parseStyle = function(){
1050	+ var style, styleRules = $H();
1051	+ if (Prototype.Browser.WebKit)
1052	+ style = new Element('div',{style:this}).style;
1053	+ else {
1054	+ String.__parseStyleElement.innerHTML = '<div style="' + this + '"></div>';
1055	+ style = String.__parseStyleElement.childNodes[0].style;
1056	+ }
1057	+
1058	+ Element.CSS_PROPERTIES.each(function(property){
1059	+ if (style[property]) styleRules.set(property, style[property]);
1060	+ });
1061	+
1062	+ if (Prototype.Browser.IE && this.include('opacity'))
1063	+ styleRules.set('opacity', this.match(/opacity:\s((?:0\|1)?(?:\.\d)?)/)[1]);
1064	+
1065	+ return styleRules;
1066	+ };
1067	+
1068	+ if (document.defaultView && document.defaultView.getComputedStyle) {
1069	+ Element.getStyles = function(element) {
1070	+ var css = document.defaultView.getComputedStyle($(element), null);
1071	+ return Element.CSS_PROPERTIES.inject({ }, function(styles, property) {
1072	+ styles[property] = css[property];
1073	+ return styles;
1074	+ });
1075	+ };
1076	+ } else {
1077	+ Element.getStyles = function(element) {
1078	+ element = $(element);
1079	+ var css = element.currentStyle, styles;
1080	+ styles = Element.CSS_PROPERTIES.inject({ }, function(results, property) {
1081	+ results[property] = css[property];
1082	+ return results;
1083	+ });
1084	+ if (!styles.opacity) styles.opacity = element.getOpacity();
1085	+ return styles;
1086	+ };
1087	+ }
1088	+
1089	+ Effect.Methods = {
1090	+ morph: function(element, style) {
1091	+ element = $(element);
1092	+ new Effect.Morph(element, Object.extend({ style: style }, arguments[2] \|\| { }));
1093	+ return element;
1094	+ },
1095	+ visualEffect: function(element, effect, options) {
1096	+ element = $(element);
1097	+ var s = effect.dasherize().camelize(), klass = s.charAt(0).toUpperCase() + s.substring(1);
1098	+ new Effect[klass](element, options);
1099	+ return element;
1100	+ },
1101	+ highlight: function(element, options) {
1102	+ element = $(element);
1103	+ new Effect.Highlight(element, options);
1104	+ return element;
1105	+ }
1106	+ };
1107	+
1108	+ $w('fade appear grow shrink fold blindUp blindDown slideUp slideDown '+
1109	+ 'pulsate shake puff squish switchOff dropOut').each(
1110	+ function(effect) {
1111	+ Effect.Methods[effect] = function(element, options){
1112	+ element = $(element);
1113	+ Effect[effect.charAt(0).toUpperCase() + effect.substring(1)](element, options);
1114	+ return element;
1115	+ };
1116	+ }
1117	+ );
1118	+
1119	+ $w('getInlineOpacity forceRerendering setContentZoom collectTextNodes collectTextNodesIgnoreClass getStyles').each(
1120	+ function(f) { Effect.Methods[f] = Element[f]; }
1121	+ );
1122	+
1123	+ Element.addMethods(Effect.Methods);

skin/frontend/base/default/js/ig_lightbox.js ADDED Viewed

	@@ -0,0 +1,417 @@


1	+ /**
2	+ * IDEALIAGroup srl
3	+ *
4	+ * NOTICE OF LICENSE
5	+ *
6	+ * This source file is subject to the Open Software License (OSL 3.0)
7	+ * that is bundled with this package in the file LICENSE.txt.
8	+ * It is also available through the world-wide-web at this URL:
9	+ * http://opensource.org/licenses/osl-3.0.php
10	+ * If you did not receive a copy of the license and are unable to
11	+ * obtain it through the world-wide-web, please send an email
12	+ * to license@idealiagroup.com so we can send you a copy immediately.
13	+ *
14	+ * DISCLAIMER
15	+ *
16	+ * Do not edit or add to this file if you wish to upgrade this module to newer
17	+ * versions in the future.
18	+ *
19	+ * @category IG
20	+ * @package IG_LightBox
21	+ * @copyright Copyright (c) 2010-2011 IDEALIAGroup srl (http://www.idealiagroup.com)
22	+ * @license http://opensource.org/licenses/osl-3.0.php Open Software License (OSL 3.0)
23	+ * @author Riccardo Tempesta <tempesta@idealiagroup.com>
24	+ */
25	+
26	+ /* BEGIN: Configurable parameters */
27	+ var ig_lightbox_wrap_images = 1;
28	+ var ig_lightbox_main_img = 0;
29	+ var ig_lightbox_img_border = 10;
30	+ var ig_lightbox_cmd_box_height = 32;
31	+ var ig_lightbox_initial_width = 100;
32	+ var ig_lightbox_initial_height = 100;
33	+ var ig_lightbox_background_opactiy = 0.8;
34	+ var ig_lightbox_imagebox_opactiy = 1.0;
35	+ var ig_lightbox_toolbar_opacity = 0.8;
36	+ var ig_lightbox_background_color = '#000000';
37	+ var ig_lightbox_imagebox_color = '#000000';
38	+ var ig_lightbox_toolbar_color = '#000000';
39	+ var ig_lightbox_toolbar_text_size = 12;
40	+ var ig_lightbox_toolbar_text_font = 'Verdana';
41	+ var ig_lightbox_toolbar_text_color = '#ffffff';
42	+ var ig_lightbox_border_size = 1;
43	+ var ig_lightbox_border_color = '#909090';
44	+ var ig_lightbox_fade_in_duration = 1.0;
45	+ var ig_lightbox_fade_out_duration = 1.0;
46	+ var ig_lightbox_image_resize_duration = 1.0;
47	+ var ig_lightbox_image_swap_duration = 1.0;
48	+ /* END: Configurable parameters */
49	+
50	+ var ig_lightbox_img_sequence = new Array();
51	+ var ig_lightbox_img_labels = new Array();
52	+ var ig_lightbox_cur_image_n = -1;
53	+ var ig_lightbox_win_is_open = false;
54	+ var ig_lightbox_commands_shown = false;
55	+ var ig_lightbox_preload_done = false;
56	+
57	+ function ig_lightbox_prev()
58	+ {
59	+ ig_lightbox_cur_image_n--;
60	+ if (ig_lightbox_cur_image_n<0) ig_lightbox_cur_image_n=ig_lightbox_img_sequence.length-1;
61	+
62	+ ig_lightbox_show(ig_lightbox_cur_image_n);
63	+ }
64	+
65	+ function ig_lightbox_next()
66	+ {
67	+ ig_lightbox_cur_image_n++;
68	+ if (ig_lightbox_cur_image_n>=ig_lightbox_img_sequence.length) ig_lightbox_cur_image_n=0;
69	+
70	+ ig_lightbox_show(ig_lightbox_cur_image_n);
71	+ }
72	+
73	+ function ig_lightbox_hide()
74	+ {
75	+ $('ig-lightbox-image-commands').setStyle({ visibility : 'hidden' });
76	+ $('ig-lightbox-image-close').setStyle({ display : 'none' });
77	+
78	+ new Effect.Opacity('ig-lightbox-image', {
79	+ duration : ig_lightbox_fade_out_duration,
80	+ from : ig_lightbox_imagebox_opactiy,
81	+ to : 0.0,
82	+ afterFinish : function (effect) {
83	+ ig_lightbox_reset();
84	+ }
85	+ });
86	+
87	+ new Effect.Opacity('ig-lightbox-back', {
88	+ duration : ig_lightbox_fade_out_duration,
89	+ from : ig_lightbox_background_opactiy,
90	+ to : 0.0
91	+ });
92	+
93	+ $('ig-lightbox-back').setStyle({
94	+ width : '10px',
95	+ height : '10px'
96	+ });
97	+
98	+ new Effect.Fade('ig-lightbox-image-src', {
99	+ duration : ig_lightbox_fade_out_duration
100	+ });
101	+
102	+ $('ig-lightbox-image-commands-label-td').setStyle({
103	+ width : '10px'
104	+ });
105	+
106	+ document.body.style.overflowX="auto";
107	+ }
108	+
109	+ function ig_lightbox_show(n)
110	+ {
111	+ if (!ig_lightbox_img_sequence.length) return;
112	+
113	+ if (n<0) n=ig_lightbox_main_img;
114	+
115	+ document.body.style.overflowX="hidden";
116	+
117	+ // if (typeof(window.innerHeight) == "undefined")
118	+ // {
119	+ // var win_width = document.documentElement.clientWidth;
120	+ // var win_height = document.documentElement.clientHeight;
121	+ // var win_height2 = document.documentElement.offsetHeight;
122	+ // vvar win_height2 = document.getElementsByTagName('body')[0].clientHeight
123	+ //
124	+ // }
125	+ // else
126	+ // {
127	+ // var win_width = window.innerWidth;
128	+ // var win_height = Math.max(window.innerHeight, document.documentElement.offsetHeight);
129	+ // var win_height2 = Math.max(window.innerHeight, document.documentElement.offsetHeight);
130	+ // }
131	+
132	+ var win_width = document.getElementsByTagName('body')[0].clientWidth;
133	+ var win_height = document.documentElement.clientHeight;
134	+ var win_height2 = Math.max(document.documentElement.offsetHeight, win_height);
135	+
136	+ var img_loader = new Image();
137	+
138	+ img_loader.onload=function ()
139	+ {
140	+ var img_height = img_loader.height;
141	+ var img_width = img_loader.width;
142	+
143	+ ig_lightbox_cur_image_n = n;
144	+
145	+ if (!ig_lightbox_wrap_images)
146	+ {
147	+ $('ig-lightbox-next').setStyle({
148	+ 'display': ((ig_lightbox_cur_image_n == ig_lightbox_img_sequence.length - 1) ? 'none' : 'block')
149	+ })
150	+ $('ig-lightbox-prev').setStyle({
151	+ 'display': ((ig_lightbox_cur_image_n == 0) ? 'none' : 'block')
152	+ })
153	+ }
154	+
155	+ if (ig_lightbox_win_is_open)
156	+ {
157	+ new Effect.Fade('ig-lightbox-image-src',{
158	+ duration : ig_lightbox_image_swap_duration/2,
159	+ afterFinish : function (effect) {
160	+
161	+ new Effect.Morph('ig-lightbox-image', {
162	+ duration : ig_lightbox_image_resize_duration,
163	+ style :
164	+ 'width : '+img_width+'px;'+
165	+ 'height : '+img_height+'px;'+
166	+ 'left : '+Math.floor(((win_width-img_width)/2)-2)+'px;'+
167	+ 'top : '+Math.floor(((win_height-img_height)/2)-1)+'px',
168	+ afterFinish : function (effect) {
169	+ $('ig-lightbox-image-src').src = ig_lightbox_img_sequence[ig_lightbox_cur_image_n];
170	+
171	+ $('ig-lightbox-image-src').setStyle({
172	+ left : Math.floor((win_width-img_width)/2+ig_lightbox_img_border+1)+'px',
173	+ top : Math.floor((win_height-img_height)/2+ig_lightbox_img_border+1)+'px',
174	+ width : img_width+'px',
175	+ height : img_height+'px'
176	+ });
177	+
178	+ new Effect.Fade('image-label', {
179	+ duration : ig_lightbox_image_swap_duration/2,
180	+ afterFinish : function (effect) {
181	+ $('image-label').innerHTML = ig_lightbox_img_labels[ig_lightbox_cur_image_n];
182	+
183	+ new Effect.Appear('image-label', {
184	+ duration : ig_lightbox_image_swap_duration/2
185	+ });
186	+ }
187	+ });
188	+
189	+ new Effect.Appear('ig-lightbox-image-src',{
190	+ duration : ig_lightbox_image_swap_duration/2
191	+ });
192	+ }
193	+ });
194	+
195	+ var img_left = Math.floor((win_width-img_width)/2);
196	+ var img_top = Math.floor((win_height-img_height)/2);
197	+
198	+ if (!ig_lightbox_commands_shown)
199	+ {
200	+ $('ig-lightbox-image-commands').setStyle({
201	+ width : img_width+'px',
202	+ left : Math.floor(img_left+ig_lightbox_img_border+1)+'px',
203	+ top : Math.floor(img_top+img_height-ig_lightbox_cmd_box_height+ig_lightbox_img_border)+'px'
204	+ });
205	+
206	+ $('ig-lightbox-image-commands-label-td').setStyle({
207	+ width : '100%'
208	+ });
209	+
210	+ $('ig-lightbox-image-close').setStyle({
211	+ left : Math.floor(img_left+img_width+(ig_lightbox_img_border*2)-($('ig-lightbox-image-close-img').width/2))+'px',
212	+ top : Math.floor(img_top-($('ig-lightbox-image-close-img').height/2))+'px'
213	+ });
214	+
215	+ $('ig-lightbox-image-commands').setStyle({ visibility : 'visible' });
216	+ new Effect.Opacity('ig-lightbox-image-commands', {
217	+ duration : ig_lightbox_image_resize_duration+ig_lightbox_fade_in_duration,
218	+ from : 0.0,
219	+ to : ig_lightbox_toolbar_opacity
220	+ });
221	+
222	+ new Effect.Appear('ig-lightbox-image-close', {
223	+ duration : ig_lightbox_image_resize_duration+ig_lightbox_fade_in_duration
224	+ });
225	+
226	+ ig_lightbox_commands_shown=true;
227	+ }
228	+ else
229	+ {
230	+ new Effect.Morph('ig-lightbox-image-commands', {
231	+ style :
232	+ 'width : '+img_width+'px;'+
233	+ 'left : '+Math.floor((win_width-img_width)/2+ig_lightbox_img_border+1)+'px;'+
234	+ 'top : '+Math.floor(img_top+img_height-ig_lightbox_cmd_box_height+ig_lightbox_img_border)+'px',
235	+ duration : ig_lightbox_image_resize_duration
236	+ });
237	+
238	+ new Effect.Morph('ig-lightbox-image-close', {
239	+ style :
240	+ 'left : '+Math.floor(img_left+img_width+(ig_lightbox_img_border*2)-($('ig-lightbox-image-close-img').width/2))+'px;'+
241	+ 'top : '+Math.floor(img_top-($('ig-lightbox-image-close-img').height/2))+'px;',
242	+ duration : ig_lightbox_image_resize_duration
243	+ });
244	+ }
245	+ }
246	+ });
247	+
248	+
249	+ }
250	+ else
251	+ {
252	+ $('ig-lightbox-image').setStyle({
253	+ left : Math.floor((win_width-ig_lightbox_initial_width)/2)+'px',
254	+ top : Math.floor((win_height-ig_lightbox_initial_height)/2)+'px'
255	+ });
256	+
257	+ $('ig-lightbox-image-commands').setStyle({
258	+ height : ig_lightbox_cmd_box_height+'px'
259	+ });
260	+
261	+ $('ig-lightbox-image').setStyle({ visibility : 'visible' });
262	+ new Effect.Opacity('ig-lightbox-image', {
263	+ duration : ig_lightbox_fade_in_duration,
264	+ from : 0.0,
265	+ to : ig_lightbox_imagebox_opactiy
266	+ });
267	+
268	+ ig_lightbox_win_is_open=true;
269	+ ig_lightbox_show(n);
270	+ }
271	+ }
272	+
273	+ if (ig_lightbox_win_is_open)
274	+ {
275	+ if (!ig_lightbox_preload_done)
276	+ {
277	+ new Effect.Opacity('ig-lightbox-loading', {
278	+ duration: ig_lightbox_fade_in_duration,
279	+ from: 1.0,
280	+ to: 0.0
281	+ });
282	+
283	+ $('ig-lightbox-loading').setStyle({
284	+ visibility : 'hidden',
285	+ left : -1000,
286	+ top : -1000
287	+ });
288	+
289	+ for (var i=0; i<ig_lightbox_img_sequence.length; i++)
290	+ {
291	+ var foo = new Image();
292	+ foo.src = ig_lightbox_img_sequence[i];
293	+ }
294	+
295	+ ig_lightbox_preload_done = true;
296	+ }
297	+ }
298	+ else
299	+ {
300	+ $('ig-lightbox-back').setStyle({
301	+ width: win_width + 'px',
302	+ height: win_height2 + 'px',
303	+ visibility: 'visible'
304	+ });
305	+
306	+ new Effect.Opacity('ig-lightbox-back', {
307	+ duration: ig_lightbox_fade_in_duration,
308	+ from: 0.0,
309	+ to: ig_lightbox_background_opactiy
310	+ });
311	+
312	+ $('ig-lightbox-loading').setStyle({
313	+ left: Math.floor((win_width-$('ig-lightbox-loading').getWidth())/2)+'px',
314	+ top: Math.floor((win_height-$('ig-lightbox-loading').getHeight())/2)+'px',
315	+ visibility: 'visible'
316	+ });
317	+
318	+ if (!ig_lightbox_preload_done)
319	+ {
320	+ new Effect.Opacity('ig-lightbox-loading', {
321	+ duration: ig_lightbox_fade_in_duration,
322	+ from: 0.0,
323	+ to: 1.0
324	+ });
325	+ }
326	+ }
327	+
328	+ img_loader.src = ig_lightbox_img_sequence[n];
329	+ }
330	+
331	+ function ig_lightbox_reset()
332	+ {
333	+ ig_lightbox_win_is_open = false;
334	+ ig_lightbox_commands_shown = false;
335	+
336	+ $('ig-lightbox-image').setStyle({
337	+ padding : ig_lightbox_img_border+'px',
338	+ width : ig_lightbox_initial_width+'px',
339	+ height : ig_lightbox_initial_height+'px',
340	+ border : ig_lightbox_border_size+'px solid '+ig_lightbox_border_color
341	+ });
342	+
343	+ $('ig-lightbox-image').setStyle({
344	+ visibility : 'hidden',
345	+ background : ig_lightbox_imagebox_color,
346	+ opacity : 0.0
347	+ });
348	+ $('ig-lightbox-image-commands').setStyle({
349	+ visibility : 'hidden',
350	+ background : ig_lightbox_toolbar_color,
351	+ opacity : 0.0,
352	+ 'font-size' : ig_lightbox_toolbar_text_size,
353	+ 'font-family' : ig_lightbox_toolbar_text_font,
354	+ color : ig_lightbox_toolbar_text_color
355	+ });
356	+ $('ig-lightbox-image-close').setStyle({ display : 'none' });
357	+ $('ig-lightbox-back').setStyle({
358	+ visibility : 'hidden',
359	+ background : ig_lightbox_background_color,
360	+ opacity : 0.0
361	+ });
362	+
363	+ $('ig-lightbox-loading').setStyle({
364	+ visibility : 'hidden',
365	+ opacity : 0.0,
366	+ left : -1000,
367	+ top : -1000
368	+ });
369	+
370	+ $('ig-lightbox-image-src').src="";
371	+ new Effect.Fade('ig-lightbox-image-src', {
372	+ duration : 0.1
373	+ });
374	+
375	+ $('ig-lightbox-back').setStyle({
376	+ width : '10px',
377	+ height : '10px'
378	+ });
379	+
380	+ $('ig-lightbox-image-commands-label-td').setStyle({
381	+ width : '10px'
382	+ });
383	+ }
384	+
385	+ function ig_lightbox_init()
386	+ {
387	+ ig_lightbox_reset();
388	+ Event.observe($('ig-lightbox-back'), 'click', function () {
389	+ ig_lightbox_hide();
390	+ });
391	+
392	+ Event.observe(window, 'keypress', function (e) {
393	+ if (!ig_lightbox_win_is_open) return true;
394	+
395	+ if (e.keyCode == 27) ig_lightbox_hide();
396	+ });
397	+
398	+ ig_lightbox_wrap_images = parseInt(ig_lightbox_wrap_images);
399	+ ig_lightbox_main_img = parseInt(ig_lightbox_main_img);
400	+ ig_lightbox_img_border = parseInt(ig_lightbox_img_border);
401	+ ig_lightbox_cmd_box_height = parseInt(ig_lightbox_cmd_box_height);
402	+ ig_lightbox_initial_width = parseInt(ig_lightbox_initial_width);
403	+ ig_lightbox_initial_height = parseInt(ig_lightbox_initial_height);
404	+ ig_lightbox_background_opactiy = parseFloat(ig_lightbox_background_opactiy);
405	+ ig_lightbox_imagebox_opactiy = parseFloat(ig_lightbox_imagebox_opactiy);
406	+ ig_lightbox_toolbar_opacity = parseFloat(ig_lightbox_toolbar_opacity);
407	+ ig_lightbox_toolbar_text_size = parseInt(ig_lightbox_toolbar_text_size);
408	+ ig_lightbox_border_size = parseInt(ig_lightbox_border_size);
409	+ ig_lightbox_fade_in_duration = parseFloat(ig_lightbox_fade_in_duration);
410	+ ig_lightbox_fade_out_duration = parseFloat(ig_lightbox_fade_out_duration);
411	+ ig_lightbox_image_resize_duration = parseFloat(ig_lightbox_image_resize_duration);
412	+ ig_lightbox_image_swap_duration = parseFloat(ig_lightbox_image_swap_duration);
413	+ }
414	+
415	+ Event.observe(window, 'load', function() {
416	+ ig_lightbox_init();
417	+ });

skin/frontend/default/default/css/ig_lightbox.css CHANGED Viewed

	@@ -35,6 +35,7 @@
35	position: absolute;
36	text-align: center;
37	z-index: 1100;

38	/* opacity: 0; */
39	}
40
	@@ -51,7 +52,19 @@
51	#ig-lightbox-image-close
52	{
53	position: absolute;
54	- left : ~~0px~~;
55	- top : ~~0px~~;
56	z-index: 2000;
57	- }


35	position: absolute;
36	text-align: center;
37	z-index: 1100;
38	+ visibility: hidden;
39	/* opacity: 0; */
40	}
41

52	#ig-lightbox-image-close
53	{
54	position: absolute;
55	+ left : -1000px;
56	+ top : -1000px;
57	z-index: 2000;
58	+ }
59	+
60	+ #ig-lightbox-loading
61	+ {
62	+ position: absolute;
63	+ background: #000000 url(../images/ig_lightbox/loader.gif) no-repeat center center;
64	+ border: 1px solid #8e8e8e;
65	+ z-index: 2100;
66	+ width: 200px;
67	+ height: 200px;
68	+ visibility: hidden;
69	+ }
70	+

skin/frontend/default/default/images/ig_lightbox/loader.gif ADDED Viewed

Binary file

skin/frontend/default/default/js/ig_lightbox.js CHANGED Viewed

@@ -32,7 +32,7 @@ var ig_lightbox_initial_width			= 100;
             var ig_lightbox_initial_height			= 100;
             var ig_lightbox_background_opactiy		= 0.8;
             var ig_lightbox_imagebox_opactiy		= 1.0;
-            -
            var ig_lightbox_toolbar_opactiy			= 0.8;
             var ig_lightbox_background_color		= '#000000';
             var ig_lightbox_imagebox_color			= '#000000';
             var ig_lightbox_toolbar_color			= '#000000';
@@ -52,6 +52,7 @@ var ig_lightbox_img_labels		= new Array();
             var ig_lightbox_cur_image_n		= -1;
             var ig_lightbox_win_is_open		= false;
             var ig_lightbox_commands_shown	= false;
             function ig_lightbox_prev()
+            {
@@ -169,7 +170,9 @@ function ig_lightbox_show(n)
             							$('ig-lightbox-image-src').setStyle({
             								left 	: Math.floor((win_width-img_width)/2+ig_lightbox_img_border+1)+'px',
-            -
            								top 	: Math.floor((win_height-img_height)/2+ig_lightbox_img_border+1)+'px'
             							});
             							new Effect.Fade('image-label', {
@@ -213,7 +216,7 @@ function ig_lightbox_show(n)
             						new Effect.Opacity('ig-lightbox-image-commands', {
             							duration	: ig_lightbox_image_resize_duration+ig_lightbox_fade_in_duration,
             							from		: 0.0,
-            -
            							to			: ig_lightbox_toolbar_opactiy
             						});
             						new Effect.Appear('ig-lightbox-image-close', {
@@ -251,22 +254,10 @@ function ig_lightbox_show(n)
             				top		: Math.floor((win_height-ig_lightbox_initial_height)/2)+'px'
             			});
-            -
            			$('ig-lightbox-back').setStyle({
-            -
            				width		: win_width+'px',
-            -
            				height		: win_height2+'px',
-            -
            				visibility	: 'visible'
-            -
            			});
-            -
             			$('ig-lightbox-image-commands').setStyle({
             				height	: ig_lightbox_cmd_box_height+'px'
             			});
-            -
            			new Effect.Opacity('ig-lightbox-back', {
-            -
            				duration	: ig_lightbox_fade_in_duration,
-            -
            				from		: 0.0,
-            -
            				to			: ig_lightbox_background_opactiy
-            -
            			});
-            -
             			$('ig-lightbox-image').setStyle({ visibility : 'visible' });
             			new Effect.Opacity('ig-lightbox-image', {
             				duration	: ig_lightbox_fade_in_duration,
@@ -278,8 +269,63 @@ function ig_lightbox_show(n)
             			ig_lightbox_show(n);
+            		}
+            	}
-            -
            	img_loader.src	= ig_lightbox_img_sequence[n];
+            }
             function ig_lightbox_reset()
@@ -313,6 +359,13 @@ function ig_lightbox_reset()
             		background	: ig_lightbox_background_color,
             		opacity		: 0.0
             	});
             	$('ig-lightbox-image-src').src="";
             	new Effect.Fade('ig-lightbox-image-src', {
@@ -341,6 +394,22 @@ function ig_lightbox_init()
             		if (e.keyCode == 27) ig_lightbox_hide();
             	});
+            }
             Event.observe(window, 'load', function() {


32	var ig_lightbox_initial_height = 100;
33	var ig_lightbox_background_opactiy = 0.8;
34	var ig_lightbox_imagebox_opactiy = 1.0;
35	+ var ig_lightbox_toolbar_opacity = 0.8;
36	var ig_lightbox_background_color = '#000000';
37	var ig_lightbox_imagebox_color = '#000000';
38	var ig_lightbox_toolbar_color = '#000000';

52	var ig_lightbox_cur_image_n = -1;
53	var ig_lightbox_win_is_open = false;
54	var ig_lightbox_commands_shown = false;
55	+ var ig_lightbox_preload_done = false;
56
57	function ig_lightbox_prev()
58	{

170
171	$('ig-lightbox-image-src').setStyle({
172	left : Math.floor((win_width-img_width)/2+ig_lightbox_img_border+1)+'px',
173	+ top : Math.floor((win_height-img_height)/2+ig_lightbox_img_border+1)+'px',
174	+ width : img_width+'px',
175	+ height : img_height+'px'
176	});
177
178	new Effect.Fade('image-label', {

216	new Effect.Opacity('ig-lightbox-image-commands', {
217	duration : ig_lightbox_image_resize_duration+ig_lightbox_fade_in_duration,
218	from : 0.0,
219	+ to : ig_lightbox_toolbar_opacity
220	});
221
222	new Effect.Appear('ig-lightbox-image-close', {

254	top : Math.floor((win_height-ig_lightbox_initial_height)/2)+'px'
255	});
256






257	$('ig-lightbox-image-commands').setStyle({
258	height : ig_lightbox_cmd_box_height+'px'
259	});
260






261	$('ig-lightbox-image').setStyle({ visibility : 'visible' });
262	new Effect.Opacity('ig-lightbox-image', {
263	duration : ig_lightbox_fade_in_duration,

269	ig_lightbox_show(n);
270	}
271	}
272	+
273	+ if (ig_lightbox_win_is_open)
274	+ {
275	+ if (!ig_lightbox_preload_done)
276	+ {
277	+ new Effect.Opacity('ig-lightbox-loading', {
278	+ duration: ig_lightbox_fade_in_duration,
279	+ from: 1.0,
280	+ to: 0.0
281	+ });
282	+
283	+ $('ig-lightbox-loading').setStyle({
284	+ visibility : 'hidden',
285	+ left : -1000,
286	+ top : -1000
287	+ });
288	+
289	+ for (var i=0; i<ig_lightbox_img_sequence.length; i++)
290	+ {
291	+ var foo = new Image();
292	+ foo.src = ig_lightbox_img_sequence[i];
293	+ }
294	+
295	+ ig_lightbox_preload_done = true;
296	+ }
297	+ }
298	+ else
299	+ {
300	+ $('ig-lightbox-back').setStyle({
301	+ width: win_width + 'px',
302	+ height: win_height2 + 'px',
303	+ visibility: 'visible'
304	+ });
305	+
306	+ new Effect.Opacity('ig-lightbox-back', {
307	+ duration: ig_lightbox_fade_in_duration,
308	+ from: 0.0,
309	+ to: ig_lightbox_background_opactiy
310	+ });
311	+
312	+ $('ig-lightbox-loading').setStyle({
313	+ left: Math.floor((win_width-$('ig-lightbox-loading').getWidth())/2)+'px',
314	+ top: Math.floor((win_height-$('ig-lightbox-loading').getHeight())/2)+'px',
315	+ visibility: 'visible'
316	+ });
317	+
318	+ if (!ig_lightbox_preload_done)
319	+ {
320	+ new Effect.Opacity('ig-lightbox-loading', {
321	+ duration: ig_lightbox_fade_in_duration,
322	+ from: 0.0,
323	+ to: 1.0
324	+ });
325	+ }
326	+ }
327
328	+ img_loader.src = ig_lightbox_img_sequence[n];
329	}
330
331	function ig_lightbox_reset()

359	background : ig_lightbox_background_color,
360	opacity : 0.0
361	});
362	+
363	+ $('ig-lightbox-loading').setStyle({
364	+ visibility : 'hidden',
365	+ opacity : 0.0,
366	+ left : -1000,
367	+ top : -1000
368	+ });
369
370	$('ig-lightbox-image-src').src="";
371	new Effect.Fade('ig-lightbox-image-src', {

394
395	if (e.keyCode == 27) ig_lightbox_hide();
396	});
397	+
398	+ ig_lightbox_wrap_images = parseInt(ig_lightbox_wrap_images);
399	+ ig_lightbox_main_img = parseInt(ig_lightbox_main_img);
400	+ ig_lightbox_img_border = parseInt(ig_lightbox_img_border);
401	+ ig_lightbox_cmd_box_height = parseInt(ig_lightbox_cmd_box_height);
402	+ ig_lightbox_initial_width = parseInt(ig_lightbox_initial_width);
403	+ ig_lightbox_initial_height = parseInt(ig_lightbox_initial_height);
404	+ ig_lightbox_background_opactiy = parseFloat(ig_lightbox_background_opactiy);
405	+ ig_lightbox_imagebox_opactiy = parseFloat(ig_lightbox_imagebox_opactiy);
406	+ ig_lightbox_toolbar_opacity = parseFloat(ig_lightbox_toolbar_opacity);
407	+ ig_lightbox_toolbar_text_size = parseInt(ig_lightbox_toolbar_text_size);
408	+ ig_lightbox_border_size = parseInt(ig_lightbox_border_size);
409	+ ig_lightbox_fade_in_duration = parseFloat(ig_lightbox_fade_in_duration);
410	+ ig_lightbox_fade_out_duration = parseFloat(ig_lightbox_fade_out_duration);
411	+ ig_lightbox_image_resize_duration = parseFloat(ig_lightbox_image_resize_duration);
412	+ ig_lightbox_image_swap_duration = parseFloat(ig_lightbox_image_swap_duration);
413	}
414
415	Event.observe(window, 'load', function() {