ULTIMATE ZOOM MODULE
Contents
1. ee No STORE vem If true toolbar buttons will not be added Disable Zoom In Zoom Out No EA STORE VIEW Buttons If true buttons will not be added Disable Jump to Max Zoom No STORE VIEW Button If true 1 1 buttons will not be added Disable Fit Screen Button No STORE VIEW If true buttons will not be added Disable Percentage Zoomed No Kd STORE VIEW If true percentage will not be shown Disable Rotate Butons No EA STORE VIEW If true rotate buttons will not be added Zoom STORE VIEW Zoom on load or fit to fit image in container Example 20 Max Zoom 800 STORE VIEW Min Zoom 25 STORE VIEW Zoom Step 14 STORE VIEW Zoom Animation Yes iy STORE VIEW Update on resize Yes Le STORE VIEW If false doesn t update on window resize and this can be controlled manually Zoom Base 100 STORE VIEW Value in which is used in calculation of image scale TAUROS MEDIA MANUAL ULTIMATE ZOOM MODULE 17 TAUROS MEDIA FIELD EXPLANATION UI Disabled You can choose to show or not to show the UI icons marked in red above on product page from this dropdown If it is set as yes then the icons will not be shown on product image and it will be a simple scroll in scroll out of the product image zoom Disable Zoom in Zoom out button You can disable buttons from here Similarly Disable jump to max zoom button Disable fit screen button2. Disable percentage zoomed and Disable rotate buttons control the respective buttons on the product page You can enable only the buttons you need Zoom You can fill in a numeric value for zoom here or you can save fit Max zoom You can set in the maximum magnification value that you want to allow Minimum zoom You can set in the maximum magnification value that you want to allow Zoom step This will field controls the zoom steps ie By how much the image will be zoomed in each step Updated on resize This dropdown controls how tie image looks on page resize If false it doesn t update on window resize and this can be controlled manually Zoom base Value in which is used in calculation of image scale 6 FULL SCREEN FEATURED ZOOM This zoom type can be called a full page version of earlier zoom type If enabled the zoom window covers the whole page The zoom window looks like following image ee ef Jse your scrollwheel or the zoom buttons to zoom in out Click and drag to view other pa Its configuration section looks like this TAUROS MEDIA MANUAL ULTIMATE ZOOM MODULE 18 TAUROS MEDIA Zoom fit STORE VIEW Zoom on load or fit to fit image in container Example 20 Max Zoom 800 STORE VIEW Min Zoom 25 STORE VIEW Zoom Step 1 4 STORE VIEW Zoom Scroll text Use your scrollwheel or the zoom buttons to zoon STORE VIEW Fullscreen Message Click on the a
3. 10 TAUROS MEDIA Positions You can choose to display the zoomed image in 4 locations as per your design Right Left m Up Down Position Left Magento Red Furniture Set Quick Overview Position Right Love red You ll love these pieces of handmade modern furniture Position Bottom Magento Red Furniture Set Magento Red Furniture Set Position Top Note that there should be sufficient space on the selected side so that the zoom window can fit in Preload text This is the text displayed while loading the image and zoom when the page loads for the first time You can put some text like Loading zoom here Title You can select yes or no here If yes is selected then it will display product title on the zoomed image Notice the product title on zoomed image The zoom type being used here is Outer zoom right TAUROS MEDIA MANUAL ULTIMATE ZOOM MODULE 11 TAUROS MEDIA Home Sony VAIO VGN TXN27N B 11 1 Notebook PC Product title will be displayed on zoomed image acing for your rtable Sony Vaio zoom effect used in this example image is Outer zoom right Zoom width This is a numeric field and controls the width of the zoomed image window Set it as 200 if you want your zoom window to be 200 px wide Zoom height This is a numeric field and controls the height of the zoomed image window Set it as 200 if you want your zoom window to
4. 4 Additionally If you have a custom theme implemented in your webshop you most probably have then you will have to manually upload the following 2 files from module package to your Magento installation 1 Module file path Ultimate Zoom module app design frontend default default layout zoom xml to your webshop file path app design frontend default yourcustomthemefolder layout 2 Module file path Ultimate Zoom module app design frontend default default template zoom media phtml to your webshop file path lapp design frontend default yourcustomthemefolder template zoom On some systems if you get a prompt asking whether to overwrite the folder please select merge instead 6 5 Now log in to your Magento backend Go to System gt Cache management TAUROS MEDIA MANUAL ULTIMATE ZOOM MODULE 5 TAUROS MEDIA Magento Admin Panel Dashboard Sales Catalog Customers Promotions Newsletter CMS Reports System My Account pee eens j Tools l o Emm E ee Re ee ee j Design Lifetime Sales oE 4 Orders Amot Manage Currency Rates 0 00 Average Orders 0 00 Last 5 Orders Customer Items Grand Total No records found Configuration 6 6 Click Select All Select Refresh all from the Actions drop down menu and click Submit Magento Admin Pane gean sann Dashboard Sales Catalog Mobile Customers Promotions Newsletter CMS Reports System Gethelp for thi
5. HOW TO GET OPTIMAL PERFORMANCE FROM THE ULTIMATE ZOOM MODULE Ultimate Zoom module heavily depends on the quality of product images you upload Here are some suggestions that you can follow while creating product images for your webshop If you are using lightbox zoom type then we suggest that you keep the width of the zoom image nearly equal to width of your webpage For zoom effects to work perfectly you should upload product images that are 2 3 times the size of the image visible on your product page Try to limit the size of the product images to 1 mb Large sized images take longer to load hence make your product page and zoom load slower Preferably use product images in png if transparency is needed or jpg otherwise Try to keep your product image dimensions in proportion Too high or too wide images do not look good on product page or when zoomed Make sure that the focus of the product image is product itself and not the background Use light colored or plain white background for your images 3 CAN SET DIFFERENT ZOOM TYPES FOR DIFFERENT PRODUCTS No that is not possible in Magento One zoom type will cover all product pages in one store You can set separate zoom types for different stores Ultimate zoom module is multi store compatible 4 IT SHOWS A 404 ERROR MESSAGE IN BACKEND AFTER UPLOADING THE MODULES WHY Please refresh Magento cache and log out of the admin Login again and continue using the Ultimate zoom modu
6. You can set the range of possible magnification powers when the user scrolls the mouse wheel while over the target image Be sure this range covers the Default power setting in the above field You see 2 as the value saved in the above shot Therefore the minimum default magnification is 2 times and the maximum magnification that can be achieved by scrolling is 7 times Size From this field you can control the size of your magnifier lens block You can fill in any width and height value separated by a comma Just make sure that you do not make the lens size larger than base image block TAUROS MEDIA MANUAL ULTIMATE ZOOM MODULE 16 TAUROS MEDIA 9 FEATURED ZOOM This is one of the most advanced and extensive zoom type of the module It is loaded with features and has a UI of its own Your product page will look like this if this zoom type is selected Universal Camera Case Email to a Friend Be the first to review this product Availability In stock 34 00 Qty 1 OR Add to Wishlist Add to Compare Show full image Quick Overview A stylish digital camera demands stylish protectio leather carrying case will defend your camera fror and scratches of travel and everyday use while loc Zoom in smart all the time Rotate image clockwise Zoom out otate image anti clockwise t Zoom status The backend configuration section looks like this Featured Zoom
7. and Safari 4 PACKAGE The package contains 4 1 Ultimate Zoom Module 4 2 Module installation and user manual TAUROS MEDIA MANUAL ULTIMATE ZOOM MODULE 4 TAUROS MEDIA REQUIREMENTS 5 1 Magento webshop Magento 1 5 X and above EE 1 10 X and above and working knowledge of Magento backend 5 2 Cpanel server ftp access to install the module files 5 3 An Up to date Test environment separate from but exact copy of your live setup 5 4 loncube should be installed on your live as well as test server You can get the appropriate version for your server from http www ioncube com loaders php As suggested by Magento new extensions modules should never be directly installed on live setup Always try on a Test setup first Also it is a good practice to make backups of both Magento and the database before installing any extension 6 INSTALLATION At this point we assume that you have no other zoom module installed on your webshop If you have then kindly disable it from yourrootfolder app etc modules yourzoommodule xml 6 1 Download and unzip the Ultimate Zoom module directory 6 2 Open the Ultimate Zoom Module folder here you can see the app js and skin folders These folders contain the module 6 3 Upload the app js amp skin folders to your Magento shop directory using your favorite FTP client This will not overwrite any files from your webshop folders 6
8. background for enlarged product image Overlay Opacity You can also control the opacity of the overlay background Do not change the values in Image close Image loading Next button and previous button fields They call for respective images from module file set You can replace these images with images of your choice but the replacement images should be of exact image format size and name These images are placed in yourmagentofolder skin frontend default default images Container resize speed This is a numeric value field It controls the speed time with which the large product image loads when you click to enlarge it Higher the value slower the enlarged image will load ie it will take more time to load the entire layover container Lightbox message This is a text field Here you can type in the informative text message that you want to display under your product image something like Click on image to enlarge 4 LENS ZOOM This zoom type enlarges a small section of the product image and displays it in a rectangular box inside the product image block Not only this you can also increase the magnification inside the lens using your mouse scroller This is how Lens zoom type zooms up the product image Anashria Womens Pre Emailto a Friend reek 4 Review s Availability In stock EEE EEE EEE EEE Quick Overview Buckle embellished contras and canvas covered wedge 1
9. be 200 px in height TAUROS MEDIA MANUAL ULTIMATE ZOOM MODULE 12 TAUROS MEDIA 2 INNER ZOOM If you have selected Inner zoom as zoom type then it will display the zoomed section of the image inside the main image block itself Magento Red Furniture Set Magento Red Furnit Email to a Friend Ki 1 Review s Availability In stock Couch Ottoman Add t It is displaying zoomed section of the image Quick Overview within main image block Love red You ll love these The configuration section of this zoom type looks like this Tauros Zoom General Configuration Native Zoom No iy STORE VIEW Zoom Type Inner Zoom STORE VIEW Image Width 265 STORE VIEW Image Height 265 STORE VIEW Thumb Width 56 STORE VIEW Thumb Height 56 STORE VIEW Outer Zoom Inner Zoom Preload Text Loading Zoom STORE VIEW Title No me STORE vew Preload text You can save the text you want to display on the frontend while image and zoom are loading Title You can select yes or no here If yes is selected then it will display product title on the zoomed image TAUROS MEDIA MANUAL ULTIMATE ZOOM MODULE 13 TAUROS MEDIA 3 LIGHTBOX This zoom type is also widely used If you select this zoom type then customers can click on product image to see enlarged image It will open the enlarged image in a lightbox over the product page as shown in below image This is how Li
10. truly unique addition to your MORE VIEWS Shoe Size 4 Choose an Option 41 95 This is how the configuration section looks like for this zoom type TAUROS MEDIA MANUAL ULTIMATE ZOOM MODULE 15 TAUROS MEDIA Tauros Zoom General Configuration Native Zoom No x STORE VIEW Zoom Type Lens Zoom EA STORE VIEW Image Width 265 STORE VIEW Image Height 265 STORE VIEW Thumb Width 56 STORE VIEW Thumb Height 56 STORE VIEW Outer Zoom Inner Zoom Lightbox Lens Zoom Default Power 2 STORE VIEW Sets the default magnification power when the mouse rolls over the image Value should be an integer greater or equal to 1 A value of 1 means no magnification by default Power Range 27 STORE VIEW Sets the range of possible magnification powers when the user scrolls the mouse wheel while over the target image Be sure this range covers the defaultpower setting above Example 2 7 Magnifier Size 100 100 STORE VIEW Width Height Example 20 40 FIELD EXPLANATION Default power This is a numeric value field It controls the zoom factor of the lens From this field you can set the default magnification power when the mouse rolls over the image Value should be an integer greater or equal to 1 A value of 1 means no magnification by default Power range From this field you can control how much magnification the visitor can achieve by using the scroller
11. TAUROS MEDIA ULTIMATE ZOOM MODULE MAGENTO V1 0 BETA a en TAUROS N MEDIA INSTALLATION amp USER MANUAL V1 0 DECEMBER 2012 TAUROS MEDIA NEDERLAND B V POSTBUS 75035 1077 AA AMSTERDAM INFO TAUROSMEDIA COM TAUROS MEDIA MANUAL ULTIMATE ZOOM MODULE 1 TAUROS MEDIA 1 INDEX 1 Index 2 2 Introduction 3 3 Feature set 4 4 Package 4 5 Requirements 5 6 Installation 5 T Configuration 7 General configuration 8 Outer zoom 9 Inner zoom 13 Lightbox 14 Lens zoom 15 Featured zoom 17 Full screen featured zoom 18 8 Change log 19 9 FAQ 20 TAUROS MEDIA MANUAL ULTIMATE ZOOM MODULE 2 TAUROS MEDIA 2 INTRODUCTION They say A picture is worth a thousand words and we say Let s zoom the picture and turn it into a thousand Euros It has become an established fact that for online shoppers quality product images are one of the top 4 factors and ability to zoom on product images is one of the top 3 things that the customers look forward to while on a product page Based on the results of a National Retail Federation study your product images have become 8 major factor and could even be holding your sales back Product images today play an even greater role than any of us ever realize When presented with a list of 26 different site elements survey participants listed image quality as one of the most important factors influencing their buying decisions rank
12. bove image to Zoom STORE VIEW FIELD EXPLANATION Zoom You can fill in a numeric value for Zoom here or you can save fit Max zoom You can set in the maximum magnification value that you want to allow Minimum zoom You can set in the maximum magnification value that you want to allow Zoom step This will field controls the zoom steps ie by how much the image will be zoomed in each step Zoom scroll text You can put in informative text in this field This text will be visible at the bottom of zoom window Use your scroll wheel or the zoom buttons to zoom in out Click and drag to view other parts of the image when zoomed Fullscreen message You can put in informative text in this field This text will be visible under the product image on your product page This covers everything the Ultimate zoom module has to offer We hope the module makes your webshop stand out from your competition Feel free to write to us at info taurosmedia com if you have any query feedback or suggestions regarding the Ultimate Zoom Module 8 CHANGE LOG V 1 0 ROS MEDIA MANUAL ULTIMATE ZOOM MODULE 19 TAUROS MEDIA 9 FAQ 1 CAN I SEE THE MODULE IN ACTION SOMEWHERE Yes we have setup a demo Magento store just for this purpose You can access it at Frontend http www webshopmagento nl ultimatezoom Backend http www webshopmagento nl ultimatezoom index php admin Username zoom Password zoom123 2
13. der Statuses Configuration Se es mn a me 7 2 on this page click on Catalog gt Tauros Zoom section in the left column You will find Tauros Zoom listed as an option under Catalog section Dashboard Sales Catalog Mobile Customers Promotions Newsletter CMS Reports System Current Configuration Scope 4 Default Config vy Manage Stores General Configuration gt GENERAL Lightbox General Lens Zoom Web Featured Zoom Design Fullscreen Featured Zoom Content Management gt CATALOG You will see 7 module related sections on Tauros Zoom page The first one is general configuration and other 6 are zoom types available in the module TAUROS MEDIA MANUAL ULTIMATE ZOOM MODULE T TAUROS MEDIA GENERAL CONFIGURATIONS This section controls general settings of the module Tauros Zoom General Configuration Native Zoom No Kd STORE VIEW Zoom Type Lightbox STORE VIEW Image Width 265 STORE VIEW Image Height 265 STORE VIEW Thumb Width 56 STORE VIEW Thumb Height 56 STORE VIEW FIELD EXPLANATION Native zoom You can enable disable the Standard Magento zoom feature from this field If itis set to Yes then it will show regular zoom mechanism on the product page Set it to No while using the Ultimate Zoom module features Image width This field controls the width of the main image on your product
14. ghtbox zoom type will display enlarged image Enlarged image size depends on the size of product image you uploaded Computer CLOSE x You can manage the color and opacity of this translucent layer over the product page from backend configurations The configuration section of this zoom type looks like this Tauros Zoom General Configuration Native Zoom No el STORE VIEW Zoom Type Lightbox x STORE VIEW Image Width 265 STORE VIEW Image Height 265 STORE VIEW Thumb Width 56 STORE VIEW Thumb Height 56 STORE VIEW Outer Zoom Inner Zoom Lightbox Overlay Background Color FFF STORE VIEW Overlay Opacity 0 9 STORE VIEW Image Close lightbox btn close gif STORE VIEW Save the image in your theme s images folder Image Loading lightbox ico loading gif STORE VIEW Save the image in your theme s images folder Next Button lightbox btn next gif STORE VIEW Save the image in your theme s images folder Previous Button lightbox btn prev gif STORE VIEW Save the image in your theme s images folder Border Size 30 STORE VIEW Container Resize Speed 300 STORE VIEW Lightbox Message Click on the above image to zoom STORE VIEW TAUROS MEDIA MANUAL ULTIMATE ZOOM MODULE 14 TAUROS MEDIA FIELD EXPLANATION Overlay Background color You can specify the color of the translucent layer which shows up over product page and is used a
15. ing it 4 overall more important than product guides short descriptions long descriptions and even product reviews An impressive 85 said the ability to zoom in on the image was very to somewhat important to selecting and ultimately buying products When women s responses were singled out that number climbed even higher with 86 indicating its importance When visiting a merchant s product page how important is the following image related information to selecting and ultimately purchasing a product VERY TO SOMEWHAT IMPORTANT TOTAL WOMEN MEN Quality of the image Alternative views Zoom Item specific image Color change View on a model View in a room Source http nrf com modules php name News op viewlive amp sp_id 812 amp parent_id 960 amp peer_rev 1 Allowing customers to zoom in on product images gives them a sense of control over what they are buying It gives them an equivalent feeling of looking at the products closely when they are in a real store TAUROS MEDIA MANUAL ULTIMATE ZOOM MODULE 3 TAUROS MEDIA While developing Magento webshops for our esteemed clients we realized that there are no good Zoom modules available in the Magento module market Available modules lack shiny features some are not developed as per standard Magento coding practices and some are simply waste of money So we set upon a quest of developing a solution so good and so full of features that it wi
16. le 5 UPLOADED AND CONFIGURED EVERYTHING BUT NOTHING CHANGED ON MY PRODUCT PAGES WHY Make sure that you have disabled Native zoom from General configurations section Also copy the 2 theme related files to your custom theme folder Refer to installation section for more information TAUROS MEDIA MANUAL ULTIMATE ZOOM MODULE 20
17. ll be an ultimate choice when it comes to Magento Zoom Modules 3 FEATURE SET Tauros Media s Ultimate Zoom Module is the result of our quest for a perfect Magento zoom module Our Ultimate Zoom Module is developed for webshop owners developers who have a Magento webshop or are developing a new one and want to use state of the art image zoom feature on their product pages The Ultimate Zoom module offers unprecedented 6 different zoom effects to choose from 1 Outer zoom 2 Inner zoom 3 Lightbox 4 Lens zoom 5 Featured zoom 6 Full screen featured zoom The module is very easy to install and use You can simply install it on a Magento webshop and start using it without making a single change in your CSS or phtml files All these zoom effects are highly configurable from the Magento backend You can customize almost all the output factors as per your design requirements right from the backend like zoom window dimension location zoom factor opacity etc Default configuration values are already included in the module code So you don t have to worry about configuring everything from scratch At the max you will have to tweak the values a bit to suit your needs 3 It allows you to use the native Magento zoom if there is ever a need It is Magento multi store and multi version compatible You can setup different zoom types for your separate store fronts Works with all major browsers tested on IE 8 9 Firefox Chrome
18. ner zoom Lightbox Lens zoom Featured zoom Full screen featured zoom Whichever Zoom type you select here its corresponding configuration section will control the zoom effects on frontend TAUROS MEDIA MANUAL ULTIMATE ZOOM MODULE 8 7 4 ZOOM TYPE CONFIGURATION Let s take up each zoom type and their configuration one by one 1 OUTER ZOOM This is one of the most commonly used zoom types today You can display the zoomed image outside the product image window Outer zoom type MORE VIEWS Choose an Option 89 99 Qty Its configuration section looks like the following image Tauros Zoom almond shaped Required Fields Add to Cart General Configuration Native Zoom Zoom Type Image Width Image Height Thumb Width Thumb Height No Outer Zoom 1265 265 STORE VIEW STORE VIEW STORE VIEW STORE VIEW STORE VIEW STORE VIEW Show Lens X Offset Y Offset Position Preload Text Title Zoom Width Zoom Height Right Loading zoom Yes 265 265 STORE VIEW STORE VIEW STORE VIEW STORE VIEW STORE VIEW STORE VIEW STORE VIEW STORE VIEW FIELD EXPLANTION Show lens You can select yes or no here If you select yes then it will show a lens block when you do a mouse over the product image If you select no
19. page You have to fill in numeric pixel values here You can fill in appropriate width here as per your design theme Ask your designer developer for exact size in pixels for product images ex As shown in above shot we wanted the image width to be 265 px so we filled in 265 Image height This field controls the height of the main image on your product page You have to fill in numeric pixel values here You can fill in appropriate height here as per your design theme ex As shown in above shot we wanted the image height to be 265 px so we filled in 265 Thumb width This field controls the width of the thumbnail image on your product page You have to fill in numeric pixel values here You can fill in appropriate width here as per your design theme ex As shown in above shot we wanted the thumbnail image width to be 56 px so we filled in 56 Thumb height This field controls the height of the thumbnail image on your product page You have to fill in numeric pixel values here You can fill in appropriate height here as per your design theme ex As shown in above shot we wanted the thumbnail image height to be 56 px so we filled in 56 Note Ask your designer developer for exact required image sizes in pixels for product images settings Zoom type You can select any one of the available 6 zoom type effects The selected zoom effect will be used on product page of your webshop You have 6 options to choose from Outer zoom In
20. s page Cache Storage Management Flush Magento Cache f Flush Cache Storage Select All Unselect All Select Visible Unselect Visible 8 tems selected Actions Refresh v ET Cache Type Description Associated Tags Enable Ini x Configuration System config xml local xml and modules configuration files config xml CONFIG Refresh Layout building instructions LAYOUT_GENERAL_CAC AG 1 Blockg HTML output Page blocks HTML BLOCK_HTML Transfations Translation files TRANSLATE Colledions Data Collection data files COLLECTION_DATA EAV types and attributes Entity types declaration cache EAV Web dervices Configuration Web Services definition files api xmi CONFIG_API Web Yervices Configuration Web Services definition files api2 xml CONFIG_API2 SIS IS IS S IS IS IS Refresh the Cache irrespective of them being enabled or disabled 6 7 Log out of the admin panel and login again Now your Ultimate zoom module is ready to use and it is already loaded with default configuration values All you have to do is select the zoom type you want to use and may be adjust the settings as per your design requirements TAUROS MEDIA MANUAL ULTIMATE ZOOM MODULE 6 TAUROS MEDIA f MAGENTO CONFIGURATION 7 1 Goto Admin panel gt System gt Configuration Global Record Search CMS Reports My Account mounts opreed Or
21. then it will just show a cross when you do a mouse over the product image TAUROS MEDIA MANUAL ULTIMATE ZOOM MODULE TAUROS It will show a lens block if you sele Yes acing for your rtable Sony Vaio X Offset You should fill in a numeric value in pixels here It is the horizontal distance between the image edge and the zoomed image edge Notice the effect in the shot below when saved X offset as 100 The zoomed image moves 100 px away horizontally from the main product image You can fill in any positive numeric value here as per your design E COMPARE offset agento R p ed Finiture Email to a Friend Wy 1 Review s Ada Availability In stock CART no iter Product Name Chair Couch Ottoman OR Quick Overview Love red You ll love these pieces of handmade modern furniture Y Offset You should fill in a numeric value in pixels here It is the vertical distance between the image edge and the zoomed image edge Notice the effect in the shot below when saved Y offset as 100 The zoomed image moves 100 px away vertically from the main product image You can fill in any positive numeric value here as per your design Magento Red Furniture Set l Y offset 100 Email to a Friend Ww Ar 1 Review s Add Your Revie Availability In stock ade modern TAUROS MEDIA MANUAL ULTIMATE ZOOM MODULE
Download Pdf Manuals
Related Search