VS_QuickLightbox - Version 1.0.1

Version Notes

This small extension will install Lightbox on product detail page

Download this release

Release Info

Developer virendra kumar sharma
Extension VS_QuickLightbox
Version 1.0.1
Comparing to
See all releases


Code changes from version 1.0.0 to 1.0.1

Files changed (15) hide show
  1. js/VS/Thumbs.db +0 -0
  2. js/VS/lightbox.js +480 -0
  3. package.xml +3 -3
  4. skin/frontend/default/default/VS/css/lightbox.css +27 -0
  5. skin/frontend/default/default/VS/images/Thumbs.db +0 -0
  6. skin/frontend/default/default/VS/images/bullet.gif +0 -0
  7. skin/frontend/default/default/VS/images/close.gif +0 -0
  8. skin/frontend/default/default/VS/images/closelabel.gif +0 -0
  9. skin/frontend/default/default/VS/images/donate-button.gif +0 -0
  10. skin/frontend/default/default/VS/images/download-icon.gif +0 -0
  11. skin/frontend/default/default/VS/images/image-1.jpg +0 -0
  12. skin/frontend/default/default/VS/images/loading.gif +0 -0
  13. skin/frontend/default/default/VS/images/nextlabel.gif +0 -0
  14. skin/frontend/default/default/VS/images/prevlabel.gif +0 -0
  15. skin/frontend/default/default/VS/images/thumb-1.jpg +0 -0
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 CHANGED
@@ -1,7 +1,7 @@
1
  <?xml version="1.0"?>
2
  <package>
3
  <name>VS_QuickLightbox</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>
@@ -11,8 +11,8 @@
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-28</date>
14
- <time>05:14:29</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"><file name="VS" hash=""/></dir></dir></dir></dir></target><target name="mage"><dir><dir name="js"><file name="VS" hash=""/></dir></dir></target><target name="mageetc"><dir><dir name="modules"><file name="VS_Lightbox.xml" hash="e43b96db35c1e87e2d59bc98e46c392a"/></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>
1
  <?xml version="1.0"?>
2
  <package>
3
  <name>VS_QuickLightbox</name>
4
+ <version>1.0.1</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>
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-28</date>
14
+ <time>05:59:39</time>
15
+ <contents><target name="magecommunity"><dir><dir name="VS"><dir><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></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><target name="mageetc"><dir><dir name="modules"><file name="VS_Lightbox.xml" hash="e43b96db35c1e87e2d59bc98e46c392a"/></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