VS_Featurezoom - Version 1.10.0

Version Notes

This script lets you view a magnified portion of any image upon moving your mouse over it. A magnifying glass appears alongside the image displaying the magnified area on demand. The user can toggle the zoom level by using the mousewheel. It's great to use on product images, photos, or other images with lots of details you want users to be able to get into on command.

Download this release

Release Info

Developer	Magento Core Team
Extension	VS_Featurezoom
Version	1.10.0
Comparing to
See all releases

Code changes from version 1.0.9 to 1.10.0

Files changed (8) hide show

app/code/community/VS/Featurezoom/Model/Magnifierpos.php +46 -0
app/code/community/VS/Featurezoom/etc/config.xml +16 -1
app/code/community/VS/Featurezoom/etc/system.xml +105 -36
app/design/frontend/default/default/template/featurezoom/media.phtml +34 -30
js/VS/featuredimagezoomer.js +0 -13
js/VS/opc-ajax-loader.gif +0 -0
js/VS/spinningred.gif +0 -0
package.xml +5 -5

app/code/community/VS/Featurezoom/Model/Magnifierpos.php ADDED Viewed

	@@ -0,0 +1,46 @@


1	+ <?php
2	+ /**
3	+ * aheadWorks Co.
4	+ *
5	+ * NOTICE OF LICENSE
6	+ *
7	+ * This source file is subject to the EULA
8	+ * that is bundled with this package in the file LICENSE.txt.
9	+ * It is also available through the world-wide-web at this URL:
10	+ * http://ecommerce.aheadworks.com/LICENSE-L.txt
11	+ *
12	+ * @category AW
13	+ * @package AW_Blog
14	+ * @copyright Copyright (c) 2009-2010 aheadWorks Co. (http://www.aheadworks.com)
15	+ * @license http://ecommerce.aheadworks.com/LICENSE-L.txt
16	+ */
17	+
18	+ class VS_Featurezoom_Model_Magnifierpos{
19	+ protected $_options;
20	+ const MAGNIFIERPOS_RIGHT = 'right';
21	+ const MAGNIFIERPOS_LEFT = 'left';
22	+ const MAGNIFIERPOS_TOP = 'top';
23	+ const MAGNIFIERPOS_BOTTOM = 'bottom';
24	+
25	+ public function toOptionArray(){
26	+ if (!$this->_options) {
27	+ $this->_options[] = array(
28	+ 'value'=>self::MAGNIFIERPOS_RIGHT,
29	+ 'label'=>Mage::helper('featurezoom')->__('Right')
30	+ );
31	+ $this->_options[] = array(
32	+ 'value'=>self::MAGNIFIERPOS_LEFT,
33	+ 'label'=>Mage::helper('featurezoom')->__('Left')
34	+ );
35	+ $this->_options[] = array(
36	+ 'value'=>self::MAGNIFIERPOS_TOP,
37	+ 'label'=>Mage::helper('featurezoom')->__('Top')
38	+ );
39	+ $this->_options[] = array(
40	+ 'value'=>self::MAGNIFIERPOS_BOTTOM,
41	+ 'label'=>Mage::helper('featurezoom')->__('Bottom')
42	+ );
43	+ }
44	+ return $this->_options;
45	+ }
46	+ }

app/code/community/VS/Featurezoom/etc/config.xml CHANGED Viewed

	@@ -12,6 +12,11 @@
12	<class>VS_Featurezoom_Helper</class>
13	</featurezoom>
14	</helpers>





15	<resources>
16	<featurezoom_setup>
17	<setup>
	@@ -36,9 +41,19 @@
36	<default>
37	<featurezoom>
38	<general>
39	- <defaulfeaturezoom>0</defaulfeaturezoom>

40	</general>








41	</featurezoom>

42	</default>
43	<frontend>
44	<layout>


12	<class>VS_Featurezoom_Helper</class>
13	</featurezoom>
14	</helpers>
15	+ <models>
16	+ <featurezoom>
17	+ <class>VS_Featurezoom_Model</class>
18	+ </featurezoom>
19	+ </models>
20	<resources>
21	<featurezoom_setup>
22	<setup>

41	<default>
42	<featurezoom>
43	<general>
44	+ <defaulfeaturezoom>1</defaulfeaturezoom>
45	+ <magnifierpos>right</magnifierpos>
46	</general>
47	+ <zoomrange>
48	+ <start>3</start>
49	+ <end>10</end>
50	+ </zoomrange>
51	+ <magnifiersize>
52	+ <height>400</height>
53	+ <width>400</width>
54	+ </magnifiersize>
55	</featurezoom>
56	+
57	</default>
58	<frontend>
59	<layout>

app/code/community/VS/Featurezoom/etc/system.xml CHANGED Viewed

@@ -1,36 +1,105 @@
-            -
            <?xml version="1.0" encoding="UTF-8"?>
-            -
-            -
            <config>
-            -
                <sections>
-            -
                    <featurezoom translate="label" >
-            -
                        <label>VS Feature Zoom</label>
-            -
                        <tab>catalog</tab>
-            -
                        <frontend_type>text</frontend_type>
-            -
                        <sort_order>90</sort_order>
-            -
                        <show_in_default>1</show_in_default>
-            -
                        <show_in_website>1</show_in_website>
-            -
                        <show_in_store>1</show_in_store>
-            -
                        <groups>
-            -
                            <general translate="label">
-            -
                                <label>VS Feature Zoom</label>
-            -
                                <frontend_type>text</frontend_type>
-            -
                                <sort_order>1</sort_order>
-            -
                                <show_in_default>1</show_in_default>
-            -
                                <show_in_website>1</show_in_website>
-            -
                                <show_in_store>1</show_in_store>
-            -
                                <fields>
-            -
                                    <enabled translate="label">
-            -
                                        <label>Enabled</label>
-            -
                                        <frontend_type>select</frontend_type>
-            -
                                        <source_model>adminhtml/system_config_source_yesno</source_model>
-            -
                                        <sort_order>70</sort_order>
-            -
                                        <show_in_default>1</show_in_default>
-            -
                                        <show_in_website>1</show_in_website>
-            -
                                        <show_in_store>1</show_in_store>
-            -
                                    </enabled>
-            -
                                </fields>
-            -
                            </general>
-            -
                        </groups>
-            -
                    </featurezoom>
-            -
                </sections>
-            -
            </config>


1	+ <?xml version="1.0" encoding="UTF-8"?>
2	+
3	+ <config>
4	+ <sections>
5	+ <featurezoom translate="label" >
6	+ <label>VS Feature Zoom</label>
7	+ <tab>catalog</tab>
8	+ <frontend_type>text</frontend_type>
9	+ <sort_order>90</sort_order>
10	+ <show_in_default>1</show_in_default>
11	+ <show_in_website>1</show_in_website>
12	+ <show_in_store>1</show_in_store>
13	+ <groups>
14	+ <general translate="label">
15	+ <label>Feature Zoom Settings</label>
16	+ <frontend_type>text</frontend_type>
17	+ <sort_order>1</sort_order>
18	+ <show_in_default>1</show_in_default>
19	+ <show_in_website>1</show_in_website>
20	+ <show_in_store>1</show_in_store>
21	+ <fields>
22	+ <enabled translate="label">
23	+ <label>Enabled</label>
24	+ <frontend_type>select</frontend_type>
25	+ <source_model>adminhtml/system_config_source_yesno</source_model>
26	+ <sort_order>1</sort_order>
27	+ <show_in_default>1</show_in_default>
28	+ <show_in_website>1</show_in_website>
29	+ <show_in_store>1</show_in_store>
30	+ </enabled>
31	+
32	+ <magnifierpos translate="label">
33	+ <label>Magnifier Position</label>
34	+ <frontend_type>select</frontend_type>
35	+ <source_model>featurezoom/magnifierpos</source_model>
36	+ <sort_order>3</sort_order>
37	+ <show_in_default>1</show_in_default>
38	+ <show_in_website>1</show_in_website>
39	+ <show_in_store>1</show_in_store>
40	+ </magnifierpos>
41	+ </fields>
42	+ </general>
43	+ <zoomrange translate="label">
44	+ <label>Zoom Range Settings</label>
45	+ <frontend_type>text</frontend_type>
46	+ <sort_order>2</sort_order>
47	+ <show_in_default>1</show_in_default>
48	+ <show_in_website>1</show_in_website>
49	+ <show_in_store>1</show_in_store>
50	+ <fields>
51	+ <start translate="label">
52	+ <label>Zoom Range Start</label>
53	+ <comment>use numbers e.g. 1 to 10</comment>
54	+ <validate>required-entry validate-number</validate>
55	+ <frontend_type>text</frontend_type>
56	+ <sort_order>4</sort_order>
57	+ <show_in_default>1</show_in_default>
58	+ <show_in_website>1</show_in_website>
59	+ <show_in_store>1</show_in_store>
60	+ </start>
61	+ <end translate="label">
62	+ <label>Zoom Range End</label>
63	+ <comment>use numbers e.g. 1 to 10</comment>
64	+ <validate>required-entry validate-number</validate>
65	+ <frontend_type>text</frontend_type>
66	+ <sort_order>5</sort_order>
67	+ <show_in_default>1</show_in_default>
68	+ <show_in_website>1</show_in_website>
69	+ <show_in_store>1</show_in_store>
70	+ </end>
71	+ </fields>
72	+ </zoomrange>
73	+ <magnifiersize translate="label">
74	+ <label>Magnifier Size Settings</label>
75	+ <frontend_type>text</frontend_type>
76	+ <sort_order>3</sort_order>
77	+ <show_in_default>1</show_in_default>
78	+ <show_in_website>1</show_in_website>
79	+ <show_in_store>1</show_in_store>
80	+ <fields>
81	+ <height translate="label">
82	+ <label>Magnifier Height</label>
83	+ <validate>required-entry validate-number</validate>
84	+ <frontend_type>text</frontend_type>
85	+ <sort_order>2</sort_order>
86	+ <show_in_default>1</show_in_default>
87	+ <show_in_website>1</show_in_website>
88	+ <show_in_store>1</show_in_store>
89	+ </height>
90	+ <width translate="label">
91	+ <label>Zoom Range Width</label>
92	+ <frontend_type>text</frontend_type>
93	+ <validate>required-entry validate-number</validate>
94	+ <sort_order>5</sort_order>
95	+ <show_in_default>1</show_in_default>
96	+ <show_in_website>1</show_in_website>
97	+ <show_in_store>1</show_in_store>
98	+ </width>
99	+ </fields>
100	+ </magnifiersize>
101	+ </groups>
102	+
103	+ </featurezoom>
104	+ </sections>
105	+ </config>

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

@@ -37,7 +37,7 @@
             <?php if ($_product->getImage() != 'no_selection' && $_product->getImage()): ?>
             <p class="product-image">
                 <?php
-            -
                    $_img = '<img id="image" src="'.$this->helper('catalog/image')->init($_product, 'image').'" alt="'.$this->htmlEscape($this->getImageLabel()).'" title="'.$this->htmlEscape($this->getImageLabel()).'" width="265"  />';
                     echo $_helper->productAttribute($_product, $_img, 'image');
                 ?>
             </p>
@@ -47,7 +47,7 @@
             <?php else: ?>
             <p class="product-image">
                 <?php
-            -
                    $_img = '<img src="'.$this->helper('catalog/image')->init($_product, 'image')->resize(265).'" alt="'.$this->htmlEscape($this->getImageLabel()).'" title="'.$this->htmlEscape($this->getImageLabel()).'" width="265"  />';
                     echo $_helper->productAttribute($_product, $_img, 'image');
                 ?>
             </p>
@@ -57,6 +57,7 @@
                 <h2><?php echo $this->__('More Views') ?></h2>
                 <ul>
                 <?php foreach ($this->getGalleryImages() as $_image): ?>
                     <li>
                         <a onclick="imageswitcher('<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'image', $_image->getFile());?>');" 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>
                     </li>
@@ -65,34 +66,7 @@
             </div>
             	<?php endif; ?>
-            -
            	<script type="text/javascript">
-            -
-            -
            jQuery(document).ready(function($){
-            -
-            -
            	$('#image').addimagezoom({
-            -
            		zoomrange: [3, 10],
-            -
            		magnifiersize: [400,400],
-            -
            		magnifierpos: 'right',
-            -
            		cursorshade: true,
-            -
            		largeimage: '<?php echo $this->helper('catalog/image')->init($_product, 'image');?>' //<-- No comma after last option!
-            -
            	})
-            -
            	/*$('#image2').addimagezoom({
-            -
            		zoomrange: [5, 5],
-            -
            		magnifiersize: [400,400],
-            -
            		magnifierpos: 'right',
-            -
            		cursorshade: true,
-            -
            		cursorshadecolor: 'pink',
-            -
            		cursorshadeopacity: 0.3,
-            -
            		cursorshadeborder: '1px solid red',
-            -
            		largeimage: 'images/big_img.jpg' //<-- No comma after last option!
-            -
            	})*/
-            -
-            -
            	/*$('#image3').addimagezoom()*/
-            -
-            -
            })
-            -
-            -
            </script>
             <style type="text/css">
             .magnifyarea{ /* CSS to add shadow to magnified image. Optional */
                 box-shadow: 5px 5px 7px #818181;
@@ -101,4 +75,34 @@ jQuery(document).ready(function($){
                 filter: progid:DXImageTransform.Microsoft.dropShadow(color=#818181, offX=5, offY=5, positive=true);
                 background: white;
+            }
-            -
            </style>


37	<?php if ($_product->getImage() != 'no_selection' && $_product->getImage()): ?>
38	<p class="product-image">
39	<?php
40	+ $_img = '<img id="image1" src="'.$this->helper('catalog/image')->init($_product, 'image').'" alt="'.$this->htmlEscape($this->getImageLabel()).'" title="'.$this->htmlEscape($this->getImageLabel()).'" width="265" />';
41	echo $_helper->productAttribute($_product, $_img, 'image');
42	?>
43	</p>

47	<?php else: ?>
48	<p class="product-image">
49	<?php
50	+ $_img = '<img src="'.$this->helper('catalog/image')->init($_product, 'image')->resize(265).'" alt="'.$this->htmlEscape($this->getImageLabel()).'" title="'.$this->htmlEscape($this->getImageLabel()).'" width="265" id="image1" />';
51	echo $_helper->productAttribute($_product, $_img, 'image');
52	?>
53	</p>

57	<h2><?php echo $this->__('More Views') ?></h2>
58	<ul>
59	<?php foreach ($this->getGalleryImages() as $_image): ?>
60	+
61	<li>
62	<a onclick="imageswitcher('<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'image', $_image->getFile());?>');" 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>
63	</li>

66	</div>
67
68	<?php endif; ?>











69
















70	<style type="text/css">
71	.magnifyarea{ /* CSS to add shadow to magnified image. Optional */
72	box-shadow: 5px 5px 7px #818181;

75	filter: progid:DXImageTransform.Microsoft.dropShadow(color=#818181, offX=5, offY=5, positive=true);
76	background: white;
77	}
78	+ </style>
79	+
80	+ <script type="text/javascript">
81	+
82	+ function imageswitcher(imagename){
83	+ //var newImg = imagename.src;
84	+
85	+ jQuery('#image1').attr('src',imagename);
86	+ var options = {
87	+ zoomrange: [<?php echo Mage::getStoreConfig('featurezoom/zoomrange/start');?>, <?php echo Mage::getStoreConfig('featurezoom/zoomrange/end');?>],
88	+ magnifiersize: [<?php echo Mage::getStoreConfig('featurezoom/magnifiersize/height');?>,<?php echo Mage::getStoreConfig('featurezoom/magnifiersize/width');?>],
89	+ magnifierpos: '<?php echo Mage::getStoreConfig('featurezoom/general/magnifierpos');?>',
90	+ cursorshade: true,
91	+ largeimage: imagename //<-- No comma after last option!
92	+ }
93	+ jQuery('#image1').addimagezoom(options);
94	+ }
95	+ </script>
96	+ <script type="text/javascript">
97	+ //<![CDATA[
98	+ Event.observe(window, 'load', function() {
99	+ jQuery('#image1').addimagezoom({
100	+ zoomrange: [<?php echo Mage::getStoreConfig('featurezoom/zoomrange/start');?>, <?php echo Mage::getStoreConfig('featurezoom/zoomrange/end');?>],
101	+ magnifiersize: [<?php echo Mage::getStoreConfig('featurezoom/magnifiersize/height');?>,<?php echo Mage::getStoreConfig('featurezoom/magnifiersize/width');?>],
102	+ magnifierpos: '<?php echo Mage::getStoreConfig('featurezoom/general/magnifierpos');?>',
103	+ cursorshade: true,
104	+ largeimage: '<?php echo $this->helper('catalog/image')->init($_product, 'image');?>' //<-- No comma after last option!
105	+ })
106	+ });
107	+ //]]>
108	+ </script>

js/VS/featuredimagezoomer.js CHANGED Viewed

@@ -229,16 +229,3 @@ jQuery.fn.addimagezoom=function(options){
             		featuredimagezoomer.init($, $(this), options);
             	});
+            }
-            -
            function imageswitcher(imagename){
-            -
            	//var newImg	=	imagename.src;
-            -
-            -
            	jQuery('#image').attr('src',imagename);
-            -
            	var options	=	{
-            -
            		zoomrange: [3, 10],
-            -
            		magnifiersize: [400,400],
-            -
            		magnifierpos: 'right',
-            -
            		cursorshade: true,
-            -
            		largeimage: imagename //<-- No comma after last option!
-            -
            	}
-            -
            		jQuery('#image').addimagezoom(options);
-            -
            }

             		featuredimagezoomer.init($, $(this), options);
             	});
+            }

js/VS/opc-ajax-loader.gif ADDED Viewed

Binary file

js/VS/spinningred.gif ADDED Viewed

Binary file

package.xml CHANGED Viewed

	@@ -1,7 +1,7 @@
1	<?xml version="1.0"?>
2	<package>
3	<name>VS_Featurezoom</name>
4	- <version>1.0.9</version>
5	<stability>stable</stability>
6	<license uri="http://www.opensource.org/licenses/osl-3.0.php">OSL v3.0</license>
7	<channel>community</channel>
	@@ -9,10 +9,10 @@
9	<summary>This script lets you view a magnified portion of any image upon moving your mouse over it. A magnifying glass appears alongside the image displaying the magnified area on demand. The user can toggle the zoom level by using the mousewheel. It's great to use on product images, photos, or other images with lots of details you want users to be able to get into on command.</summary>
10	<description>This script lets you view a magnified portion of any image upon moving your mouse over it. A magnifying glass appears alongside the image displaying the magnified area on demand. The user can toggle the zoom level by using the mousewheel. It's great to use on product images, photos, or other images with lots of details you want users to be able to get into on command.</description>
11	<notes>This script lets you view a magnified portion of any image upon moving your mouse over it. A magnifying glass appears alongside the image displaying the magnified area on demand. The user can toggle the zoom level by using the mousewheel. It's great to use on product images, photos, or other images with lots of details you want users to be able to get into on command.</notes>
12	- <authors><author><name>virendra kumar sharma</name><user>auto-converted</user><email>~~virendra.sharma~~@~~dotsquares~~.com</email></author></authors>
13	- <date>2011-04-25</date>
14	- <time>04:35:54</time>
15	- <contents><target name="magecommunity"><dir name="VS"><dir name="Featurezoom"><dir name="Helper"><file name="Data.php" hash="77e3dc4cd8081d329bbadc986625c956"/></dir><dir name="~~etc~~"><file name="~~config~~.~~xml~~" hash="~~147991bec1b7abfabb24ef785a276bab~~"~~/><file~~ name="~~system.xml~~" ~~hash="47ba372fbd4a2586c15743450bb86038"/></dir></dir></dir></target~~><~~target~~ name="~~mageetc~~"~~><dir~~ ~~name~~="~~modules~~"><file name="~~VS_Featurezoom~~.xml" hash="~~87d922669f0ad2ceec5df652a2e76485~~"/></dir></target><target name="magedesign"><dir name="frontend"><dir name="default"><dir name="default"><dir name="layout"><file name="featurezoom.xml" hash="45d5fffe9bc76bfdd4b9e2a93642250e"/></dir><dir name="template"><dir name="featurezoom"><file name="media.phtml" hash="~~99733626ff4246d64323afb6455d9a18~~"/></dir></dir></dir></dir></dir></target><target name="mage"><dir name="js"><dir name="VS"><file name="featuredimagezoomer.js" hash="~~f66baa4c7e1692c00856805f2fd80bbd~~"/><file name="jquery-1.3.2.min.js" hash="25e59325cb47d2ab5ea650d47f431a9c"/></dir></dir></target></contents>
16	<compatible/>
17	<dependencies/>
18	</package>


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

9	<summary>This script lets you view a magnified portion of any image upon moving your mouse over it. A magnifying glass appears alongside the image displaying the magnified area on demand. The user can toggle the zoom level by using the mousewheel. It's great to use on product images, photos, or other images with lots of details you want users to be able to get into on command.</summary>
10	<description>This script lets you view a magnified portion of any image upon moving your mouse over it. A magnifying glass appears alongside the image displaying the magnified area on demand. The user can toggle the zoom level by using the mousewheel. It's great to use on product images, photos, or other images with lots of details you want users to be able to get into on command.</description>
11	<notes>This script lets you view a magnified portion of any image upon moving your mouse over it. A magnifying glass appears alongside the image displaying the magnified area on demand. The user can toggle the zoom level by using the mousewheel. It's great to use on product images, photos, or other images with lots of details you want users to be able to get into on command.</notes>
12	+ <authors><author><name>virendra kumar sharma</name><user>auto-converted</user><email>bhardwajveerendra@gmail.com</email></author></authors>
13	+ <date>2011-05-27</date>
14	+ <time>10:07:07</time>
15	+ <contents><target name="magecommunity"><dir name="VS"><dir name="Featurezoom"><dir name="Helper"><file name="Data.php" hash="77e3dc4cd8081d329bbadc986625c956"/></dir><dir name="Model"><file name="Magnifierpos.php" hash="40763623c2e15c1bb3d377a3867569c2"/></dir><dir name="etc"><file name="config.xml" hash="2da1b2086387b405dd06390d6ce3bfc1"/><file name="system.xml" hash="46d3ef791199db63678dad2d1febc6ab"/></dir></dir></dir></target><target name="magedesign"><dir name="frontend"><dir name="default"><dir name="default"><dir name="layout"><file name="featurezoom.xml" hash="45d5fffe9bc76bfdd4b9e2a93642250e"/></dir><dir name="template"><dir name="featurezoom"><file name="media.phtml" hash="63eb165264976702eb952871ecefeac5"/></dir></dir></dir></dir></dir></target><target name="mageetc"><dir name="modules"><file name="VS_Featurezoom.xml" hash="87d922669f0ad2ceec5df652a2e76485"/></dir></target><target name="mage"><dir name="js"><dir name="VS"><file name="featuredimagezoomer.js" hash="e06ca70bcdd7964f3b4097f6b30561e3"/><file name="jquery-1.3.2.min.js" hash="25e59325cb47d2ab5ea650d47f431a9c"/><file name="opc-ajax-loader.gif" hash="e805ea7eca1f34c75ba0f93780d32d38"/><file name="spinningred.gif" hash="46893b8266d278b9a81d65cdd1d8f8bf"/></dir></dir></target></contents>
16	<compatible/>
17	<dependencies/>
18	</package>