X-Magnifier add-on module - X-Cart
Contents
1. original images with a default zoom level so that images could fit the work area of the image viewer when you change the default size of the image viewer by adjusting the values of Image viewer width and Image viewer height options at the X Magnifier settings page in the Admin area 2 restore lost or broken parts of high images tiles or xml data Important Re slicing is applicable if only the system was setup to keep original X Magnifier images when the images were uploaded This option is controlled by the magnifier sets save init image variable in the X Magnifier configuration file modules Magnifier config php By default the variable is set to 1 meaning that the system keeps the original X Magnifier images and they can be re sliced Changing the value to 0 means that the system will keep only image tiles and you will not be able to re slice X Magnifier images With X Magnifier high resolution images can be re sliced either separately for each product or in bulk When images are re sliced in bulk you can choose to re slice all X Magnifier images in the store or only those X Magnifier images that were imported through the CSV format and have not been re sliced yet To re slice images for a single product 1 In the Admin area find the product and open it for editing 2 Go to the Images for X Magnifier section 3 Select the check boxes for the high resolution images you want to re slice and click the Re slice selected images2. THIS SOFTWARE PROGRAM AND ASSOCIATED DOCUMENTATION THAT RUSLAN R FAZLIEV a ee Y a t A Ja y pm LS LE rca Seo DIAN DEAD AZ READ AS a IL A the Software or use of illegally obtained software Making illegal copies of the Software is prohibited Individuals who violate copyright law and software licensing agreements may be subject to criminal or civil action by the owner of the copyright T Auth code This is a protection from unauthorized use of installation script O I accept the License Agreement z Back Next gt Copyright 2001 2008 X Cart com Copyright 2001 2008 Ruslan R Fazliev lt rrf x cart com gt Please read the Software License Agreement If you agree to all of the terms of this agreement select the I accept the License Agreement check box Note By selecting the l accept the License Agreement check box you are consenting to be bound by this agreement If you do not agree to the terms of the agreement do not install the software Use the field Auth code to enter your Auth code Auth code is a special authentication code that O 2001 2009 Ruslan R Fazliev All rights reserved Installing and Uninstalling X Magnifier 7 protects your X Cart installation Such a code was issued to you when you first installed your X Cart based store If you do not remember your Auth code you can look it up in X Cart s file include install php or in the Summary secti
3. button Images for X Magnifier Check all Uncheck all Image Pos Availability Image size Iv DD o Enabled z 2000x1500 D Re create thumbnail Iv D d o Enabled 1922x1271 D Re create thumbnail O o Enabled 2000x1500 gt Re create thumbnail Delete selected Update Re slice selected images After the selected images have been successfully re slices X Cart will display a confirmation message 2001 2009 Ruslan R Fazliev All rights reserved Using X Magnifier 23 To re slice imported images that have not been re sliced yet 1 In the Admin area go to the section Summary Tools Re slice magnified images 2 Click the Re slice magnified images button Re slice magnified images Use this tool to re slice imported magnified images Re slice magnified images After the imported images have been successfully re slices X Cart will display a confirmation message To re slice all magnified images in a store 1 In the Admin area go to the section Summary Tools Re slice all magnified images 2 Click the Re slice all magnified images button Re slice all magnified images Use this tool to re slice all magnified images Re slice all magnified images Important Re slicing is not applicable to high resolution images uploaded in a previous version of X Magnifier module Deleting X Magnifier images Zoomable images that you no longer wish to be displayed in your store can be deleted
4. button close button up close button over close button down Zoom slider zoom down button up zoom down button over zoom down button down zoom up button up zoom up button over zoom up button down zoom slider up zoom slider over zoom slider down Close button link close button attribute skin Thumbnails scrolling left button thumbs scroling button left up thumbs scroling button left over thumbs scroling button left down thumbs scrolling button left inactive Zoom slider background zoom line bg Thumbnails scrolling slider thumbs scroling slider Thumbnails scrolling right button thumbs scrolling button right up thumbs scroling button right over thumbs scrolling button right down thumbs scrolling button right inactive Skin files are located inside the directory lt xcart_dir gt skin1 modules Magnifier skins in a separate O 2001 2009 Ruslan R Fazliev All rights reserved 26 X Magnifier add on module for X Cart 4 3 0 User manual folder for each skin The name of such a folder appears as a skin name in the Image viewer style selector For example the names of the folders for the default skins Classic and Aqua Blue are classic and aqua_blue respectively Customizing an X Magnifier skin To change the appearance of the image viewer you need to consecutively edit the image files that visualize the interface components and adjust the directives for non pictorial components i
5. of this image select the status Disabled 4 Click the Update button to assign the new status to the image As soon as the status becomes assigned you should see a confirmation message in an Information box To re enable a previously disabled image select Enabled from the Availability drop down box opposite this image and click the Update button Changing the order in which X Magnifier images appear in the viewer If a product has more than one zoomable images it is possible to control the order in which these images O 2001 2009 Ruslan R Fazliev All rights reserved Using X Magnifier 19 appear in the image navigation bar of the viewer To change the order of X Magnifier images 1 Open the Images for X Magnifier dialog box listing the desired set of zoomable product images 2 Adjust the values of POS boxes for all the images by entering the desired position numbers 3 Click the Update button for the changes to be applied As soon as the position numbers are redefined you should see a confirmation message in an Information box Creating thumbnail icons X Magnifier provides a tool that allows you to create thumbnail icons for zoomable images To create or change an image thumbnail 1 Open the Images for X Magnifier dialog box listing the desired set of zoomable product images 2 Click on the link Re create thumbnail opposite the image for which you wish to create or change the thumbnail icon Images fo
6. the controls you should edit the respective language variables The table below reveals what controls describes what language Default value for the English Control element Language variable language Zoom tool Ibl zoomer hint magnifier Use Ctrl to zoom out Note For detailed instructions on how to edit language variables please refer to the Customizing the Look and Feel gt Editing the Text of the User Interface gt Managing X Cart s Language Variables section of the main X Cart user manual O 2001 2009 Ruslan R Fazliev All rights reserved 30 X Magnifier add on module for X Cart 4 3 0 User manual 3 2 Customer Interface Find out how your customers can start X Magnifier viewer in the Customer area Opening the Image Viewer Get an idea of X Magnifier viewer controls Using the Viewer Controls 3 2 1 Opening the Image Viewer Depending on how the module is configured by the store administrator the image viewer can be displayed either in a dialog box within the body of the Product details page or in a separate popup window If the image viewer is configured to appear in a standard X Cart dialog box your store visitors will not need to do anything to open it the viewer will be immediately available on the Product details page of all products that have zoomable images If the image viewer is configured to appear in a popup window store visitors will need to open it using the
7. Click to zoom link on the Product details page O 2001 2009 Ruslan R Fazliev All rights reserved Using X Magnifier 31 KGART oil m Categories Your Company Name Home Shopping Cart Contact Us CALL US 1 300 555 5555 Printable version Gifts Real chofer beetle decoration p Books p CD DVD Video b Computer hardware p Electronics p Games and toys p Gifts P Household b Men s clothes p Software p Sport Mm Bestsellers 1 Real chafer beetle decoration 2 Tatty Teddy bear 3 Hunting Knife wisheath Click to gt Real chafer beetle decoration A real green chafer beetle encased in acrylic Metallic green against a bright green background Beetle is viewable from both sides Excellent color and detail Stands 3 inches tall Comes with an attractive gift box Great for any nature lover Will make a great conversation piece Details SKU SKU183 Quantity in stock 6 item s available Weight 0 50 Ibs Price 8 99 7 82 Options Gift pack No Quantity z International 500 555 5555 w Your cart Uv Cart is empty View cart Checkout Wish list Orders history m Authentication Username Password O 2001 2009 Ruslan R Fazliev All rights reserved 32 X Magnifier add on module for X Cart 4 3 0 User manual 3 2 2 Image Viewer Controls The image viewer provides a se
8. Magnifier Is X Magnifier is a commercial add on module for X Cart shopping cart software It enhances delivery of image content in an X Cart based online store and provides enriched media experience to the store website visitors Designed to facilitate presentation of high resolution images on the Internet X Magnifier add on module provides a Flash based viewer that allows your store visitors to examine large images of your product items in detail and possibly even to save some time and traffic while doing so Customers can freely zoom in and out on any area of an image as well as drag the image around in the viewer work area to examine every detail of the item displayed No image quality loss occurs during magnification so your customers are provided the ultimate viewing experience at any magnification level X Magnifier add on module provides the following key features Support for images of up to 2000 x 2000 px in size without image quality loss Smooth zooming and panning Unlimited number of zoomable images for any product in the store Skinnable image viewer 2 skins included Resizable image viewer popup window Support for GIF JPEG and PNG image formats Advanced tool for creating thumbnail icons Image repository located on the server file system Clear layout of all interface elements Ease of back end administration X Magnifier add on module is a valuable acquisition for any online store but it is especially recommend
9. Ruslan R Fazliev All rights reserved General Information 3 load time and the amount of traffic consumed remain much smaller than they would be if the user s browser were loading entire large images Supported image formats and image size limitations Source files for uploading into X Magnifier can be in GIF JPEG and PNG formats X Magnifier does not have any limitations as to the file size of images that can be used The file size of an image can be as large as you wish as long as the server on which your store is running can handle it As to image dimensions the maximum image size that X Magnifier can handle without compression is 2000 by 2000 pixels You can upload images of any size which may be especially convenient when uploading pictures directly from your digital camera without resizing them in an external program but all images larger than 4 megapixels will be automatically shrunk by the module to 2000 pixels along the maximum dimension Image repository All the files produced by X Magnifier as a result of processing an image that has been uploaded into the Images for X Magnifier section of your store are put into the directory xcart images Z ProductID ImagelID where xcart is the directory of your X Cart installation ProductiD is a number representing the ProductlD of the product for which the image was added and ImageID is a number representing the ID of the image as assigned by X Magnifier add o
10. To delete one or more images 1 Open the Images for X Magnifier dialog box listing the desired set of zoomable product images 2 In the list find the images that need to be deleted and select the check boxes to the left of their thumbnail icons 3 Click the Delete selected button As soon as the selected images are removed you should see a confirmation message in an Information box 2001 2009 Ruslan R Fazliev All rights reserved 24 X Magnifier add on module for X Cart 4 3 0 User manual 3 1 3 Skinning X Magnifier X Magnifier skins overview The decorative appearance of the image viewer can vary depending on an X Magnifier skin you use By default the module is furnished with two pre designed skin styles Classic and Aqua Blue which are illustrated on the picture below Classic Aqua Blue To switch between the skins use a special selector Image viewer style at the X Magnifier settings page General settings Modules options gt Magnifier options in the X Cart Admin area If necessary you can create a custom skin for the viewer that would match the design of your store best Or you can modify an existing skin which is definitely a less resource consuming task than creating a new skin from scratch Technically a skin for the viewer is a set of images and an XML data file The images visualize different elements of the interface while the XML file describes the relation between the im
11. X Magnifier add on module for X Cart 4 3 0 User Manual X Magnitier O 2001 2009 Ruslan R Fazliev All rights reserved Company website www x cart com Revision date Nov 02 2009 X Magnifier add on module for X Cart 4 3 0 User Manual 2001 2009 Ruslan R Fazliev All rights reserved This User Manual is intended for X Magnifier add on module for X Cart v 4 3 0 It covers most of the areas of the add on module s installation and use and is applicable for both X Cart GOLD and X Cart PRO versions X Magnifier add on module for X Cart 4 3 0 User manual O 2001 2009 Ruslan R Fazliev All rights reserved All rights reserved No part of this work may be reproduced in any form or by any means without the expressed written permission of the copyright owner Products that are referred to in this document may be either trademarks and or registered trademarks of the respective owners The publisher and the author make no claim to these trademarks While every precaution has been taken in the preparation of this document the publisher and the author assume no responsibility for errors or omissions or for damages resulting from the use of information contained in this document or from the use of programs and source code that may accompany it In no event shall the publisher and the author be liable for any loss of profit or any other commercial damage caused or alleged to have been caused directly or indirectly by this doc
12. ages and the interface components and provides directives on how to visualize non pictorial elements Each component of the interface has a unique name that is used in the XML file to associate the component with a respective image or directive The picture below demonstrates how particular interface components relate to image files and XML directives O 2001 2009 Ruslan R Fazliev All rights reserved Using X Magnifier 25 Borders Corners View Area color main border top main top left corner viewarea bg color main border right Main background color main top right corner attribute skin main border bottom main bg color main bottom left corner main border left attribute skin main bottom right corner mm Magnifier tool tools button magnify up tools button magnify over tools button magnify down tools button magnify selected Cursors cursor hand cursor magnifier plus cursor magnifier minus Move tool tools button move up a tools button move over tools button move down tools button move selected oe me Fit to screen button tools button fit up tools button fit over tools button fit down pem a tools bg Thumbnails window thumbs ares frame left thumbs ares frame right thumbs ares frame middle Selection frame color thumbs frame color attribute skin Thumbnails background color thumbs bg color attribute skin Close
13. art 4 1 11 installed on the server GDLib 2 0 or better installed on the server GDLib must be compiled with libJpeg Ensure that PHP is configured with the option with jpeg dir DIR where DIR is the directory where libJpeg is installed Note GDLib is involved at the stage of preparing a new image for use with X Magnifier but it is not involved in zooming or panning of an image in X Magnifier viewer All GDLib does is convert images from the GIF or PNG formats to JPEG and cut them into tiles This means that after you have already uploaded some images for X Magnifier into the store deinstallation of GDLib from the server will not affect X Magnifier s ability to show the previously uploaded and processed images in X Magnifier viewer However you will not be able to upload any new X Magnifier images without GDLib Flash Player 8 0 or better is required for viewing of X Magnifier images on the client side Users of systems on which the Flash Player is not installed will be offered to download it 2 2 Installing X Magnifier To install X Magnifier add on module follow these steps 1 Ensure that the system requirements are met 2 Obtain an X Magnifier distribution package from the section Software distributives of X Cart File Area The package you need is contained in the archive file x magnifier x y z tgz where x y z are your X Cart version numbers 3 Decompress the distribution package archive to a local directory on your system u
14. e existing files when prompted Now when the new skin aqua_red is switched on in the Admin area the image viewer looks as in the picture below In the same manner we consecutively modify and apply other skin images O 2001 2009 Ruslan R Fazliev All rights reserved 28 X Magnifier add on module for X Cart 4 3 0 User manual After we have finished with the images we proceed to modifying the skin attributes in the XML data file skin description xml The table below describes which strings of the file should be edited and how Note To edit the XML file you can use a plain text editor or any special purpose facility skin skin_name Aqua Blue skin skin namez Aqua Red skin pathz skint modules Magnifier skins aqua b skin path skin1 modules Magnifier skins aqua r lue gt ed gt lt viewarea_bg_color gt 666666 lt viewarea_bg_color lt viewarea_bg_color gt ffffff lt viewarea_bg_color gt gt Eventually the modified image viewer should look as in the picture below 2001 2009 Ruslan R Fazliev All rights reserved Using X Magnifier 29 International description Some of the viewer s controls may have a pop up hint that aims at helping your store visitors to use the viewer correctly If the Customer area of your store is available in several languages it is quite natural that you have these hints in several languages as well To add multilingual description to
15. e in a certain way which results in creation of levels and tiles for this image Levels correspond to the magnification steps that the image will go through when being zoomed in the viewer Tiles are small pieces of the image that will be loaded into the viewer at each magnification level The number of levels that is created for an image is defined dynamically and depends on the image size The highest level corresponds to the largest scale at which a user will be able to view the image when zooming in The process of zooming and panning is as simple as switching between magnification levels and loading the necessary tiles Whenever a user opts to change an image s zoom scale or to shift the image in the viewer work area X Magnifier calculates the magnification level at which the image needs to be displayed and allows the image viewer to load only those image tiles that represent portions of the image area selected by the user Flash technology ensures smooth transitions between the different magnification levels so jumps from one level to another are transparent to the user Each image tile loaded onto the user s computer is cached so when the user chooses to return to an area of the image that he or she has already viewed the tiles of that area do not have to be loaded from the server again but are drawn from cache Due to that only a few tiles are loaded into the image viewer every time the user zooms or pans the image O 2001 2009
16. ed for stores selling watches jewelry items home decorations kitchen and tableware cell phones and digital cameras apparel and accessories toys antiques artwork and various collectibles O 2001 2009 Ruslan R Fazliev All rights reserved 2 X Magnifier add on module for X Cart 4 3 0 User manual 1 2 How X Magnifier Works X Magnifier at a glance The storefront part of the add on provides an image viewer based on Macromedia Flash technology The viewer allows website visitors to zoom and pan high resolution images quickly and easily regardless of connection speed Images that can be displayed in the viewer are uploaded onto the server through X Cart s administration back end and are stored on the server file system in a multi resolution tiled format which allows the user s browser to download only small amounts of data while an image is being panned within the viewer work area or zoomed to display an increasing level of detail Levels and tiles The outstanding performance of X Magnifier add on module in displaying large high resolution images even on a slow Internet connection is explained by the way these images are served to the user s web browser Instead of providing to the browser an entire full size large image X Magnifier gives the image away gradually in small portions After you upload an image into the store for the purpose of showcasing it in X Magnifier viewer this image is processed by the modul
17. er Managing X Magnifier Images for details 3 Click the Save button Important note on modules Magnifier config php Please do not change any values defined in the file modules Magnifier config php except the value of magnifier sets save init image as it can cause a negative effect on the look of X Magnifier image viewer and the functionality of X Magnifier in general 3 1 2 Managing X Magnifier Images Uploading images With X Magnifier you can upload magnified product images either separately or in bulk To upload images separately for each product you should use a special interface of the Product management page in the X Cart Admin area while bulk image import is supported through the default X Cart functionality for importing and exporting data in the CSV format You simply create a CSV file any spreadsheet editor suits well here O 2001 2009 Ruslan R Fazliev All rights reserved Using X Magnifier 15 specify image filenames and location and upload the file through the X Cart Admin area The system will automatically associate all images with a respective products according to the data in the file For instructions on how to upload X Magnifier images through a CSV file please refer to the X Cart Data Import Export Guide Important When you upload X Magnifier images both separately and in bulk the system only assigns images to products but it does not automatically create thumbnail icons and slice ima
18. example a red one We begin with creating a folder for the skin It must be O 2001 2009 Ruslan R Fazliev All rights reserved Using X Magnifier 27 located in the directory lt xcart_dir gt skin1 modules Magnifier skins together with other X Magnifier skins The name of the new folder is aqua_red Then we copy the contents of the folder aqua_blue to the folder aqua red After the preparatory work has been finished we can start editing the components of the viewer interface For example the first component we want to modify is the Return button According to the scheme under the X Magnifier skins overview header earlier in this section of the manual the button is visualized by three elements that represent different button states return button up button is not pressed return button over mouse pointer is over the button but the button is not pressed yet return button down button is pressed From the XML data file skin description xml we know that the mentioned elements use the graphic files return button up png return button over png and return button down png that are located in the directory xcart dir skin1 modules Magnifier skins aqua red zoon panel We download the files to a local computer and edit them with any suitable image editor to koJ Eo wb Then we upload the edited files back to the directory lt xcart_dir gt skin1 modules Magnifier skins aqua_red zoon_panel forcing to replace th
19. ges You must force to slice X Magnifier images and create thumbnail icons manually For instructions see the information under the Creating thumbnail icons and Re slicing images headers further in this section To upload a zoomable image for a product 1 Find the product for which you wish to add an image and open this product for viewing modification 2 In the Product Management section menu click the link Images for X Magnifier O 2001 2009 Ruslan R Fazliev All rights reserved 16 X Magnifier add on module for X Cart 4 3 0 User manual Main page Product management Real chafer beetle decoration Product management Real chafer beetle Product details o Search for products International descriptions o Add product Product options o Categories X Confiqurator classification o Manufacturers Wholesale prices o Orders Upselling links Detailed images Images for X Magnifigr Customer Reviews 1t Product class Product details Product images Image Thumbnail No image available 125x142 20 kb recommended size 50x50 150x150 Change thumbnail Delete thumbnail No image uploaded Upload image This should open a dialog box titled Images for X Magnifier 2001 2009 Ruslan R Fazliev All rights reserved Using X Magnifier 17 Images for X Magnifier Check all Uncheck all Image Pos Availability Image size No images Add a new I
20. ier add on module for X Cart 4 3 0 User manual Step 3 Installation complete This is the final step of X Magnifier installation It notifies you that the module has been successfully installed and provides a link to the administration back end of the store where you can enable and configure the module XCART H li X Magnifier Installation Wizard Step 4 Installation complete X Magnifier module has been successfully installed Before you proceed to use X Magnifier module please remove the install xmagnifier php installation script Important To prevent unauthorized access to X Magnifier source code be sure to remove your X Magnifier distribution package archive frorn your web accessible directory 1 ADMINISTRATOR AREA Administration Modules X Magnifier module can be enabled on the Administration Modules page Please note that you can change the style of your X Magnifier viewer on the General Settings Magnifier options page Copyright 2001 2008 X Cart com Copyright 2001 2008 Ruslan R Fazliev lt rrf x cart com gt O 2001 2009 Ruslan R Fazliev All rights reserved Installing and Uninstalling X Magnifier 9 2 3 Uninstalling X Magnifier To uninstall X Magnifier do the following 1 Launch the Installation Wizard Point your browser at the location of your store with the addition of install xmagnifier php 2 At the first step of the Installation W
21. izard Step 1 License agreement select the Un install the module radio button O 2001 2009 Ruslan R Fazliev All rights reserved 10 X Magnifier add on module for X Cart 4 3 0 User manual XCART Gold X Magnifier Installation Wizard Thank you for choosing X Magnifier This wizard will provide you with the installation instructions and will handle most of the installation tasks for you SOFTWARE LICENSE AGREEMENT Copyright c 2001 2008 Ruslan R Fazliev lt rrf rrf ru gt All rights reserved PLEASE READ THIS AGREEMENT EXPRESSES THE TERMS AND CONDITIONS ON WHICH YOU MAY USE THIS SOFTWARE PROGRAM AND ASSOCIATED DOCUMENTATION THAT RUSLAN R FAZLIEV hereinafter referred to as THE AUTHOR IS FURNISHING OR MAKING AVAILABLE TO a rr Sm S P f li tm Pm i A n S 9 0 TH AUTHOR RETAINS ALL RICHTS NOT EXPRESSLY GRANTED BY THIS AGREEMENT The author forbids under any circumstances the unauthorized reproduction of the Software or use of illegally obtained software Making illegal copies of the Software is prohibited Individuals who violate copyright law and software licensing agreements may be subject to criminal or civil action by the owner of the copyright New installation 5 Uninstall the module Auth code This is a protection from unauthorized use of installation script O I accept the License Agreement _ l
22. ler than the work area this tool sets the maximum available scale Return button Sets the zoom scale to the value of Level 0 Zoom bar Allows you to zoom in and out on an image Zooming can be done by clicking the plus minus buttons or by dragging the slider Close button Closes the image viewer popup window This button can be enabled or disabled depending on the settings of the selected skin the link for this button is also adjustable Image navigation bar Allows you to select a zoomable image to be viewed in the viewer work area It represents a scrollable row of image icons which you can mouse click to get a view of the respective image The navigation bar is provided only when there are more than one zoomable images to select from It is also possible to change the zoom scale of images with the mouse wheel available only on PC O 2001 2009 Ruslan R Fazliev All rights reserved X Magnifier add on module for X Cart 4 3 0 User manual O 2001 2009 Ruslan R Fazliev All rights reserved Printed 02 11 2009
23. mage Preview Select a file Browse Upload 3 Select an image to be uploaded a In the Add a new image section of the Images for X Magnifier dialog box click the Browse button A dialog box titled Image selection opens in a new window b In the Image selection dialog box specify the location of your image file Use an appropriate Browse button if the file is located on the server or on your local computer or enter an image URL if the file is located on the Internet c Click on Apply The desired image should appear in the Preview O 2001 2009 Ruslan R Fazliev All rights reserved 18 X Magnifier add on module for X Cart 4 3 0 User manual 4 Click on Upload The image should be added to the list of the product s images for X Magnifier Images for X Magnifier Check all Uncheck all Image Pos Availability Image size UNm O D o Enabled z 2000x1500 D Re create thumbnail Delete selected Update Re slice selected images Add a new Image Preview Select a file Browse Upload Enabling Disabling X Magnifier images If you wish a certain image to become temporarily inaccessible to customers disable this image To disable an image 1 Open the Images for X Magnifier dialog box listing the desired set of zoomable product images 2 In the list find the image that needs to be disabled 3 From the Availability drop down box opposite the thumbnail icon
24. n X Magnifier as zoomable images are automatically converted to JPEG Please be aware that format conversion may have an undesirable effect on images that have transparent areas as JPEG format does not support transparency image areas that used to be transparent in GIF and PNG will no longer look transparent after the images are processed by X Magnifier In GIF files transparent areas become black while PNG transparency may turn into shades of gray 2 Installing and Uninstalling X Magnifier Find out the system requirements for X Magnifier System Requirements Learn to install and uninstall X Magnifier Installing X Magnifier Uninstalling X Magnifier 2 1 System Requirements Before trying to install the add on module make sure you have the following A web server with support for PHP 4 0 6 or better Make sure the configuration file php ini meets the following requirements safe mode must be disabled file uploads must be enabled register long arrays must be enabled only for hosts using PHP5 not required for PHP4 All these values are default Tip For help on PHP configuration settings visit http www php net Access to a MySQL database Make sure you have the following information your MySQL server name O 2001 2009 Ruslan R Fazliev All rights reserved Installing and Uninstalling X Magnifier 5 your database name your username and password for access to the database X C
25. n module For example xcart images Z 63 1 would be a folder containing image files for the first zoomable image of a product whose ProductlD is defined as 63 Every xcart images Z ProductID ImagelID directory in your store will contain the following elements a set of JPEG image files containing image tiles for different magnification levels The filenames of such files are defined in the format n x y jpg where n stands for the level number x and y for the coordinates the tile is supposed to have in the layer matrix level 0 jpg an image file providing the smallest scale representation of the image that a user will be able to see in the viewer thumbnail jpg an icon that will represent the image in the image nav bar of X Magnifier image viewer if more than one zoomable images are added for the product description xml an XML file describing the structure of levels of the image Warning Please note that the contents of the directory xcart images Z must not be tampered with Removing or editing any files in this directory may corrupt your image data When moving your X Cart based store to a new location be sure to move the directory xcart images Z with it retaining the directory structure O 2001 2009 Ruslan R Fazliev All rights reserved 4 X Magnifier add on module for X Cart 4 3 0 User manual Image format conversion issues Note that any GIF and PNG images that you upload for use i
26. n the XML data file The recommended sequence of operations is listed below 1 In the directory lt xcart_dir gt skin1 modules Magnifier skins clone an existing folder with skin files and give it a different name e g sample skin Make sure the skin named sample skin is available in the Image viewer style selector at the X Magnifier settings page in the Admin area General settings Modules options Magnifier options General settings Magnifier Image viewer style Display image viewer in a popup window classic Image viewer width Minimum recommended width is 420 Image viewer height Minimum recommended height is 420 Save 2 In the directory with the new skin locate the graphic files that visualize the elements of the image viewer you want to modify and download the files to your local computer Then edit the files with your favorite image editor and upload them back to the directory with the skin replacing the original images 3 Edit the required attributes in the XML data file Important If you are not sure what exactly files and attributes you need to edit refer to the graphic scheme under the X Magnifier skins overview header earlier in this section of the manual to find out the names and the location of the necessary graphic files explore the XML data file By way of illustration let us create a new skin that will be all based on the existing skin Aqua Blue but will only have a different pallet For
27. nd enable it 1 Go to the Modules section of the store s administration back end Administration menu Modules 2 In the list of modules and add ons find the name Magnifier and select the check box opposite it 3 Click the Update button at the bottom of the list Configuring X Magnifier After activation the add on module needs to be configured 1 Go to the section General settings Modules options Magnifier options General settings Magnifier Image viewer style Display image viewer in a popup window M Image viewer width Minimum recommended width is 500 420 Image viewer height Minimum recommended height is 500 420 Save 2 Adjust X Magnifier options a Use the option Image viewer style to select a skin for your image viewer You can choose one of the pre designed skins provided with the module or create a skin of your own More information is available in the chapter Skinning X Magnifier of this manual b Select the check box Display image viewer in a popup window if you wish the image viewer O 2001 2009 Ruslan R Fazliev All rights reserved 14 X Magnifier add on module for X Cart 4 3 0 User manual to be displayed in a popup window Unselect if you wish the viewer to appear in a standard X Cart dialog box When displayed in a standard X Cart dialog box the image viewer work area is non resizable c Use the options Image viewer width and Image viewe
28. nifier popup magnifier tpl OK skini modules Magnifier popup window js OK skini modules Magnifier popup window tpl OK skini modules Magnifier product magnifier tpl OK skini modules Magnifier product magnifier modify tpl OK skini modules Magnifier skins aqua blue general close button down png OK skini modules Magnifier skins aqua blue general close button over png OK skini modules Magnifier skins aqua blue general close button up png OK skini modules Magnifier skins aqua blue general main border bottom png OK skini modules Magnifier skins aqua blue general main border left png OK skini modules Magnifier skins aqua blue general main border right png OK skini modules Magnifier skins classic zoom panel zoom up button down png skini modules Magnifier skins classic zoorn panel zoom up button over png OK skini modules Magnifier skins classic zoom panel zoom up button up png OK skini modules Magnifier source README OK skini modules Magnifier source cutter fla OK skini modules Magnifier source imageLevel as OK skini modules Magnifier source magnifier fla OK skini modules Magnifier source magnifier skinned fla OK skini modules Magnifier swfobject js OK Deactivating the module Please wait Ok ok Copyright 2001 2008 X Cart com right 2001 2008 Creative Development Click Next to proceed O 2001 2009 Ruslan R Fazliev All rights rese
29. on of your store s Admin zone Click the Next button Step 2 Installing and configuring the module The installation script will create a directory skin1 modules Magnifier and copy the module files to that directory It will also make changes to the database by creating the necessary database tables XCART 6 id X Magnifier Installation Wizard 0 Step 2 Installing and configuring the module Copying skin files Creating directory skini modules Magnifier OK Copying to file skini modules Maanifier cutter swf OK Copying to file skinifmodules Magnifier magnifier swf OK Copying to file skin1 modules Magnifier main css OK Copying to file skini modules Magnifier popup js OK Copying to file skini modules Magnifier popup create thumbnail tpl OK Ln ae ur PP m Copying to file skini modules Maagnifier source imageLevel as OK Copying to file skini modules Magnifier source magnifier fla OK Copying to file skini modules Magnifier source magnifier skinned fla OK Copying to file skini modules Magnifier swfobject js OK OK Activating the module Please wait OK Please wait Creating table xcart_images_2 OK OK Please wait OK lt Back Next gt Copyright 2001 2008 X Cart com Copyright 2001 2008 Ruslan R Fazliev lt rrf x cart com gt Click Next to proceed O 2001 2009 Ruslan R Fazliev All rights reserved X Magnif
30. r X Magnifier Check all Uncheck all Note Check this checkbox to make the corresponding field common for these products Image Pos Availability Image size O D p Enabled y 2000x1500 N thumbnail gt Delete selected Update Re slice selected images A popup window with the tool for thumbnail creation opens O 2001 2009 Ruslan R Fazliev All rights reserved 20 X Magnifier add on module for X Cart 4 3 0 User manual Close Create thumbnail O 2001 2009 Ruslan R Fazliev All rights reserved Using X Magnifier 21 3 Define the area that you would like to be displayed in the icon by dragging and resizing the red frame Close Create thumbnail 4 Click the Create thumbnail button The image thumbnail icon in the Images for X Magnifier list should be updated Images for X Magnifier Check all Uncheck all Note Check this checkbox to make the corresponding field common for these products Image Pos Availability Image size v El Ma fi Enabled 2000x1500 Re create thumbnail gt Delete selected Update Re slice selected images Re slicing images 2001 2009 Ruslan R Fazliev All rights reserved 22 X Magnifier add on module for X Cart 4 3 0 User manual X Magnifier enables you to re slice high resolution images This functionality may be useful when you need to 1 readjust the size of Level O images
31. r height to specify the size with which you would like the image viewer to open When the image viewer is displayed in a popup window the size defined by these options is used as the initial size of the image viewer frame the size used before the user resizes the popup window in which the viewer is displayed When the image viewer is displayed in a standard X Cart dialog box the size defined by these options is the only size available Important The minimum size at which the image viewer can be displayed with all its elements fully visible is 420 x 420 pixels It is not recommended to use widths and heights smaller than these values Note Images being uploaded for use with X Magnifier are sliced so that the size of their Level 0 images will fit the size of the image viewer work area corresponding to the image viewer size defined by the current values of the options Image viewer width and Image viewer height This means that if you change the values of the options Image viewer width and Image viewer height after having uploaded some images for X Magnifier the size of the previously created Level O images will no longer fit the work area displayed at the default size This will not prevent normal operation of the module however if you wish all Level O images to be the same size as the default size of the image viewer work area you might want to re slice all your previously uploaded images See the section Re slicing images in the chapt
32. rved 12 X Magnifier add on module for X Cart 4 3 0 User manual 4 Step 3 Uninstallation complete is the final step of the uninstallation process It notifies you that the module has been successfully uninstalled XCART 6 li X Magnifier Installation Wizard 0 Step 3 Uninstallation complete X Magnifier module has been successfully uninstalled Important To prevent unauthorized access to X Magnifier source code be sure to remove your X Magnifier distribution package archive from your web accessible directory lt Back Next gt Copyright 2001 2008 X Cart com Copyright 2001 2008 Creative Development Please note that the Wizard will not automatically remove the directory xcart images Z You will need to remove it manually Important After uninstalling X Magnifier be sure to remove the module distribution package from your web directory 3 Using X Magnifier Learn to use X Magnifier Admin Interface Customer Interface 3 1 Admin Interface Find out how X Magnifier can be activated and configured Enabling and Configuring X Magnifier See how zoomable images can be added edited and removed O 2001 2009 Ruslan R Fazliev All rights reserved Using X Magnifier 13 Managing X Magnifier Images 3 1 1 Enabling and Configuring X Magnifier Enabling X Magnifier After X Magnifier add on module is installed you need to log into the Admin area of your store a
33. sing your favorite compression program any archiver with support for TAR files 4 Upload the resulting files to the server directory where your X Cart is installed Note Please make sure you keep the directory structure during unpacking and uploading otherwise some necessary files can be overwritten 5 Point your browser at the location of your store with the addition of install xmagnifier php to launch the Installation Wizard For example if your domain name is www example com and your X Cart based store is installed in the directory xcart off your web root you should enter http www example com xcart install xmagnifier php into your browser address line 6 Follow the Wizard s instructions to install the add on module at your site O 2001 2009 Ruslan R Fazliev All rights reserved 6 X Magnifier add on module for X Cart 4 3 0 User manual Step 1 License agreement This step provides a Software License Agreement for you to accept and requires you to enter your Auth code XCART D li X Magnifier Installation Wizard 0 Step 1 License agreement Thank you for choosing X Magnifier This wizard will provide you with the installation instructions and will handle most of the installation tasks for you SOFTWARE LICENSE AGREEMENT Copyright c 2001 2008 Ruslan R Fazliev rrf irrf ru All rights reserved PLEASE READ THIS AGREEMENT EXPRESSES THE TERMS AND CONDITIONS ON WHICH YOU MAY USE
34. t Back Next Warning The add on module is already installed If you proceed with the installation all the database tables and template files used by the currently installed copy of the add on module will be overwritten existing data will be lost Copyright 2001 2008 X Cart com right 2001 2008 Creative Development Click the Next button O 2001 2009 Ruslan R Fazliev All rights reserved Installing and Uninstalling X Magnifier 11 3 The Installation Wizard will remove the module files and deactivate the module Step 2 Uninstalling the module rm m XCART Goli X Magnifier Installation Wizard Step 2 Uninstalling the module Removing skin files Removing file Removing file Removing file Removing file Removing file Removing file Removing file Removing file Removing file Removing file Removing file Removing file Removing file Removing file Removing file Removing file Removing ie Removing file ok Removing file Removing file Removing file Removing file Removing file Removing file Removing file Removing file OK SS kinif maaguresrmiagnirer Skinsrciassiczo rm psrejzoom snoer p prid LOR skini modules Magnifier cutter swf OK skini modules Magnifier magnifier swf OK skini modules Magnifier main css OK skini modules Magnifier popup js OK skini modules Magnifier popup create thumbnail tpl OK skini modules Mag
35. t of tools for exploring zoomable images The viewer interface looks like in the picture below r 7 A ee Zoom too MN Hand tool Image navigation bar JE Fit to screen button Return button 5 SE Close button Zoom bar i C Ey The following tools are provided Zoom tool Allows you to zoom in and out on specific areas of an image When selected the mouse cursor icon changes to show a zoom tool A Each time you click on the image it will zoom larger by one step keeping the point you click centered in the work area To reduce the magnification scale hold down the CTRL key on Mac APPLE key while using the zoom tool You will know the scale is going to be decreased if the mouse cursor icon looks like this a Hand tool Allows you to pan an image in the work area When selected the mouse cursor icon changes to show a hand pointer A To pan an image drag the hand pointer As you pan beyond the 2001 2009 Ruslan R Fazliev All rights reserved Using X Magnifier 33 image edge the view continues to pan until one of the image corners is positioned centrally in the work area Please note that you can double click on any point of the image to bring this point to the center of the image viewer work area Fit to screen button Sets the zoom scale to the largest value that keeps the entire image fully visible in the work area If the maximum level of the image is smal
36. ument Printed 02 11 2009 Contents l Table of Contents 1 General Information RES 1 IEVuregctltd c 1 1 2 How X Magnifier WorKs issus ca daa 2 2 Installing and Uninstalling X Magnifier Laccssnsdenu ip O TN 4 2 4 System Requirements ia 4 2 2 Installing X Magnifier leeeaesseeeeeeeeeeeee eene nnn an ananas saga aa aaa nr 5 2 3 Uninstalling X Magnifier 14 eeeeeseeeeeeeee eene nnne nnn rra ananas aaa aa saga nr 9 3 Using X Magnifier 12 EN Glue mc DB G M 12 3 1 1 Enabling and Configuring X Magnifier eese eene nennen nnne aesa at aa Cae Aaaa aaeain aaaeaii aa 13 3 1 2 Managing X Magnifier Images eeeeeeeeeeeeeeeeeee eene enennnn nr 14 3 1 3 Skinning X Magnifler td 24 A A aae aaa aaa aa aaao aaa Aa da aaaea raaraa aa paraa daaa iaa aa aaia 30 3 21 Opening the Image Vie e aa E 30 3 2 2 MAJO Viewer Co aii 32 Thank you for choosing X Cart software solutions O 2001 2009 Ruslan R Fazliev All rights reserved General Information 1 1 General Information Get to know X Magnifier by taking a look at the fundamentals What X Magnifier Is How X Magnifier Works 1 1 What X
Download Pdf Manuals
Related Search