VS_Lightbox - Version 1.0.0

Version Notes

This small extension will install Lightbox on product detail page

Download this release

Release Info

Developer virendra kumar sharma
Extension VS_Lightbox
Version 1.0.0
Comparing to
See all releases


Version 1.0.0

Files changed (21) hide show
  1. app/code/community/VS/Lightbox/Helper/Data.php +5 -0
  2. app/code/community/VS/Lightbox/Model/Magnifierpos.php +32 -0
  3. app/code/community/VS/Lightbox/etc/config.xml +78 -0
  4. app/code/community/VS/Lightbox/etc/system.xml +45 -0
  5. app/design/frontend/default/default/layout/lightbox.xml +14 -0
  6. app/design/frontend/default/default/template/lightbox/media.phtml +91 -0
  7. js/VS/Thumbs.db +0 -0
  8. js/VS/lightbox.js +480 -0
  9. package.xml +18 -0
  10. skin/frontend/default/default/VS/css/lightbox.css +27 -0
  11. skin/frontend/default/default/VS/images/Thumbs.db +0 -0
  12. skin/frontend/default/default/VS/images/bullet.gif +0 -0
  13. skin/frontend/default/default/VS/images/close.gif +0 -0
  14. skin/frontend/default/default/VS/images/closelabel.gif +0 -0
  15. skin/frontend/default/default/VS/images/donate-button.gif +0 -0
  16. skin/frontend/default/default/VS/images/download-icon.gif +0 -0
  17. skin/frontend/default/default/VS/images/image-1.jpg +0 -0
  18. skin/frontend/default/default/VS/images/loading.gif +0 -0
  19. skin/frontend/default/default/VS/images/nextlabel.gif +0 -0
  20. skin/frontend/default/default/VS/images/prevlabel.gif +0 -0
  21. skin/frontend/default/default/VS/images/thumb-1.jpg +0 -0
app/code/community/VS/Lightbox/Helper/Data.php ADDED
@@ -0,0 +1,5 @@
 
 
 
 
 
1
+ <?php
2
+ class VS_Lightbox_Helper_Data extends Mage_Core_Helper_Abstract
3
+ {
4
+
5
+ }
app/code/community/VS/Lightbox/Model/Magnifierpos.php ADDED
@@ -0,0 +1,32 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <?php
2
+
3
+
4
+ class VS_Lightbox_Model_Magnifierpos{
5
+ protected $_options;
6
+ const MAGNIFIERPOS_RIGHT = 'right';
7
+ const MAGNIFIERPOS_LEFT = 'left';
8
+ const MAGNIFIERPOS_TOP = 'top';
9
+ const MAGNIFIERPOS_BOTTOM = 'bottom';
10
+
11
+ public function toOptionArray(){
12
+ if (!$this->_options) {
13
+ $this->_options[] = array(
14
+ 'value'=>self::MAGNIFIERPOS_RIGHT,
15
+ 'label'=>Mage::helper('lightbox')->__('Right')
16
+ );
17
+ $this->_options[] = array(
18
+ 'value'=>self::MAGNIFIERPOS_LEFT,
19
+ 'label'=>Mage::helper('lightbox')->__('Left')
20
+ );
21
+ $this->_options[] = array(
22
+ 'value'=>self::MAGNIFIERPOS_TOP,
23
+ 'label'=>Mage::helper('lightbox')->__('Top')
24
+ );
25
+ $this->_options[] = array(
26
+ 'value'=>self::MAGNIFIERPOS_BOTTOM,
27
+ 'label'=>Mage::helper('lightbox')->__('Bottom')
28
+ );
29
+ }
30
+ return $this->_options;
31
+ }
32
+ }
app/code/community/VS/Lightbox/etc/config.xml ADDED
@@ -0,0 +1,78 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <?xml version="1.0"?>
2
+
3
+ <config>
4
+ <modules>
5
+ <VS_Lightbox>
6
+ <version>2.0</version>
7
+ </VS_Lightbox>
8
+ </modules>
9
+ <global>
10
+ <helpers>
11
+ <lightbox>
12
+ <class>VS_Lightbox_Helper</class>
13
+ </lightbox>
14
+ </helpers>
15
+ <models>
16
+ <lightbox>
17
+ <class>VS_Lightbox_Model</class>
18
+ </lightbox>
19
+ </models>
20
+ <resources>
21
+ <lightbox_setup>
22
+ <setup>
23
+ <module>VS_Lightbox</module>
24
+ </setup>
25
+ <connection>
26
+ <use>core_setup</use>
27
+ </connection>
28
+ </lightbox_setup>
29
+ <lightbox_write>
30
+ <connection>
31
+ <use>core_write</use>
32
+ </connection>
33
+ </lightbox_write>
34
+ <lightbox_read>
35
+ <connection>
36
+ <use>core_read</use>
37
+ </connection>
38
+ </lightbox_read>
39
+ </resources>
40
+ </global>
41
+ <default>
42
+ <lightbox>
43
+ <general>
44
+ <defaullightbox>1</defaullightbox>
45
+ </general>
46
+ </lightbox>
47
+ </default>
48
+ <frontend>
49
+ <layout>
50
+ <updates>
51
+ <lightbox>
52
+ <file>lightbox.xml</file>
53
+ </lightbox>
54
+ </updates>
55
+ </layout>
56
+ </frontend>
57
+ <adminhtml>
58
+ <acl>
59
+ <resources>
60
+ <admin>
61
+ <children>
62
+ <system>
63
+ <children>
64
+ <config>
65
+ <children>
66
+ <lightbox>
67
+ <title>VS Lightbox</title>
68
+ </lightbox>
69
+ </children>
70
+ </config>
71
+ </children>
72
+ </system>
73
+ </children>
74
+ </admin>
75
+ </resources>
76
+ </acl>
77
+ </adminhtml>
78
+ </config>
app/code/community/VS/Lightbox/etc/system.xml ADDED
@@ -0,0 +1,45 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <?xml version="1.0" encoding="UTF-8"?>
2
+ <config>
3
+ <tabs>
4
+ <vs_extensions>
5
+ <label>VS Extensions</label>
6
+ <sort_order>195</sort_order>
7
+ </vs_extensions>
8
+ </tabs>
9
+ <sections>
10
+ <lightbox translate="label" >
11
+ <label>VS Lightbox</label>
12
+ <tab>vs_extensions</tab>
13
+ <frontend_type>text</frontend_type>
14
+ <sort_order>90</sort_order>
15
+ <show_in_default>1</show_in_default>
16
+ <show_in_website>1</show_in_website>
17
+ <show_in_store>1</show_in_store>
18
+ <groups>
19
+ <general translate="label">
20
+ <label>Lightbox Settings</label>
21
+ <frontend_type>text</frontend_type>
22
+ <sort_order>1</sort_order>
23
+ <show_in_default>1</show_in_default>
24
+ <show_in_website>1</show_in_website>
25
+ <show_in_store>1</show_in_store>
26
+ <fields>
27
+ <enabled translate="label">
28
+ <label>Enabled</label>
29
+ <frontend_type>select</frontend_type>
30
+ <source_model>adminhtml/system_config_source_yesno</source_model>
31
+ <sort_order>1</sort_order>
32
+ <show_in_default>1</show_in_default>
33
+ <show_in_website>1</show_in_website>
34
+ <show_in_store>1</show_in_store>
35
+ </enabled>
36
+
37
+
38
+ </fields>
39
+ </general>
40
+
41
+ </groups>
42
+
43
+ </lightbox>
44
+ </sections>
45
+ </config>
app/design/frontend/default/default/layout/lightbox.xml ADDED
@@ -0,0 +1,14 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <?xml version="1.0" encoding="UTF-8"?>
2
+ <layout version="0.1.0">
3
+ <catalog_product_view>
4
+ <reference name="head">
5
+ <action method="addJs" ifconfig="lightbox/general/enabled"><script>VS/lightbox.js</script></action>
6
+ <action method="addCss" ifconfig="lightbox/general/enabled"><stylesheet>VS/css/lightbox.css</stylesheet></action>
7
+ </reference>
8
+ <reference name="product.info.media">
9
+ <action method="setTemplate" ifconfig="lightbox/general/enabled"><template>lightbox/media.phtml</template></action>
10
+ </reference>
11
+ </catalog_product_view>
12
+
13
+ </layout>
14
+
app/design/frontend/default/default/template/lightbox/media.phtml ADDED
@@ -0,0 +1,91 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <?php
2
+ /**
3
+ * Magento
4
+ *
5
+ * NOTICE OF LICENSE
6
+ *
7
+ * This source file is subject to the Academic Free License (AFL 3.0)
8
+ * that is bundled with this package in the file LICENSE_AFL.txt.
9
+ * It is also available through the world-wide-web at this URL:
10
+ * http://opensource.org/licenses/afl-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@magentocommerce.com so we can send you a copy immediately.
14
+ *
15
+ * DISCLAIMER
16
+ *
17
+ * Do not edit or add to this file if you wish to upgrade Magento to newer
18
+ * versions in the future. If you wish to customize Magento for your
19
+ * needs please refer to http://www.magentocommerce.com for more information.
20
+ *
21
+ * @category design
22
+ * @package base_default
23
+ * @copyright Copyright (c) 2010 Magento Inc. (http://www.magentocommerce.com)
24
+ * @license http://opensource.org/licenses/afl-3.0.php Academic Free License (AFL 3.0)
25
+ */
26
+
27
+ /**
28
+ * Product media data template
29
+ *
30
+ * @see Mage_Catalog_Block_Product_View_Media
31
+ */
32
+ ?>
33
+ <style type="text/css">
34
+ .product-view .product-img-box .product-image-zoom img {cursor:pointer !important;}
35
+ </style>
36
+
37
+ <?php
38
+ $_product = $this->getProduct();
39
+ $_helper = $this->helper('catalog/output');
40
+ ?>
41
+ <?php if ($_product->getImage() != 'no_selection' && $_product->getImage()): ?>
42
+ <p class="product-image product-image-zoom">
43
+ <?php
44
+ $_img = ' <a href="'.$this->helper('catalog/image')->init($_product, 'image').'" rel="lightbox[product]" title="'.$this->htmlEscape($this->getImageLabel()).'"><img id="image" src="'.$this->helper('catalog/image')->init($_product, 'image').'" alt="'.$this->htmlEscape($this->getImageLabel()).'" title="'.$this->htmlEscape($this->getImageLabel()).'" /></a>';
45
+ echo $_helper->productAttribute($_product, $_img, 'image');
46
+ ?>
47
+ </p>
48
+ <p class="zoom-notice"><?php echo $this->__('Click on image to view image gallary') ?></p>
49
+
50
+ <?php else: ?>
51
+ <p class="product-image">
52
+ <?php
53
+ $_img = '<img src="'.$this->helper('catalog/image')->init($_product, 'image')->resize(265).'" alt="'.$this->htmlEscape($this->getImageLabel()).'" title="'.$this->htmlEscape($this->getImageLabel()).'" />';
54
+ echo $_helper->productAttribute($_product, $_img, 'image');
55
+ ?>
56
+ </p>
57
+ <?php endif; ?>
58
+ <?php if (count($this->getGalleryImages()) > 0): ?>
59
+ <div class="more-views">
60
+ <h2><?php echo $this->__('More Views') ?></h2>
61
+ <ul>
62
+ <?php foreach ($this->getGalleryImages() as $_image): ?>
63
+ <li>
64
+ <a href="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'image', $_image->getFile()); ?>" rel="lightbox[product]" title="<?php echo $this->htmlEscape($_image->getLabel()) ?>"><img src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(56); ?>" width="56" height="56" alt="<?php echo $this->htmlEscape($_image->getLabel()) ?>" /></a>
65
+ </li>
66
+ <?php endforeach; ?>
67
+ </ul>
68
+ </div>
69
+ <?php endif; ?>
70
+
71
+
72
+ <script type="text/javascript">
73
+
74
+ LightboxOptions = Object.extend({
75
+ fileLoadingImage: '<?php echo $this->getSkinUrl('VS/images/loading.gif');?>',
76
+ fileBottomNavCloseImage: '<?php echo $this->getSkinUrl('VS/images/closelabel.gif');?>',
77
+
78
+ overlayOpacity: 0.8, // controls transparency of shadow overlay
79
+
80
+ animate: true, // toggles resizing animations
81
+ resizeSpeed: 7, // controls the speed of the image resizing animations (1=slowest and 10=fastest)
82
+
83
+ borderSize: 10, //if you adjust the padding in the CSS, you will need to update this variable
84
+
85
+ // When grouping images this is used to write: Image # of #.
86
+ // Change it for non-english localization
87
+ labelImage: "Image",
88
+ labelOf: "of"
89
+ }, window.LightboxOptions || {});
90
+
91
+ </script>
js/VS/Thumbs.db ADDED
Binary file
js/VS/lightbox.js ADDED
@@ -0,0 +1,480 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
+
49
+ // -----------------------------------------------------------------------------------
50
+
51
+ var Lightbox = Class.create();
52
+
53
+ Lightbox.prototype = {
54
+ imageArray: [],
55
+ activeImage: undefined,
56
+
57
+ // initialize()
58
+ // Constructor runs on completion of the DOM loading. Calls updateImageList and then
59
+ // the function inserts html at the bottom of the page which is used to display the shadow
60
+ // overlay and the image container.
61
+ //
62
+ initialize: function() {
63
+
64
+ this.updateImageList();
65
+
66
+ this.keyboardAction = this.keyboardAction.bindAsEventListener(this);
67
+
68
+ if (LightboxOptions.resizeSpeed > 10) LightboxOptions.resizeSpeed = 10;
69
+ if (LightboxOptions.resizeSpeed < 1) LightboxOptions.resizeSpeed = 1;
70
+
71
+ this.resizeDuration = LightboxOptions.animate ? ((11 - LightboxOptions.resizeSpeed) * 0.15) : 0;
72
+ this.overlayDuration = LightboxOptions.animate ? 0.2 : 0; // shadow fade in/out duration
73
+
74
+ // When Lightbox starts it will resize itself from 250 by 250 to the current image dimension.
75
+ // If animations are turned off, it will be hidden as to prevent a flicker of a
76
+ // white 250 by 250 box.
77
+ var size = (LightboxOptions.animate ? 250 : 1) + 'px';
78
+
79
+
80
+ // Code inserts html at the bottom of the page that looks similar to this:
81
+ //
82
+ // <div id="overlay"></div>
83
+ // <div id="lightbox">
84
+ // <div id="outerImageContainer">
85
+ // <div id="imageContainer">
86
+ // <img id="lightboxImage">
87
+ // <div style="" id="hoverNav">
88
+ // <a href="#" id="prevLink"></a>
89
+ // <a href="#" id="nextLink"></a>
90
+ // </div>
91
+ // <div id="loading">
92
+ // <a href="#" id="loadingLink">
93
+ // <img src="images/loading.gif">
94
+ // </a>
95
+ // </div>
96
+ // </div>
97
+ // </div>
98
+ // <div id="imageDataContainer">
99
+ // <div id="imageData">
100
+ // <div id="imageDetails">
101
+ // <span id="caption"></span>
102
+ // <span id="numberDisplay"></span>
103
+ // </div>
104
+ // <div id="bottomNav">
105
+ // <a href="#" id="bottomNavClose">
106
+ // <img src="images/close.gif">
107
+ // </a>
108
+ // </div>
109
+ // </div>
110
+ // </div>
111
+ // </div>
112
+
113
+
114
+ var objBody = $$('body')[0];
115
+
116
+ objBody.appendChild(Builder.node('div',{id:'overlay'}));
117
+
118
+ objBody.appendChild(Builder.node('div',{id:'lightbox'}, [
119
+ Builder.node('div',{id:'outerImageContainer'},
120
+ Builder.node('div',{id:'imageContainer'}, [
121
+ Builder.node('img',{id:'lightboxImage'}),
122
+ Builder.node('div',{id:'hoverNav'}, [
123
+ Builder.node('a',{id:'prevLink', href: '#' }),
124
+ Builder.node('a',{id:'nextLink', href: '#' })
125
+ ]),
126
+ Builder.node('div',{id:'loading'},
127
+ Builder.node('a',{id:'loadingLink', href: '#' },
128
+ Builder.node('img', {src: LightboxOptions.fileLoadingImage})
129
+ )
130
+ )
131
+ ])
132
+ ),
133
+ Builder.node('div', {id:'imageDataContainer'},
134
+ Builder.node('div',{id:'imageData'}, [
135
+ Builder.node('div',{id:'imageDetails'}, [
136
+ Builder.node('span',{id:'caption'}),
137
+ Builder.node('span',{id:'numberDisplay'})
138
+ ]),
139
+ Builder.node('div',{id:'bottomNav'},
140
+ Builder.node('a',{id:'bottomNavClose', href: '#' },
141
+ Builder.node('img', { src: LightboxOptions.fileBottomNavCloseImage })
142
+ )
143
+ )
144
+ ])
145
+ )
146
+ ]));
147
+
148
+
149
+ $('overlay').hide().observe('click', (function() { this.end(); }).bind(this));
150
+ $('lightbox').hide().observe('click', (function(event) { if (event.element().id == 'lightbox') this.end(); }).bind(this));
151
+ $('outerImageContainer').setStyle({ width: size, height: size });
152
+ $('prevLink').observe('click', (function(event) { event.stop(); this.changeImage(this.activeImage - 1); }).bindAsEventListener(this));
153
+ $('nextLink').observe('click', (function(event) { event.stop(); this.changeImage(this.activeImage + 1); }).bindAsEventListener(this));
154
+ $('loadingLink').observe('click', (function(event) { event.stop(); this.end(); }).bind(this));
155
+ $('bottomNavClose').observe('click', (function(event) { event.stop(); this.end(); }).bind(this));
156
+
157
+ var th = this;
158
+ (function(){
159
+ var ids =
160
+ 'overlay lightbox outerImageContainer imageContainer lightboxImage hoverNav prevLink nextLink loading loadingLink ' +
161
+ 'imageDataContainer imageData imageDetails caption numberDisplay bottomNav bottomNavClose';
162
+ $w(ids).each(function(id){ th[id] = $(id); });
163
+ }).defer();
164
+ },
165
+
166
+ //
167
+ // updateImageList()
168
+ // Loops through anchor tags looking for 'lightbox' references and applies onclick
169
+ // events to appropriate links. You can rerun after dynamically adding images w/ajax.
170
+ //
171
+ updateImageList: function() {
172
+ this.updateImageList = Prototype.emptyFunction;
173
+
174
+ document.observe('click', (function(event){
175
+ var target = event.findElement('a[rel^=lightbox]') || event.findElement('area[rel^=lightbox]');
176
+ if (target) {
177
+ event.stop();
178
+ this.start(target);
179
+ }
180
+ }).bind(this));
181
+ },
182
+
183
+ //
184
+ // start()
185
+ // Display overlay and lightbox. If image is part of a set, add siblings to imageArray.
186
+ //
187
+ start: function(imageLink) {
188
+
189
+ $$('select', 'object', 'embed').each(function(node){ node.style.visibility = 'hidden' });
190
+
191
+ // stretch overlay to fill page and fade in
192
+ var arrayPageSize = this.getPageSize();
193
+ $('overlay').setStyle({ width: arrayPageSize[0] + 'px', height: arrayPageSize[1] + 'px' });
194
+
195
+ new Effect.Appear(this.overlay, { duration: this.overlayDuration, from: 0.0, to: LightboxOptions.overlayOpacity });
196
+
197
+ this.imageArray = [];
198
+ var imageNum = 0;
199
+
200
+ if ((imageLink.getAttribute("rel") == 'lightbox')){
201
+ // if image is NOT part of a set, add single image to imageArray
202
+ this.imageArray.push([imageLink.href, imageLink.title]);
203
+ } else {
204
+ // if image is part of a set..
205
+ this.imageArray =
206
+ $$(imageLink.tagName + '[href][rel="' + imageLink.rel + '"]').
207
+ collect(function(anchor){ return [anchor.href, anchor.title]; }).
208
+ uniq();
209
+
210
+ while (this.imageArray[imageNum][0] != imageLink.href) { imageNum++; }
211
+ }
212
+
213
+ // calculate top and left offset for the lightbox
214
+ var arrayPageScroll = document.viewport.getScrollOffsets();
215
+ var lightboxTop = arrayPageScroll[1] + (document.viewport.getHeight() / 10);
216
+ var lightboxLeft = arrayPageScroll[0];
217
+ this.lightbox.setStyle({ top: lightboxTop + 'px', left: lightboxLeft + 'px' }).show();
218
+
219
+ this.changeImage(imageNum);
220
+ },
221
+
222
+ //
223
+ // changeImage()
224
+ // Hide most elements and preload image in preparation for resizing image container.
225
+ //
226
+ changeImage: function(imageNum) {
227
+
228
+ this.activeImage = imageNum; // update global var
229
+
230
+ // hide elements during transition
231
+ if (LightboxOptions.animate) this.loading.show();
232
+ this.lightboxImage.hide();
233
+ this.hoverNav.hide();
234
+ this.prevLink.hide();
235
+ this.nextLink.hide();
236
+ // HACK: Opera9 does not currently support scriptaculous opacity and appear fx
237
+ this.imageDataContainer.setStyle({opacity: .0001});
238
+ this.numberDisplay.hide();
239
+
240
+ var imgPreloader = new Image();
241
+
242
+ // once image is preloaded, resize image container
243
+ imgPreloader.onload = (function(){
244
+ this.lightboxImage.src = this.imageArray[this.activeImage][0];
245
+ /*Bug Fixed by Andy Scott*/
246
+ this.lightboxImage.width = imgPreloader.width;
247
+ this.lightboxImage.height = imgPreloader.height;
248
+ /*End of Bug Fix*/
249
+ this.resizeImageContainer(imgPreloader.width, imgPreloader.height);
250
+ }).bind(this);
251
+ imgPreloader.src = this.imageArray[this.activeImage][0];
252
+ },
253
+
254
+ //
255
+ // resizeImageContainer()
256
+ //
257
+ resizeImageContainer: function(imgWidth, imgHeight) {
258
+
259
+ // get current width and height
260
+ var widthCurrent = this.outerImageContainer.getWidth();
261
+ var heightCurrent = this.outerImageContainer.getHeight();
262
+
263
+ // get new width and height
264
+ var widthNew = (imgWidth + LightboxOptions.borderSize * 2);
265
+ var heightNew = (imgHeight + LightboxOptions.borderSize * 2);
266
+
267
+ // scalars based on change from old to new
268
+ var xScale = (widthNew / widthCurrent) * 100;
269
+ var yScale = (heightNew / heightCurrent) * 100;
270
+
271
+ // calculate size difference between new and old image, and resize if necessary
272
+ var wDiff = widthCurrent - widthNew;
273
+ var hDiff = heightCurrent - heightNew;
274
+
275
+ if (hDiff != 0) new Effect.Scale(this.outerImageContainer, yScale, {scaleX: false, duration: this.resizeDuration, queue: 'front'});
276
+ if (wDiff != 0) new Effect.Scale(this.outerImageContainer, xScale, {scaleY: false, duration: this.resizeDuration, delay: this.resizeDuration});
277
+
278
+ // if new and old image are same size and no scaling transition is necessary,
279
+ // do a quick pause to prevent image flicker.
280
+ var timeout = 0;
281
+ if ((hDiff == 0) && (wDiff == 0)){
282
+ timeout = 100;
283
+ if (Prototype.Browser.IE) timeout = 250;
284
+ }
285
+
286
+ (function(){
287
+ this.prevLink.setStyle({ height: imgHeight + 'px' });
288
+ this.nextLink.setStyle({ height: imgHeight + 'px' });
289
+ this.imageDataContainer.setStyle({ width: widthNew + 'px' });
290
+
291
+ this.showImage();
292
+ }).bind(this).delay(timeout / 1000);
293
+ },
294
+
295
+ //
296
+ // showImage()
297
+ // Display image and begin preloading neighbors.
298
+ //
299
+ showImage: function(){
300
+ this.loading.hide();
301
+ new Effect.Appear(this.lightboxImage, {
302
+ duration: this.resizeDuration,
303
+ queue: 'end',
304
+ afterFinish: (function(){ this.updateDetails(); }).bind(this)
305
+ });
306
+ this.preloadNeighborImages();
307
+ },
308
+
309
+ //
310
+ // updateDetails()
311
+ // Display caption, image number, and bottom nav.
312
+ //
313
+ updateDetails: function() {
314
+
315
+ this.caption.update(this.imageArray[this.activeImage][1]).show();
316
+
317
+ // if image is part of set display 'Image x of x'
318
+ if (this.imageArray.length > 1){
319
+ this.numberDisplay.update( LightboxOptions.labelImage + ' ' + (this.activeImage + 1) + ' ' + LightboxOptions.labelOf + ' ' + this.imageArray.length).show();
320
+ }
321
+
322
+ new Effect.Parallel(
323
+ [
324
+ new Effect.SlideDown(this.imageDataContainer, { sync: true, duration: this.resizeDuration, from: 0.0, to: 1.0 }),
325
+ new Effect.Appear(this.imageDataContainer, { sync: true, duration: this.resizeDuration })
326
+ ],
327
+ {
328
+ duration: this.resizeDuration,
329
+ afterFinish: (function() {
330
+ // update overlay size and update nav
331
+ var arrayPageSize = this.getPageSize();
332
+ this.overlay.setStyle({ width: arrayPageSize[0] + 'px', height: arrayPageSize[1] + 'px' });
333
+ this.updateNav();
334
+ }).bind(this)
335
+ }
336
+ );
337
+ },
338
+
339
+ //
340
+ // updateNav()
341
+ // Display appropriate previous and next hover navigation.
342
+ //
343
+ updateNav: function() {
344
+
345
+ this.hoverNav.show();
346
+
347
+ // if not first image in set, display prev image button
348
+ if (this.activeImage > 0) this.prevLink.show();
349
+
350
+ // if not last image in set, display next image button
351
+ if (this.activeImage < (this.imageArray.length - 1)) this.nextLink.show();
352
+
353
+ this.enableKeyboardNav();
354
+ },
355
+
356
+ //
357
+ // enableKeyboardNav()
358
+ //
359
+ enableKeyboardNav: function() {
360
+ document.observe('keydown', this.keyboardAction);
361
+ },
362
+
363
+ //
364
+ // disableKeyboardNav()
365
+ //
366
+ disableKeyboardNav: function() {
367
+ document.stopObserving('keydown', this.keyboardAction);
368
+ },
369
+
370
+ //
371
+ // keyboardAction()
372
+ //
373
+ keyboardAction: function(event) {
374
+ var keycode = event.keyCode;
375
+
376
+ var escapeKey;
377
+ if (event.DOM_VK_ESCAPE) { // mozilla
378
+ escapeKey = event.DOM_VK_ESCAPE;
379
+ } else { // ie
380
+ escapeKey = 27;
381
+ }
382
+
383
+ var key = String.fromCharCode(keycode).toLowerCase();
384
+
385
+ if (key.match(/x|o|c/) || (keycode == escapeKey)){ // close lightbox
386
+ this.end();
387
+ } else if ((key == 'p') || (keycode == 37)){ // display previous image
388
+ if (this.activeImage != 0){
389
+ this.disableKeyboardNav();
390
+ this.changeImage(this.activeImage - 1);
391
+ }
392
+ } else if ((key == 'n') || (keycode == 39)){ // display next image
393
+ if (this.activeImage != (this.imageArray.length - 1)){
394
+ this.disableKeyboardNav();
395
+ this.changeImage(this.activeImage + 1);
396
+ }
397
+ }
398
+ },
399
+
400
+ //
401
+ // preloadNeighborImages()
402
+ // Preload previous and next images.
403
+ //
404
+ preloadNeighborImages: function(){
405
+ var preloadNextImage, preloadPrevImage;
406
+ if (this.imageArray.length > this.activeImage + 1){
407
+ preloadNextImage = new Image();
408
+ preloadNextImage.src = this.imageArray[this.activeImage + 1][0];
409
+ }
410
+ if (this.activeImage > 0){
411
+ preloadPrevImage = new Image();
412
+ preloadPrevImage.src = this.imageArray[this.activeImage - 1][0];
413
+ }
414
+
415
+ },
416
+
417
+ //
418
+ // end()
419
+ //
420
+ end: function() {
421
+ this.disableKeyboardNav();
422
+ this.lightbox.hide();
423
+ new Effect.Fade(this.overlay, { duration: this.overlayDuration });
424
+ $$('select', 'object', 'embed').each(function(node){ node.style.visibility = 'visible' });
425
+ },
426
+
427
+ //
428
+ // getPageSize()
429
+ //
430
+ getPageSize: function() {
431
+
432
+ var xScroll, yScroll;
433
+
434
+ if (window.innerHeight && window.scrollMaxY) {
435
+ xScroll = window.innerWidth + window.scrollMaxX;
436
+ yScroll = window.innerHeight + window.scrollMaxY;
437
+ } else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
438
+ xScroll = document.body.scrollWidth;
439
+ yScroll = document.body.scrollHeight;
440
+ } else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
441
+ xScroll = document.body.offsetWidth;
442
+ yScroll = document.body.offsetHeight;
443
+ }
444
+
445
+ var windowWidth, windowHeight;
446
+
447
+ if (self.innerHeight) { // all except Explorer
448
+ if(document.documentElement.clientWidth){
449
+ windowWidth = document.documentElement.clientWidth;
450
+ } else {
451
+ windowWidth = self.innerWidth;
452
+ }
453
+ windowHeight = self.innerHeight;
454
+ } else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
455
+ windowWidth = document.documentElement.clientWidth;
456
+ windowHeight = document.documentElement.clientHeight;
457
+ } else if (document.body) { // other Explorers
458
+ windowWidth = document.body.clientWidth;
459
+ windowHeight = document.body.clientHeight;
460
+ }
461
+
462
+ // for small pages with total height less then height of the viewport
463
+ if(yScroll < windowHeight){
464
+ pageHeight = windowHeight;
465
+ } else {
466
+ pageHeight = yScroll;
467
+ }
468
+
469
+ // for small pages with total width less then width of the viewport
470
+ if(xScroll < windowWidth){
471
+ pageWidth = xScroll;
472
+ } else {
473
+ pageWidth = windowWidth;
474
+ }
475
+
476
+ return [pageWidth,pageHeight];
477
+ }
478
+ }
479
+
480
+ document.observe('dom:loaded', function () { new Lightbox(); });
package.xml ADDED
@@ -0,0 +1,18 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <?xml version="1.0"?>
2
+ <package>
3
+ <name>VS_Lightbox</name>
4
+ <version>1.0.0</version>
5
+ <stability>stable</stability>
6
+ <license uri="http://opensource.org/licenses/osl-3.0.php">Open Software License (OSL)</license>
7
+ <channel>community</channel>
8
+ <extends/>
9
+ <summary>This small extension will install Lightbox on product detail page</summary>
10
+ <description>This small extension will install Lightbox on product detail page</description>
11
+ <notes>This small extension will install Lightbox on product detail page</notes>
12
+ <authors><author><name>virendra kumar sharma</name><user>virendra</user><email>bhardwajveerendra@gmail.com</email></author></authors>
13
+ <date>2011-12-26</date>
14
+ <time>12:20:02</time>
15
+ <contents><target name="magecommunity"><dir><dir name="VS"><dir name="Lightbox"><dir name="Helper"><file name="Data.php" hash="b5bc6caddfd59fb578fcc566a1a99190"/></dir><dir name="Model"><file name="Magnifierpos.php" hash="0fa3a4ae9554967925ad1236efcbdf9c"/></dir><dir name="etc"><file name="config.xml" hash="22ae10deba6a4528bf443ade5ddd754d"/><file name="system.xml" hash="e007efb5f1ce1865d4eaa7235a2b6279"/></dir></dir></dir></dir></target><target name="magedesign"><dir name="frontend"><dir name="default"><dir name="default"><dir name="layout"><file name="lightbox.xml" hash="eb7040fac70557e73a6bd273eedee555"/></dir><dir name="template"><dir name="lightbox"><file name="media.phtml" hash="e66d5524cfbc2e910d3c716662e1f6a3"/></dir></dir></dir></dir></dir></target><target name="mageskin"><dir><dir name="frontend"><dir name="default"><dir name="default"><dir name="VS"><dir><dir name="css"><file name="lightbox.css" hash="de501f42d328deb2d67cf8ecdb1c8fe2"/></dir><dir name="images"><file name="Thumbs.db" hash="257278ad2d1d38fc662ef73d22a28d33"/><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></dir></dir></dir></dir></target><target name="mage"><dir><dir name="js"><dir name="VS"><file name="Thumbs.db" hash="26d086c38010f70160152a1b62fec78d"/><file name="lightbox.js" hash="c5c7c74acf9e5afe11a886a6dc0e14a8"/></dir></dir></dir></target></contents>
16
+ <compatible/>
17
+ <dependencies><required><php><min>5.2.0</min><max>6.0.0</max></php></required></dependencies>
18
+ </package>
skin/frontend/default/default/VS/css/lightbox.css ADDED
@@ -0,0 +1,27 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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/prevlabel.gif) left 15% no-repeat; }
17
+ #nextLink:hover, #nextLink:visited:hover { background: url(../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; }
skin/frontend/default/default/VS/images/Thumbs.db ADDED
Binary file
skin/frontend/default/default/VS/images/bullet.gif ADDED
Binary file
skin/frontend/default/default/VS/images/close.gif ADDED
Binary file
skin/frontend/default/default/VS/images/closelabel.gif ADDED
Binary file
skin/frontend/default/default/VS/images/donate-button.gif ADDED
Binary file
skin/frontend/default/default/VS/images/download-icon.gif ADDED
Binary file
skin/frontend/default/default/VS/images/image-1.jpg ADDED
Binary file
skin/frontend/default/default/VS/images/loading.gif ADDED
Binary file
skin/frontend/default/default/VS/images/nextlabel.gif ADDED
Binary file
skin/frontend/default/default/VS/images/prevlabel.gif ADDED
Binary file
skin/frontend/default/default/VS/images/thumb-1.jpg ADDED
Binary file