J2T_LIGHTBOX - Version 0.1.0

Version Notes

This extension uses Lightbox2 library to function.

Release Info

Developer	Magento Core Team
Extension	J2T_LIGHTBOX
Version	0.1.0
Comparing to
See all releases

Version 0.1.0

Files changed (22) hide show

app/code/community/J2t/Lightbox/Block/Media.php +113 -0
app/code/community/J2t/Lightbox/Helper/Data.php +21 -0
app/code/community/J2t/Lightbox/Model/Feed.php +103 -0
app/code/community/J2t/Lightbox/Model/Observer.php +14 -0
app/code/community/J2t/Lightbox/etc/config.xml +145 -0
app/code/community/J2t/Lightbox/etc/system.xml +112 -0
app/design/frontend/default/default/layout/j2tlightbox.xml +25 -0
app/design/frontend/default/default/template/j2tlightbox/media.phtml +65 -0
app/etc/modules/J2t_Lightbox.xml +9 -0
package.xml +20 -0
skin/frontend/default/default/css/j2t_lightbox.css +32 -0
skin/frontend/default/default/images/j2t_lightbox_images/bullet.gif +0 -0
skin/frontend/default/default/images/j2t_lightbox_images/close.gif +0 -0
skin/frontend/default/default/images/j2t_lightbox_images/closelabel.gif +0 -0
skin/frontend/default/default/images/j2t_lightbox_images/donate-button.gif +0 -0
skin/frontend/default/default/images/j2t_lightbox_images/download-icon.gif +0 -0
skin/frontend/default/default/images/j2t_lightbox_images/image-1.jpg +0 -0
skin/frontend/default/default/images/j2t_lightbox_images/loading.gif +0 -0
skin/frontend/default/default/images/j2t_lightbox_images/nextlabel.gif +0 -0
skin/frontend/default/default/images/j2t_lightbox_images/prevlabel.gif +0 -0
skin/frontend/default/default/images/j2t_lightbox_images/thumb-1.jpg +0 -0
skin/frontend/default/default/js/lightbox.js +496 -0

app/code/community/J2t/Lightbox/Block/Media.php ADDED Viewed

	@@ -0,0 +1,113 @@


1	+ <?php
2	+ /**
3	+ * J2T Lightbox
4	+ *
5	+ * NOTICE OF LICENSE
6	+ *
7	+ * This source file is subject to the Open Software License (OSL 3.0)
8	+ * that is 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@j2t-design.com so we can send you a copy immediately.
13	+ *
14	+ * @category Magento extension
15	+ * @package J2T Lightbox
16	+ * @copyright Copyright (c) 2011 J2T DESIGN. (http://www.j2t-design.com)
17	+ * @license http://opensource.org/licenses/osl-3.0.php Open Software License (OSL 3.0)
18	+ */
19	+ class J2t_Lightbox_Block_Media extends Mage_Catalog_Block_Product_View_Media
20	+ {
21	+ public function getCurrentMediaUrl(){
22	+ return Mage::getDesign()->getSkinUrl('images/j2t_lightbox_images');
23	+ }
24	+
25	+ public function getOverlayOpacity(){
26	+ $txt_temp = Mage::getStoreConfig('j2tlightbox/default/j2t_lightbox_overlay_opacity', Mage::app()->getStore()->getId());
27	+ $value = ($txt_temp <= 1) ? $txt_temp : 1;
28	+ return $value;
29	+ }
30	+
31	+ public function getAnimateValue(){
32	+ $value = (Mage::getStoreConfig('j2tlightbox/default/j2t_lightbox_animate', Mage::app()->getStore()->getId())) ? 'true' : 'false';
33	+ return $value;
34	+ }
35	+
36	+ public function getResizeSpeed(){
37	+ return Mage::getStoreConfig('j2tlightbox/default/j2t_lightbox_resize_speed', Mage::app()->getStore()->getId());
38	+ }
39	+
40	+ public function getBorderSize(){
41	+ return Mage::getStoreConfig('j2tlightbox/default/j2t_lightbox_border_size', Mage::app()->getStore()->getId());
42	+ }
43	+
44	+ public function getImageLabelText(){
45	+ $txt_temp = Mage::getStoreConfig('j2tlightbox/default/j2t_lightbox_label_image', Mage::app()->getStore()->getId());
46	+ return Mage::helper('j2tlightbox/data')->__($txt_temp);
47	+ }
48	+
49	+ public function getImageLabelOf(){
50	+ $txt_temp = Mage::getStoreConfig('j2tlightbox/default/j2t_lightbox_label_of', Mage::app()->getStore()->getId());
51	+ return Mage::helper('j2tlightbox')->__($txt_temp);
52	+ }
53	+
54	+ public function getPreviewImageUrl(){
55	+
56	+ if ($size_preview = Mage::getStoreConfig('j2tlightbox/default/j2t_lightbox_preview_size', Mage::app()->getStore()->getId())){
57	+ $arr_size = explode('x',trim($size_preview));
58	+ if (is_numeric(trim($arr_size[0]))){
59	+ if (is_numeric(trim($arr_size[1]))){
60	+ return Mage::helper('catalog/image')->init($this->getProduct(), 'image')->resize(trim($arr_size[0]),trim($arr_size[1]));
61	+ }
62	+ }
63	+ }
64	+
65	+ return Mage::helper('catalog/image')->init($this->getProduct(), 'image')->resize(265);
66	+
67	+
68	+ return Mage::helper('catalog/image')->init($this->getProduct(), 'image');
69	+ }
70	+
71	+ public function getFullImageUrl(){
72	+ if ($size = Mage::getStoreConfig('j2tlightbox/default/j2t_lightbox_big_img_size', Mage::app()->getStore()->getId())){
73	+ if ($size != "*"){
74	+ $arr_size = explode('x',trim($size));
75	+ if (is_numeric(trim($arr_size[0]))){
76	+ if (is_numeric(trim($arr_size[1]))){
77	+ return Mage::helper('catalog/image')->init($this->getProduct(), 'image')->resize(trim($arr_size[0]),trim($arr_size[1]));
78	+ }
79	+ }
80	+ }
81	+ }
82	+
83	+ return Mage::helper('catalog/image')->init($this->getProduct(), 'image');
84	+ }
85	+
86	+ public function getFullThumbnailUrl($_image){
87	+ if ($size = Mage::getStoreConfig('j2tlightbox/default/j2t_lightbox_big_img_size', Mage::app()->getStore()->getId())){
88	+ if ($size != "*"){
89	+ $arr_size = explode('x',trim($size));
90	+ if (is_numeric(trim($arr_size[0]))){
91	+ if (is_numeric(trim($arr_size[1]))){
92	+ return Mage::helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(trim($arr_size[0]),trim($arr_size[1]));
93	+ }
94	+ }
95	+ }
96	+
97	+ }
98	+ return Mage::helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile());
99	+ }
100	+
101	+
102	+ public function getThumbnailUrl($_image){
103	+ if ($size = Mage::getStoreConfig('j2tlightbox/default/j2t_lightbox_thumbnail_size', Mage::app()->getStore()->getId())){
104	+ $arr_size = explode('x',trim($size));
105	+ if (is_numeric(trim($arr_size[0]))){
106	+ if (is_numeric(trim($arr_size[1]))){
107	+ return Mage::helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(trim($arr_size[0]),trim($arr_size[1]));
108	+ }
109	+ }
110	+ }
111	+ return Mage::helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(56);
112	+ }
113	+ }

app/code/community/J2t/Lightbox/Helper/Data.php ADDED Viewed

	@@ -0,0 +1,21 @@


1	+ <?php
2	+ /**
3	+ * J2T Lightbox
4	+ *
5	+ * NOTICE OF LICENSE
6	+ *
7	+ * This source file is subject to the Open Software License (OSL 3.0)
8	+ * that is 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@j2t-design.com so we can send you a copy immediately.
13	+ *
14	+ * @category Magento extension
15	+ * @package J2T Lightbox
16	+ * @copyright Copyright (c) 2011 J2T DESIGN. (http://www.j2t-design.com)
17	+ * @license http://opensource.org/licenses/osl-3.0.php Open Software License (OSL 3.0)
18	+ */
19	+ class J2t_Lightbox_Helper_Data extends Mage_Core_Helper_Abstract {
20	+
21	+ }

app/code/community/J2t/Lightbox/Model/Feed.php ADDED Viewed

	@@ -0,0 +1,103 @@


1	+ <?php
2	+ Class J2t_Lightbox_Model_Feed extends Mage_AdminNotification_Model_Feed {
3	+
4	+ const XML_FEED_URL_PATH_J2T = 'system/j2tlightbox/feed_url_j2t';
5	+ protected $_feedUrlJ2t;
6	+
7	+ public function checkUpdate()
8	+ {
9	+ if (($this->getFrequency() + $this->getLastUpdate()) > time()) {
10	+ return $this;
11	+ }
12	+
13	+ $feedData = array();
14	+
15	+ $feedXml = $this->getFeedData();
16	+
17	+ if ($feedXml && $feedXml->channel && $feedXml->channel->item) {
18	+ foreach ($feedXml->channel->item as $item) {
19	+ $feedData[] = array(
20	+ 'severity' => (int)$item->severity,
21	+ 'date_added' => $this->getDate((string)$item->pubDate),
22	+ 'title' => (string)$item->title,
23	+ 'description' => (string)$item->description,
24	+ 'url' => (string)$item->link,
25	+ );
26	+ }
27	+
28	+
29	+ if ($feedData) {
30	+ Mage::getModel('adminnotification/inbox')->parse(array_reverse($feedData));
31	+ }
32	+
33	+ }
34	+
35	+ $this->setLastUpdate();
36	+
37	+ return $this;
38	+ }
39	+
40	+
41	+ /**
42	+ * Retrieve Last update time
43	+ *
44	+ * @return int
45	+ */
46	+ public function getLastUpdate()
47	+ {
48	+ return Mage::app()->loadCache('j2t_notifications_lastcheck');
49	+ }
50	+
51	+ /**
52	+ * Set last update time (now)
53	+ *
54	+ * @return Mage_AdminNotification_Model_Feed
55	+ */
56	+ public function setLastUpdate()
57	+ {
58	+ Mage::app()->saveCache(time(), 'j2t_notifications_lastcheck');
59	+ return $this;
60	+ }
61	+
62	+
63	+
64	+ public function getFeedUrl()
65	+ {
66	+ if (is_null($this->_feedUrlJ2t)) {
67	+ $this->_feedUrlJ2t = (Mage::getStoreConfigFlag(self::XML_USE_HTTPS_PATH) ? 'https://' : 'http://')
68	+ . Mage::getStoreConfig(self::XML_FEED_URL_PATH_J2T);
69	+ }
70	+ return $this->_feedUrlJ2t;
71	+ }
72	+
73	+
74	+ public function getFeedData()
75	+ {
76	+ $curl = new Varien_Http_Adapter_Curl();
77	+ $curl->setConfig(array(
78	+ 'timeout' => 3
79	+ ));
80	+
81	+ $curl->write(Zend_Http_Client::GET, $this->getFeedUrl(), '1.0');
82	+ $data = $curl->read();
83	+ if ($data === false) {
84	+ return false;
85	+ }
86	+ $data = preg_split('/^\r?$/m', $data, 2);
87	+ $data = trim($data[1]);
88	+ $curl->close();
89	+
90	+ try {
91	+ $xml = new SimpleXMLElement($data);
92	+ }
93	+ catch (Exception $e) {
94	+ return false;
95	+ }
96	+
97	+ return $xml;
98	+ }
99	+
100	+ }
101	+
102	+
103	+ ?>

app/code/community/J2t/Lightbox/Model/Observer.php ADDED Viewed

	@@ -0,0 +1,14 @@


1	+ <?php
2	+ class J2t_Lightbox_Model_Observer
3	+ {
4	+ public function preDispatch(Varien_Event_Observer $observer)
5	+ {
6	+ if (Mage::getSingleton('admin/session')->isLoggedIn()) {
7	+ $feedModel = Mage::getModel('j2tlightbox/feed');
8	+ /* @var $feedModel Mage_AdminNotification_Model_Feed */
9	+
10	+ $feedModel->checkUpdate();
11	+ }
12	+
13	+ }
14	+ }

app/code/community/J2t/Lightbox/etc/config.xml ADDED Viewed

	@@ -0,0 +1,145 @@


1	+ <?xml version="1.0"?>
2	+ <config>
3	+ <modules>
4	+ <J2t_Lightbox>
5	+ <version>0.1.0</version>
6	+ </J2t_Lightbox>
7	+ </modules>
8	+ <global>
9	+
10	+ <models>
11	+ <j2tlightbox>
12	+ <class>J2t_Lightbox_Model</class>
13	+ </j2tlightbox>
14	+ </models>
15	+ <blocks>
16	+ <j2tlightbox>
17	+ <class>J2t_Lightbox_Block</class>
18	+ </j2tlightbox>
19	+ </blocks>
20	+ <helpers>
21	+ <j2tlightbox>
22	+ <class>J2t_Lightbox_Helper</class>
23	+ </j2tlightbox>
24	+ </helpers>
25	+
26	+ </global>
27	+
28	+ <frontend>
29	+ <layout>
30	+ <updates>
31	+ <j2tlightbox>
32	+ <file>j2tlightbox.xml</file>
33	+ </j2tlightbox>
34	+ </updates>
35	+ </layout>
36	+ <translate>
37	+ <modules>
38	+ <J2t_Lightbox>
39	+ <files>
40	+ <default>j2t_lightbox.csv</default>
41	+ </files>
42	+ </J2t_Lightbox>
43	+ </modules>
44	+ </translate>
45	+
46	+ </frontend>
47	+
48	+ <frontend>
49	+ <routers>
50	+ <j2tlightbox>
51	+ <use>standard</use>
52	+ <args>
53	+ <module>J2t_Lightbox</module>
54	+ <frontName>j2tlightbox</frontName>
55	+ </args>
56	+ </j2tlightbox>
57	+ </routers>
58	+ </frontend>
59	+
60	+ <adminhtml>
61	+
62	+ <acl>
63	+ <resources>
64	+ <admin>
65	+ <children>
66	+ <catalog>
67	+ <children>
68	+ <j2tlightbox_adminform>
69	+ <title>Configuration</title>
70	+ </j2tlightbox_adminform>
71	+ </children>
72	+ </catalog>
73	+ </children>
74	+ </admin>
75	+ </resources>
76	+ </acl>
77	+
78	+
79	+ <acl>
80	+ <resources>
81	+ <admin>
82	+ <children>
83	+ <system>
84	+ <children>
85	+ <config>
86	+ <children>
87	+ <j2tlightbox>
88	+ <title>J2T Lightbox</title>
89	+ </j2tlightbox>
90	+ </children>
91	+ </config>
92	+ </children>
93	+ </system>
94	+ <customer>
95	+ <children>
96	+ <j2tlightbox translate="title">
97	+ <title>J2T Lightbox</title>
98	+ <sort_order>50</sort_order>
99	+ </j2tlightbox>
100	+ </children>
101	+ </customer>
102	+ </children>
103	+ </admin>
104	+ </resources>
105	+ </acl>
106	+
107	+ <events>
108	+ <controller_action_predispatch>
109	+ <observers>
110	+ <j2t_all>
111	+ <class>j2tlightbox/observer</class>
112	+ <method>preDispatch</method>
113	+ </j2t_all>
114	+ </observers>
115	+ </controller_action_predispatch>
116	+ </events>
117	+ </adminhtml>
118	+
119	+
120	+ <default>
121	+ <j2tlightbox>
122	+ <default>
123	+ <j2t_lightbox_big_img_size>800x600</j2t_lightbox_big_img_size>
124	+ <j2t_lightbox_preview_size>265x265</j2t_lightbox_preview_size>
125	+ <j2t_lightbox_thumbnail_size>50x50</j2t_lightbox_thumbnail_size>
126	+
127	+
128	+ <j2t_lightbox_overlay_opacity>0.8</j2t_lightbox_overlay_opacity>
129	+ <j2t_lightbox_animate>1</j2t_lightbox_animate>
130	+ <j2t_lightbox_resize_speed>7</j2t_lightbox_resize_speed>
131	+ <j2t_lightbox_border_size>10</j2t_lightbox_border_size>
132	+ <j2t_lightbox_label_image>Image</j2t_lightbox_label_image>
133	+ <j2t_lightbox_label_of>Of</j2t_lightbox_label_of>
134	+
135	+ </default>
136	+ </j2tlightbox>
137	+ <system>
138	+ <j2tlightbox>
139	+ <feed_url_j2t>j2t-design.net/notifications.rss</feed_url_j2t>
140	+ </j2tlightbox>
141	+ </system>
142	+ </default>
143	+
144	+ </config>
145	+

app/code/community/J2t/Lightbox/etc/system.xml ADDED Viewed

	@@ -0,0 +1,112 @@


1	+ <config>
2	+ <sections>
3	+ <j2tlightbox translate="label comment" module="j2tlightbox">
4	+ <tab>customer</tab>
5	+ <label>J2T Lightbox</label>
6	+ <frontend_type>text</frontend_type>
7	+ <sort_order>202</sort_order>
8	+ <show_in_default>1</show_in_default>
9	+ <show_in_website>1</show_in_website>
10	+ <show_in_store>1</show_in_store>
11	+ <groups>
12	+ <default translate="label comment" module="j2tlightbox">
13	+ <label>Configuration</label>
14	+ <frontend_type>text</frontend_type>
15	+ <sort_order>10</sort_order>
16	+ <show_in_default>1</show_in_default>
17	+ <show_in_website>1</show_in_website>
18	+ <show_in_store>1</show_in_store>
19	+
20	+ <fields>
21	+ <j2t_lightbox_big_img_size translate="label">
22	+ <label>Big image size</label>
23	+ <frontend_type>text</frontend_type>
24	+ <sort_order>10</sort_order>
25	+ <show_in_default>1</show_in_default>
26	+ <show_in_website>1</show_in_website>
27	+ <show_in_store>1</show_in_store>
28	+ <comment><![CDATA[Loading box size. e.g.: 800x600 (use * to use real image size)]]></comment>
29	+ </j2t_lightbox_big_img_size>
30	+ <j2t_lightbox_preview_size>
31	+ <label>Preview image size</label>
32	+ <frontend_type>text</frontend_type>
33	+ <sort_order>10</sort_order>
34	+ <show_in_default>1</show_in_default>
35	+ <show_in_website>1</show_in_website>
36	+ <show_in_store>1</show_in_store>
37	+ <comment><![CDATA[Loading box size. e.g.: 265x265]]></comment>
38	+ </j2t_lightbox_preview_size>
39	+ <j2t_lightbox_thumbnail_size translate="label">
40	+ <label>Thumbnail size</label>
41	+ <frontend_type>text</frontend_type>
42	+ <sort_order>30</sort_order>
43	+ <show_in_default>1</show_in_default>
44	+ <show_in_website>1</show_in_website>
45	+ <show_in_store>1</show_in_store>
46	+ <comment><![CDATA[Confirm box size. e.g.: 50x50]]></comment>
47	+ </j2t_lightbox_thumbnail_size>
48	+
49	+ <j2t_lightbox_overlay_opacity>
50	+ <label>Overlay opacity</label>
51	+ <frontend_type>text</frontend_type>
52	+ <sort_order>40</sort_order>
53	+ <show_in_default>1</show_in_default>
54	+ <show_in_website>1</show_in_website>
55	+ <show_in_store>1</show_in_store>
56	+ <validate>validate-zero-or-greater</validate>
57	+ <comment><![CDATA[From 0 to 1. e.g.: 0.8]]></comment>
58	+ </j2t_lightbox_overlay_opacity>
59	+ <j2t_lightbox_animate>
60	+ <label>Animate</label>
61	+ <frontend_type>select</frontend_type>
62	+ <source_model>adminhtml/system_config_source_yesno</source_model>
63	+ <sort_order>50</sort_order>
64	+ <show_in_default>1</show_in_default>
65	+ <show_in_website>1</show_in_website>
66	+ <show_in_store>1</show_in_store>
67	+ <comment><![CDATA[Animation effect when zooming the image.]]></comment>
68	+ </j2t_lightbox_animate>
69	+ <j2t_lightbox_resize_speed>
70	+ <label>Resize Speed</label>
71	+ <frontend_type>text</frontend_type>
72	+ <sort_order>60</sort_order>
73	+ <show_in_default>1</show_in_default>
74	+ <show_in_website>1</show_in_website>
75	+ <show_in_store>1</show_in_store>
76	+ <validate>validate-zero-or-greater</validate>
77	+ <comment><![CDATA[Resize speed in seconds. e.g.: 7]]></comment>
78	+ </j2t_lightbox_resize_speed>
79	+ <j2t_lightbox_border_size>
80	+ <label>Border Width</label>
81	+ <frontend_type>text</frontend_type>
82	+ <sort_order>70</sort_order>
83	+ <show_in_default>1</show_in_default>
84	+ <show_in_website>1</show_in_website>
85	+ <show_in_store>1</show_in_store>
86	+ <validate>validate-zero-or-greater</validate>
87	+ <comment><![CDATA[Border width around the big image. e.g.: 10]]></comment>
88	+ </j2t_lightbox_border_size>
89	+ <j2t_lightbox_label_image>
90	+ <label>Image Word</label>
91	+ <frontend_type>text</frontend_type>
92	+ <sort_order>80</sort_order>
93	+ <show_in_default>1</show_in_default>
94	+ <show_in_website>1</show_in_website>
95	+ <show_in_store>1</show_in_store>
96	+ <comment><![CDATA[Word used to specify image title. e.g.: Image]]></comment>
97	+ </j2t_lightbox_label_image>
98	+ <j2t_lightbox_label_of>
99	+ <label>Image Link Word</label>
100	+ <frontend_type>text</frontend_type>
101	+ <sort_order>90</sort_order>
102	+ <show_in_default>1</show_in_default>
103	+ <show_in_website>1</show_in_website>
104	+ <show_in_store>1</show_in_store>
105	+ <comment><![CDATA[Word used as link. e.g.: Of for Image 1 Of 2]]></comment>
106	+ </j2t_lightbox_label_of>
107	+ </fields>
108	+ </default>
109	+ </groups>
110	+ </j2tlightbox>
111	+ </sections>
112	+ </config>

app/design/frontend/default/default/layout/j2tlightbox.xml ADDED Viewed

	@@ -0,0 +1,25 @@


1	+ <?xml version="1.0"?>
2	+ <layout>
3	+ <default>
4	+ <reference name="head">
5	+ <action method="addCss"><stylesheet>css/j2t_lightbox.css</stylesheet></action>
6	+ <action method="addItem"><type>skin_js</type><name>js/lightbox.js</name></action>
7	+ </reference>
8	+ </default>
9	+
10	+ <catalog_product_view>
11	+ <reference name="product.info">
12	+ <block type="j2tlightbox/media" name="product.info.media" as="media" template="j2tlightbox/media.phtml"/>
13	+ </reference>
14	+ </catalog_product_view>
15	+
16	+ <review_product_list>
17	+ <reference name="product.info">
18	+ <block type="j2tlightbox/media" name="product.info.media" as="media" template="j2tlightbox/media.phtml">
19	+ <action method="disableGallery"/>
20	+ </block>
21	+ </reference>
22	+ </review_product_list>
23	+
24	+
25	+ </layout>

app/design/frontend/default/default/template/j2tlightbox/media.phtml ADDED Viewed

	@@ -0,0 +1,65 @@


1	+ <?php
2	+
3	+ /**
4	+ * J2T Lightbox
5	+ *
6	+ * NOTICE OF LICENSE
7	+ *
8	+ * This source file is subject to the Open Software License (OSL 3.0)
9	+ * that is available through the world-wide-web at this URL:
10	+ * http://opensource.org/licenses/osl-3.0.php
11	+ * If you did not receive a copy of the license and are unable to
12	+ * obtain it through the world-wide-web, please send an email
13	+ * to license@j2t-design.com so we can send you a copy immediately.
14	+ *
15	+ * @category Magento extension
16	+ * @package J2T Lightbox
17	+ * @copyright Copyright (c) 2011 J2T DESIGN. (http://www.j2t-design.com)
18	+ * @license http://opensource.org/licenses/osl-3.0.php Open Software License (OSL 3.0)
19	+ */
20	+
21	+ ?>
22	+
23	+ <script type="text/javascript">
24	+
25	+ LightboxOptions.fileLoadingImage = '<?php echo $this->getCurrentMediaUrl();?>/loading.gif';
26	+ LightboxOptions.fileBottomNavCloseImage = '<?php echo $this->getCurrentMediaUrl();?>/closelabel.gif';
27	+ LightboxOptions.overlayOpacity = <?php echo $this->getOverlayOpacity();?>;
28	+ LightboxOptions.animate = <?php echo $this->getAnimateValue();?>;
29	+
30	+ LightboxOptions.resizeSpeed = <?php echo $this->getResizeSpeed();?>;
31	+ LightboxOptions.borderSize = <?php echo $this->getBorderSize();?>;
32	+ LightboxOptions.labelImage = "<?php echo $this->getImageLabelText();?>";
33	+ LightboxOptions.labelOf = "<?php echo $this->getImageLabelOf();?>";
34	+
35	+ </script>
36	+
37	+ <?php
38	+ $_product = $this->getProduct();
39	+ $_helper = $this->helper('catalog/output');
40	+ ?>
41	+
42	+ <p class="product-image">
43	+ <a onclick="return false;" href="<?php echo $this->getFullImageUrl();?>" rel="lightbox" title="<?php echo $this->htmlEscape($this->getImageLabel());?>">
44	+ <?php
45	+ $_img = '<img src="'.$this->getPreviewImageUrl().'" alt="'.$this->htmlEscape($this->getImageLabel()).'" title="'.$this->htmlEscape($this->getImageLabel()).'" />';
46	+ echo $_helper->productAttribute($_product, $_img, 'image');
47	+ ?>
48	+ </a>
49	+ </p>
50	+
51	+ <?php if (count($this->getGalleryImages()) > 0): ?>
52	+ <div class="more-views">
53	+ <h2><?php echo $this->__('More Views') ?></h2>
54	+ <ul>
55	+ <?php foreach ($this->getGalleryImages() as $_image): ?>
56	+ <li>
57	+ <a onclick="return false;" href="<?php echo $this->getFullThumbnailUrl($_image); ?>" rel="lightbox[roadtrip]" title="<?php echo $this->htmlEscape($_image->getLabel()) ?>">
58	+ <img src="<?php echo $this->getThumbnailUrl($_image); ?>" alt="<?php echo $this->htmlEscape($_image->getLabel()) ?>" title="<?php echo $this->htmlEscape($_image->getLabel()) ?>" />
59	+ </a>
60	+ </li>
61	+ <?php endforeach; ?>
62	+ </ul>
63	+ </div>
64	+ <?php endif; ?>
65	+

app/etc/modules/J2t_Lightbox.xml ADDED Viewed

	@@ -0,0 +1,9 @@


1	+ <?xml version="1.0"?>
2	+ <config>
3	+ <modules>
4	+ <J2t_Lightbox>
5	+ <active>true</active>
6	+ <codePool>community</codePool>
7	+ </J2t_Lightbox>
8	+ </modules>
9	+ </config>

package.xml ADDED Viewed

	@@ -0,0 +1,20 @@


1	+ <?xml version="1.0"?>
2	+ <package>
3	+ <name>J2T_LIGHTBOX</name>
4	+ <version>0.1.0</version>
5	+ <stability>stable</stability>
6	+ <license>OSL</license>
7	+ <channel>community</channel>
8	+ <extends/>
9	+ <summary>J2t Lightbox using the well known Lightbox2</summary>
10	+ <description>J2t Lightbox is a fully customizable Lightbox extension using Lightbox2 Library.
11	+ No need of extra libraries, Lightbox2 uses prototype/scriptaculous!
12	+ This extension is compatible with IE7/8/9, Firefox and Chrome.</description>
13	+ <notes>This extension uses Lightbox2 library to function.</notes>
14	+ <authors><author><name>Jon</name><user>auto-converted</user><email>contact@j2t-design.net</email></author></authors>
15	+ <date>2011-08-04</date>
16	+ <time>10:04:05</time>
17	+ <contents><target name="mageskin"><dir name="frontend"><dir name="default"><dir name="default"><dir name="css"><file name="j2t_lightbox.css" hash="a2c52926f8794db3af62f1722d8e6d79"/></dir><dir name="images"><dir name="j2t_lightbox_images"><file name="bullet.gif" hash="1f7dd21de89bed2cf605ed7bd1276a63"/><file name="close.gif" hash="540f65d2b2f94032d6c3037622843a50"/><file name="closelabel.gif" hash="0e5462b0b4f00432eac4b33d5fa31c5a"/><file name="donate-button.gif" hash="fa03647656edb3a3cf87c5ca6f03eed7"/><file name="download-icon.gif" hash="6b66870c450a8d856f0a5a7e6087611d"/><file name="image-1.jpg" hash="2059be04139e24558449e53920e89924"/><file name="loading.gif" hash="7e99e1159a3686f6aa4f90043c554483"/><file name="nextlabel.gif" hash="110afaaaf901f67fee2357c5df88a1aa"/><file name="prevlabel.gif" hash="fb5fff30d471cc603589578015d36864"/><file name="thumb-1.jpg" hash="9b1b923cd76561359f8886033a4f5848"/></dir></dir><dir name="js"><file name="lightbox.js" hash="33340253ea0d69753f5eaaba178f2760"/></dir></dir></dir></dir></target><target name="magedesign"><dir name="frontend"><dir name="default"><dir name="default"><dir name="layout"><file name="j2tlightbox.xml" hash="78bc4f08bdf275467649817991bfb8ba"/></dir><dir name="template"><dir name="j2tlightbox"><file name="media.phtml" hash="6b59472dd59728b80d3c8717c050496e"/></dir></dir></dir></dir></dir></target><target name="magecommunity"><dir name="J2t"><dir name="Lightbox"><dir name="Block"><file name="Media.php" hash="ea3380e107334504f21a8565dfea4236"/></dir><dir name="etc"><file name="config.xml" hash="0638f931a263d886277c2764d2cde8fb"/><file name="system.xml" hash="f43e8138333c640eede6a5df4633d83d"/></dir><dir name="Helper"><file name="Data.php" hash="dae86eb890d7c402669e7f98c536f0da"/></dir><dir name="Model"><file name="Feed.php" hash="44da3d7ab5b0a4d58d661f715934ec17"/><file name="Observer.php" hash="8888a542b7fc083128259fa206494034"/></dir></dir></dir></target><target name="mageetc"><dir name="modules"><file name="J2t_Lightbox.xml" hash="12971c146605c2627388dc4d0d84b20a"/></dir></target></contents>
18	+ <compatible/>
19	+ <dependencies/>
20	+ </package>

skin/frontend/default/default/css/j2t_lightbox.css ADDED Viewed

	@@ -0,0 +1,32 @@


1	+ #lightbox{ position: absolute; left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
2	+ #lightbox img{ width: auto; height: auto;}
3	+ #lightbox a img{ border: none; }
4	+
5	+ #outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
6	+ #imageContainer{ padding: 10px; }
7	+
8	+ #loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
9	+ #hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
10	+ #imageContainer>#hoverNav{ left: 0;}
11	+ #hoverNav a{ outline: none;}
12	+
13	+ #prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
14	+ #prevLink { left: 0; float: left;}
15	+ #nextLink { right: 0; float: right;}
16	+ #prevLink:hover, #prevLink:visited:hover { background: url(../images/j2t_lightbox_images/prevlabel.gif) left 15% no-repeat; }
17	+ #nextLink:hover, #nextLink:visited:hover { background: url(../images/j2t_lightbox_images/nextlabel.gif) right 15% no-repeat; }
18	+
19	+ #imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100% ; }
20	+
21	+ #imageData{ padding:0 10px; color: #666; }
22	+ #imageData #imageDetails{ width: 70%; float: left; text-align: left; }
23	+ #imageData #caption{ font-weight: bold; }
24	+ #imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em; }
25	+ #imageData #bottomNavClose{ width: 66px; float: right; padding-bottom: 0.7em; outline: none;}
26	+
27	+ #overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }
28	+
29	+
30	+ .product-view .product-img-box .more-views li a {width:auto; height:auto;}
31	+ .product-view .product-img-box .product-image a {display:block; border: 2px solid #DDD;}
32	+ .product-view .product-img-box {width:auto;}

skin/frontend/default/default/images/j2t_lightbox_images/bullet.gif ADDED Viewed

Binary file

skin/frontend/default/default/images/j2t_lightbox_images/close.gif ADDED Viewed

Binary file

skin/frontend/default/default/images/j2t_lightbox_images/closelabel.gif ADDED Viewed

Binary file

skin/frontend/default/default/images/j2t_lightbox_images/donate-button.gif ADDED Viewed

Binary file

skin/frontend/default/default/images/j2t_lightbox_images/download-icon.gif ADDED Viewed

Binary file

skin/frontend/default/default/images/j2t_lightbox_images/image-1.jpg ADDED Viewed

Binary file

skin/frontend/default/default/images/j2t_lightbox_images/loading.gif ADDED Viewed

Binary file

skin/frontend/default/default/images/j2t_lightbox_images/nextlabel.gif ADDED Viewed

Binary file

skin/frontend/default/default/images/j2t_lightbox_images/prevlabel.gif ADDED Viewed

Binary file

skin/frontend/default/default/images/j2t_lightbox_images/thumb-1.jpg ADDED Viewed

Binary file

skin/frontend/default/default/js/lightbox.js ADDED Viewed

	@@ -0,0 +1,496 @@


1	+ // -----------------------------------------------------------------------------------
2	+ //
3	+ // Lightbox v2.05
4	+ // by Lokesh Dhakar - http://www.lokeshdhakar.com
5	+ // Last Modification: 3/18/11
6	+ //
7	+ // For more information, visit:
8	+ // http://lokeshdhakar.com/projects/lightbox2/
9	+ //
10	+ // Licensed under the Creative Commons Attribution 2.5 License - http://creativecommons.org/licenses/by/2.5/
11	+ // - Free for use in both personal and commercial projects
12	+ // - Attribution requires leaving author name, author link, and the license info intact.
13	+ //
14	+ // Thanks: Scott Upton(uptonic.com), Peter-Paul Koch(quirksmode.com), and Thomas Fuchs(mir.aculo.us) for ideas, libs, and snippets.
15	+ // Artemy Tregubenko (arty.name) for cleanup and help in updating to latest ver of proto-aculous.
16	+ //
17	+ // -----------------------------------------------------------------------------------
18	+ /*
19	+
20	+ Table of Contents
21	+ -----------------
22	+ Configuration
23	+
24	+ Lightbox Class Declaration
25	+ - initialize()
26	+ - updateImageList()
27	+ - start()
28	+ - changeImage()
29	+ - resizeImageContainer()
30	+ - showImage()
31	+ - updateDetails()
32	+ - updateNav()
33	+ - enableKeyboardNav()
34	+ - disableKeyboardNav()
35	+ - keyboardAction()
36	+ - preloadNeighborImages()
37	+ - end()
38	+
39	+ Function Calls
40	+ - document.observe()
41	+
42	+ */
43	+ // -----------------------------------------------------------------------------------
44	+
45	+ //
46	+ // Configurationl
47	+ //
48	+ LightboxOptions = Object.extend({
49	+ fileLoadingImage: 'images/loading.gif',
50	+ fileBottomNavCloseImage: 'images/closelabel.gif',
51	+
52	+ overlayOpacity: 0.8, // controls transparency of shadow overlay
53	+
54	+ animate: true, // toggles resizing animations
55	+ resizeSpeed: 7, // controls the speed of the image resizing animations (1=slowest and 10=fastest)
56	+
57	+ borderSize: 10, //if you adjust the padding in the CSS, you will need to update this variable
58	+
59	+ // When grouping images this is used to write: Image # of #.
60	+ // Change it for non-english localization
61	+ labelImage: "Image",
62	+ labelOf: "of"
63	+ }, window.LightboxOptions \|\| {});
64	+
65	+ // -----------------------------------------------------------------------------------
66	+
67	+ var Lightbox = Class.create();
68	+
69	+ Lightbox.prototype = {
70	+ imageArray: [],
71	+ activeImage: undefined,
72	+
73	+ // initialize()
74	+ // Constructor runs on completion of the DOM loading. Calls updateImageList and then
75	+ // the function inserts html at the bottom of the page which is used to display the shadow
76	+ // overlay and the image container.
77	+ //
78	+ initialize: function() {
79	+
80	+ this.updateImageList();
81	+
82	+ this.keyboardAction = this.keyboardAction.bindAsEventListener(this);
83	+
84	+ if (LightboxOptions.resizeSpeed > 10) LightboxOptions.resizeSpeed = 10;
85	+ if (LightboxOptions.resizeSpeed < 1) LightboxOptions.resizeSpeed = 1;
86	+
87	+ this.resizeDuration = LightboxOptions.animate ? ((11 - LightboxOptions.resizeSpeed) * 0.15) : 0;
88	+ this.overlayDuration = LightboxOptions.animate ? 0.2 : 0; // shadow fade in/out duration
89	+
90	+ // When Lightbox starts it will resize itself from 250 by 250 to the current image dimension.
91	+ // If animations are turned off, it will be hidden as to prevent a flicker of a
92	+ // white 250 by 250 box.
93	+ var size = (LightboxOptions.animate ? 250 : 1) + 'px';
94	+
95	+
96	+ // Code inserts html at the bottom of the page that looks similar to this:
97	+ //
98	+ // <div id="overlay"></div>
99	+ // <div id="lightbox">
100	+ // <div id="outerImageContainer">
101	+ // <div id="imageContainer">
102	+ // <img id="lightboxImage">
103	+ // <div style="" id="hoverNav">
104	+ // <a href="#" id="prevLink"></a>
105	+ // <a href="#" id="nextLink"></a>
106	+ // </div>
107	+ // <div id="loading">
108	+ // <a href="#" id="loadingLink">
109	+ // <img src="images/loading.gif">
110	+ // </a>
111	+ // </div>
112	+ // </div>
113	+ // </div>
114	+ // <div id="imageDataContainer">
115	+ // <div id="imageData">
116	+ // <div id="imageDetails">
117	+ // <span id="caption"></span>
118	+ // <span id="numberDisplay"></span>
119	+ // </div>
120	+ // <div id="bottomNav">
121	+ // <a href="#" id="bottomNavClose">
122	+ // <img src="images/close.gif">
123	+ // </a>
124	+ // </div>
125	+ // </div>
126	+ // </div>
127	+ // </div>
128	+
129	+
130	+ var objBody = $$('body')[0];
131	+
132	+ objBody.appendChild(Builder.node('div',{id:'overlay'}));
133	+
134	+ objBody.appendChild(Builder.node('div',{id:'lightbox'}, [
135	+ Builder.node('div',{id:'outerImageContainer'},
136	+ Builder.node('div',{id:'imageContainer'}, [
137	+ Builder.node('img',{id:'lightboxImage'}),
138	+ Builder.node('div',{id:'hoverNav'}, [
139	+ Builder.node('a',{id:'prevLink', href: '#' }),
140	+ Builder.node('a',{id:'nextLink', href: '#' })
141	+ ]),
142	+ Builder.node('div',{id:'loading'},
143	+ Builder.node('a',{id:'loadingLink', href: '#' },
144	+ Builder.node('img', {src: LightboxOptions.fileLoadingImage})
145	+ )
146	+ )
147	+ ])
148	+ ),
149	+ Builder.node('div', {id:'imageDataContainer'},
150	+ Builder.node('div',{id:'imageData'}, [
151	+ Builder.node('div',{id:'imageDetails'}, [
152	+ Builder.node('span',{id:'caption'}),
153	+ Builder.node('span',{id:'numberDisplay'})
154	+ ]),
155	+ Builder.node('div',{id:'bottomNav'},
156	+ Builder.node('a',{id:'bottomNavClose', href: '#' },
157	+ Builder.node('img', { src: LightboxOptions.fileBottomNavCloseImage })
158	+ )
159	+ )
160	+ ])
161	+ )
162	+ ]));
163	+
164	+
165	+ $('overlay').hide().observe('click', (function() { this.end(); }).bind(this));
166	+ $('lightbox').hide().observe('click', (function(event) { if (event.element().id == 'lightbox') this.end(); }).bind(this));
167	+ $('outerImageContainer').setStyle({ width: size, height: size });
168	+ $('prevLink').observe('click', (function(event) { event.stop(); this.changeImage(this.activeImage - 1); }).bindAsEventListener(this));
169	+ $('nextLink').observe('click', (function(event) { event.stop(); this.changeImage(this.activeImage + 1); }).bindAsEventListener(this));
170	+ $('loadingLink').observe('click', (function(event) { event.stop(); this.end(); }).bind(this));
171	+ $('bottomNavClose').observe('click', (function(event) { event.stop(); this.end(); }).bind(this));
172	+
173	+ var th = this;
174	+ (function(){
175	+ var ids =
176	+ 'overlay lightbox outerImageContainer imageContainer lightboxImage hoverNav prevLink nextLink loading loadingLink ' +
177	+ 'imageDataContainer imageData imageDetails caption numberDisplay bottomNav bottomNavClose';
178	+ $w(ids).each(function(id){ th[id] = $(id); });
179	+ }).defer();
180	+ },
181	+
182	+ //
183	+ // updateImageList()
184	+ // Loops through anchor tags looking for 'lightbox' references and applies onclick
185	+ // events to appropriate links. You can rerun after dynamically adding images w/ajax.
186	+ //
187	+ updateImageList: function() {
188	+ this.updateImageList = Prototype.emptyFunction;
189	+
190	+ document.observe('click', (function(event){
191	+ var target = event.findElement('a[rel^=lightbox]') \|\| event.findElement('area[rel^=lightbox]');
192	+ if (target) {
193	+ event.stop();
194	+ this.start(target);
195	+ }
196	+ }).bind(this));
197	+ },
198	+
199	+ //
200	+ // start()
201	+ // Display overlay and lightbox. If image is part of a set, add siblings to imageArray.
202	+ //
203	+ start: function(imageLink) {
204	+
205	+ $$('select', 'object', 'embed').each(function(node){ node.style.visibility = 'hidden' });
206	+
207	+ // stretch overlay to fill page and fade in
208	+ var arrayPageSize = this.getPageSize();
209	+ $('overlay').setStyle({ width: arrayPageSize[0] + 'px', height: arrayPageSize[1] + 'px' });
210	+
211	+ new Effect.Appear(this.overlay, { duration: this.overlayDuration, from: 0.0, to: LightboxOptions.overlayOpacity });
212	+
213	+ this.imageArray = [];
214	+ var imageNum = 0;
215	+
216	+ if ((imageLink.getAttribute("rel") == 'lightbox')){
217	+ // if image is NOT part of a set, add single image to imageArray
218	+ this.imageArray.push([imageLink.href, imageLink.title]);
219	+ } else {
220	+ // if image is part of a set..
221	+ this.imageArray =
222	+ $$(imageLink.tagName + '[href][rel="' + imageLink.rel + '"]').
223	+ collect(function(anchor){ return [anchor.href, anchor.title]; }).
224	+ uniq();
225	+
226	+ while (this.imageArray[imageNum][0] != imageLink.href) { imageNum++; }
227	+ }
228	+
229	+ // calculate top and left offset for the lightbox
230	+ var arrayPageScroll = document.viewport.getScrollOffsets();
231	+ var lightboxTop = arrayPageScroll[1] + (document.viewport.getHeight() / 10);
232	+ var lightboxLeft = arrayPageScroll[0];
233	+ this.lightbox.setStyle({ top: lightboxTop + 'px', left: lightboxLeft + 'px' }).show();
234	+
235	+ this.changeImage(imageNum);
236	+ },
237	+
238	+ //
239	+ // changeImage()
240	+ // Hide most elements and preload image in preparation for resizing image container.
241	+ //
242	+ changeImage: function(imageNum) {
243	+
244	+ this.activeImage = imageNum; // update global var
245	+
246	+ // hide elements during transition
247	+ if (LightboxOptions.animate) this.loading.show();
248	+ this.lightboxImage.hide();
249	+ this.hoverNav.hide();
250	+ this.prevLink.hide();
251	+ this.nextLink.hide();
252	+ // HACK: Opera9 does not currently support scriptaculous opacity and appear fx
253	+ this.imageDataContainer.setStyle({opacity: .0001});
254	+ this.numberDisplay.hide();
255	+
256	+ var imgPreloader = new Image();
257	+
258	+ // once image is preloaded, resize image container
259	+ imgPreloader.onload = (function(){
260	+ this.lightboxImage.src = this.imageArray[this.activeImage][0];
261	+ /Bug Fixed by Andy Scott/
262	+ this.lightboxImage.width = imgPreloader.width;
263	+ this.lightboxImage.height = imgPreloader.height;
264	+ /End of Bug Fix/
265	+ this.resizeImageContainer(imgPreloader.width, imgPreloader.height);
266	+ }).bind(this);
267	+ imgPreloader.src = this.imageArray[this.activeImage][0];
268	+ },
269	+
270	+ //
271	+ // resizeImageContainer()
272	+ //
273	+ resizeImageContainer: function(imgWidth, imgHeight) {
274	+
275	+ // get current width and height
276	+ var widthCurrent = this.outerImageContainer.getWidth();
277	+ var heightCurrent = this.outerImageContainer.getHeight();
278	+
279	+ // get new width and height
280	+ var widthNew = (imgWidth + LightboxOptions.borderSize * 2);
281	+ var heightNew = (imgHeight + LightboxOptions.borderSize * 2);
282	+
283	+ // scalars based on change from old to new
284	+ var xScale = (widthNew / widthCurrent) * 100;
285	+ var yScale = (heightNew / heightCurrent) * 100;
286	+
287	+ // calculate size difference between new and old image, and resize if necessary
288	+ var wDiff = widthCurrent - widthNew;
289	+ var hDiff = heightCurrent - heightNew;
290	+
291	+ if (hDiff != 0) new Effect.Scale(this.outerImageContainer, yScale, {scaleX: false, duration: this.resizeDuration, queue: 'front'});
292	+ if (wDiff != 0) new Effect.Scale(this.outerImageContainer, xScale, {scaleY: false, duration: this.resizeDuration, delay: this.resizeDuration});
293	+
294	+ // if new and old image are same size and no scaling transition is necessary,
295	+ // do a quick pause to prevent image flicker.
296	+ var timeout = 0;
297	+ if ((hDiff == 0) && (wDiff == 0)){
298	+ timeout = 100;
299	+ if (Prototype.Browser.IE) timeout = 250;
300	+ }
301	+
302	+ (function(){
303	+ this.prevLink.setStyle({ height: imgHeight + 'px' });
304	+ this.nextLink.setStyle({ height: imgHeight + 'px' });
305	+ this.imageDataContainer.setStyle({ width: widthNew + 'px' });
306	+
307	+ this.showImage();
308	+ }).bind(this).delay(timeout / 1000);
309	+ },
310	+
311	+ //
312	+ // showImage()
313	+ // Display image and begin preloading neighbors.
314	+ //
315	+ showImage: function(){
316	+ this.loading.hide();
317	+ new Effect.Appear(this.lightboxImage, {
318	+ duration: this.resizeDuration,
319	+ queue: 'end',
320	+ afterFinish: (function(){ this.updateDetails(); }).bind(this)
321	+ });
322	+ this.preloadNeighborImages();
323	+ },
324	+
325	+ //
326	+ // updateDetails()
327	+ // Display caption, image number, and bottom nav.
328	+ //
329	+ updateDetails: function() {
330	+
331	+ this.caption.update(this.imageArray[this.activeImage][1]).show();
332	+
333	+ // if image is part of set display 'Image x of x'
334	+ if (this.imageArray.length > 1){
335	+ this.numberDisplay.update( LightboxOptions.labelImage + ' ' + (this.activeImage + 1) + ' ' + LightboxOptions.labelOf + ' ' + this.imageArray.length).show();
336	+ }
337	+
338	+ new Effect.Parallel(
339	+ [
340	+ new Effect.SlideDown(this.imageDataContainer, { sync: true, duration: this.resizeDuration, from: 0.0, to: 1.0 }),
341	+ new Effect.Appear(this.imageDataContainer, { sync: true, duration: this.resizeDuration })
342	+ ],
343	+ {
344	+ duration: this.resizeDuration,
345	+ afterFinish: (function() {
346	+ // update overlay size and update nav
347	+ var arrayPageSize = this.getPageSize();
348	+ this.overlay.setStyle({ width: arrayPageSize[0] + 'px', height: arrayPageSize[1] + 'px' });
349	+ this.updateNav();
350	+ }).bind(this)
351	+ }
352	+ );
353	+ },
354	+
355	+ //
356	+ // updateNav()
357	+ // Display appropriate previous and next hover navigation.
358	+ //
359	+ updateNav: function() {
360	+
361	+ this.hoverNav.show();
362	+
363	+ // if not first image in set, display prev image button
364	+ if (this.activeImage > 0) this.prevLink.show();
365	+
366	+ // if not last image in set, display next image button
367	+ if (this.activeImage < (this.imageArray.length - 1)) this.nextLink.show();
368	+
369	+ this.enableKeyboardNav();
370	+ },
371	+
372	+ //
373	+ // enableKeyboardNav()
374	+ //
375	+ enableKeyboardNav: function() {
376	+ document.observe('keydown', this.keyboardAction);
377	+ },
378	+
379	+ //
380	+ // disableKeyboardNav()
381	+ //
382	+ disableKeyboardNav: function() {
383	+ document.stopObserving('keydown', this.keyboardAction);
384	+ },
385	+
386	+ //
387	+ // keyboardAction()
388	+ //
389	+ keyboardAction: function(event) {
390	+ var keycode = event.keyCode;
391	+
392	+ var escapeKey;
393	+ if (event.DOM_VK_ESCAPE) { // mozilla
394	+ escapeKey = event.DOM_VK_ESCAPE;
395	+ } else { // ie
396	+ escapeKey = 27;
397	+ }
398	+
399	+ var key = String.fromCharCode(keycode).toLowerCase();
400	+
401	+ if (key.match(/x\|o\|c/) \|\| (keycode == escapeKey)){ // close lightbox
402	+ this.end();
403	+ } else if ((key == 'p') \|\| (keycode == 37)){ // display previous image
404	+ if (this.activeImage != 0){
405	+ this.disableKeyboardNav();
406	+ this.changeImage(this.activeImage - 1);
407	+ }
408	+ } else if ((key == 'n') \|\| (keycode == 39)){ // display next image
409	+ if (this.activeImage != (this.imageArray.length - 1)){
410	+ this.disableKeyboardNav();
411	+ this.changeImage(this.activeImage + 1);
412	+ }
413	+ }
414	+ },
415	+
416	+ //
417	+ // preloadNeighborImages()
418	+ // Preload previous and next images.
419	+ //
420	+ preloadNeighborImages: function(){
421	+ var preloadNextImage, preloadPrevImage;
422	+ if (this.imageArray.length > this.activeImage + 1){
423	+ preloadNextImage = new Image();
424	+ preloadNextImage.src = this.imageArray[this.activeImage + 1][0];
425	+ }
426	+ if (this.activeImage > 0){
427	+ preloadPrevImage = new Image();
428	+ preloadPrevImage.src = this.imageArray[this.activeImage - 1][0];
429	+ }
430	+
431	+ },
432	+
433	+ //
434	+ // end()
435	+ //
436	+ end: function() {
437	+ this.disableKeyboardNav();
438	+ this.lightbox.hide();
439	+ new Effect.Fade(this.overlay, { duration: this.overlayDuration });
440	+ $$('select', 'object', 'embed').each(function(node){ node.style.visibility = 'visible' });
441	+ },
442	+
443	+ //
444	+ // getPageSize()
445	+ //
446	+ getPageSize: function() {
447	+
448	+ var xScroll, yScroll;
449	+
450	+ if (window.innerHeight && window.scrollMaxY) {
451	+ xScroll = window.innerWidth + window.scrollMaxX;
452	+ yScroll = window.innerHeight + window.scrollMaxY;
453	+ } else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
454	+ xScroll = document.body.scrollWidth;
455	+ yScroll = document.body.scrollHeight;
456	+ } else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
457	+ xScroll = document.body.offsetWidth;
458	+ yScroll = document.body.offsetHeight;
459	+ }
460	+
461	+ var windowWidth, windowHeight;
462	+
463	+ if (self.innerHeight) { // all except Explorer
464	+ if(document.documentElement.clientWidth){
465	+ windowWidth = document.documentElement.clientWidth;
466	+ } else {
467	+ windowWidth = self.innerWidth;
468	+ }
469	+ windowHeight = self.innerHeight;
470	+ } else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
471	+ windowWidth = document.documentElement.clientWidth;
472	+ windowHeight = document.documentElement.clientHeight;
473	+ } else if (document.body) { // other Explorers
474	+ windowWidth = document.body.clientWidth;
475	+ windowHeight = document.body.clientHeight;
476	+ }
477	+
478	+ // for small pages with total height less then height of the viewport
479	+ if(yScroll < windowHeight){
480	+ pageHeight = windowHeight;
481	+ } else {
482	+ pageHeight = yScroll;
483	+ }
484	+
485	+ // for small pages with total width less then width of the viewport
486	+ if(xScroll < windowWidth){
487	+ pageWidth = xScroll;
488	+ } else {
489	+ pageWidth = windowWidth;
490	+ }
491	+
492	+ return [pageWidth,pageHeight];
493	+ }
494	+ }
495	+
496	+ document.observe('dom:loaded', function () { new Lightbox(); });