X-Magnifier add-on module - X-Cart
Contents
1. All element names are shown in the picture below borders view area color main_border_top viewarea_bg_color main_border_right main background color skin attrubute main_border_bottom main_bg_color main_border_left skin attrubute cursors cursor_hand cursor_magnifier_plu cursor_magnifier_minus 1 Ki thumbnails window thumbs_area_frame_left thumbs_area_frame_right thumbs_area_frame_middl c A zoom section background selection frame color zoom_panel_bag thumbs_frame_colo skin attrubute return button H return button up return button oue return button down thumbnails background color thumbs_bg_color skin attrubute corners main_top_left_corner main_top_right_corner main_bottom_left_corner main_bottom_right_corner magnify toot tools_button_magnify_up tools_button_magnify_over tools_button_magnify_down tools_button_magnify_selected move tool tools_button_move_up tools_button_move_over tools_button_move_down tools_button_move_selected D fit to screen button tools_button_fit_up tools_button_fit_over tools_button_fit_down p tools background tools_bg scroll buttons background zoom slider thumbs_scrolling_bg_left thumbs_scrolling_bg_right thumbs_scrolling_bg_middle thumbnails scrolling left button thumbs_scrolling_button_left2. CART Gold et Main page Product Management Real chafer beetle decoration Product Management Real chafer beetle decoration gt Product details gt Search for product gt International descriptions gt Add product gt Product options gt Categories gt Wholesale prices gt Manufacturers gt Upselling links gt Orders gt Detailed images gt Images for X Maaqnifjer b Customer Reviews Product details Product thumbnail Thumbnail recommended size 50x50 150x150 Change image Delete image 2001 2008 Ruslan R Fazliev All rights reserved 16 X Magnifier add on module for X Cart 4 1 11 User manual This should open a dialog box titled Images for X Magnifier Images for X Magnifier Check all Uncheck all IMAGE POS AVAILABILITY IMAGE SIZE No images Add a new Image 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 2001 2008 Ruslan R Fazliev All rig
3. OK Removing file skin1 modules Magnifier skins classic zoom_panel zoom_panel_bg png OK Removing file skin1 modules Magnifier skins classic zoom_panel zoom_slider_down png OK Removing file skin1 modules Magnifier skins classic zoom_panel zoom_slider_over png 0K Removing file skin1 modules Magnifier skins classic zoom_panel zoom_slider_up png OK Removing file skinl modules Magnifier skins classic zoom_panel zoom_up_button_down png 0K Removing file skinl modules Magnifier skins classic zoom_panel zoom_up_button_over png 0K on file skinl modules Magnifier skins classic zoom_panel zoom_up_button_up png OK Deactivating the module Please wait ee OK lt Back Next gt Copyright 2001 2007 X Cart co opyriaht LOOL 200 reative AM opment Click Next to proceed 2001 2008 Ruslan R Fazliev All rights reserved 12 X Magnifier add on module for X Cart 4 1 11 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 Geld E X Magnifier module has been successfully uninstalled Warning We strongly recommend you to remove X Magnifier distribution package from your web directory to prevent unauthorized access to X Magnifier source code Copyright 2001 2007 X Cart com Copyright 2001 2007 Creative Developer Please note that the Wizard will not automatical
4. 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 section of your store s Admin zone Click the Next button Step 2 Installing and configuring the module 2001 2008 Ruslan R Fazliev All rights reserved 8 X Magnifier add on module for X Cart 4 1 11 User manual 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 NOART Gold X Magnifier Installation Wizard Step 2 Installing and configuring the module Copying skin files Creating directory skin1 modules Magnifier OK Copying to file skin1 modules Magnifier cutter swf OK Copying to file skin1 modules Magnifier magnifier swf OK Copying to file skini modules Magnifier popup js OK Copying to file skini modules Magnifier popup_create_thumbnail tpl OK Copying to file skini modules Magnifier popup_magnifer tol OK Copying to file skini modules Magnifier popup_window tpl OK Copying to file skin 1 modules Magnifier product_magnifier tpl OK Copying to file skin1 modules Magnifier product_magnifier_modify tpl OK Creating directory skin1 modules Magnifier skins OK Creating directory skin1 modules Magnifier skins aqua_blue OK Creating directory skin1 modules Magnifier
5. SOFTWARE BY INSTALLING COPYING OR OTHERWISE USING THE SOFTWARE YOU AND YOUR COMPANY COLLECTIVELY YOU ARE ACCEPTING AND AGREEING TO THE TERMS OF THIS LICENSE AGREEMENT IF YOU ARE NOT WILLING TO BE BOUND BY THIS AGREEMENT DO NOT INSTALL OR USE THE SOFTUARE VARIOUS COPYRIGHTS AND OTHER INTELLECTUAL PROPERTY RIGHTS PROTECT THE SOFTWARE THIS AGREEMENT IS A LICENSE AGREEMENT THAT GIVES YOU LIMITED RIGHTS TO USE THE SOFTUARE AND NOT AN AGREEMENT FOR SALE OR FOR TRANSFER OF TITLE THE AUTHOR RETAINS ALL RIGHTS NOT EXPRESSLY GRANTED BY THIS AGREEMENT The author forbids under any circumstances the unauthorized reproduction of we DE renTo ee gt a RETT E TEE EE NET TEEN we tet e erm ise X Auth code This is a protection from unauthorized use of installation script 1I accept the License Agreement lt Back Next gt Copyright 2001 2007 X Cart com Copyright 2001 2007 Creative Development 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 I 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 protects your X Cart installation Such a code was issued to you when you first installed your
6. configuration file modules Magnifier config php Storing of original images is enabled by default which corresponds to the value of the variable magnifier_sets save_init_image set to 1 To store just image tiles but not the original image you can change the value of the variable magnifier_sets save_init_image to 0 Re slicing functionality is not provided for zoomable images uploaded in the 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 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 2008 Ruslan R Fazliev All rights reserved 22 X Magnifier add on module for X Cart 4 1 11 User manual 3 1 3 Skinning X Magnifier How skins are used in X Magnifier X Magnhifier allows you to change the style of your image viewer by changing its skins Image viewer skins can be selected in the General settings Modules options gt Magnifier options section of your store s Admin zone You can use one of the pre designed skins shipped with X Magnifier add on module or creat
7. 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 0 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 0 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 chapter 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 2001 2008 Ruslan R Fazliev All rights reserved Using X Magnifier 15 3 1 2 Managing X Magnifier Images Uploading images 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
8. 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 2001 2008 Ruslan R Fazliev All rights reserved Installing and Uninstalling X Magnifier 5 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 your database name your username and password for access to the database X Cart 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 No
9. 5 International 500 555 5555 Your Company Name zz Gifts zz Real chafer beetle decoration Real chafer beetle decoration A great attention getter 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 SKULS3 WS Se itern s available Weight 0 50 Ibs Price 8 99 7 82 2001 2008 Ruslan R Fazliev All rights reserved Using X Magnifier 31 3 2 2 Image Viewer Controls The image viewer provides a set of tools for exploring zoomable images The viewer interface looks like in the picture below la NI KH ee 200m tool ME hand tool image navigation bar Qe return button close button zoom bar EE G l i gt X close fit to screen button 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 Q 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 l
10. HE TERMS AND CONDITIONS ON WHICH YOU MAY USE THIS SOFTWARE PROGRAN AND ASSOCIATED DOCUMENTATION THAT RUSLAN R FAZLIEV _ _ hereinatter _ eterred to as THE AUTHOR IS FURNISHING OR MAKING AVAILABLE To Weg PL RAS DP SOFTWARE THIS sxomecrnwr IS A LICENSE AUreewewr THAT GIVES YOU LIRITEI presse Sec TO USE THE SOFTWARE AND NOT AN AGREEMENT FOR SALE OR FOR TRANSFER OF TITLE THE AUTHOR RETAINS ALL RIGHTS NOT EXPRESSLY GRANTED BY THIS AGREEMENT The author forbids under any circumstances the unauthorized reproduction of OU EE TEEN D sd tes ee ee ee TETEEET Wanted ns outa ae New installation a Uninstall the module Auth code This is a protection from unauthorized use of installation script I accept the License Agreement lt Back Next gt 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 ne on module will be overwritten existing data will be ost Copyright 2001 2007 X Cart co Click the Next button 2001 2008 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 XCART EE Removing skin files Removing file skin1 modules Magnifier cutter swf OK Removing file skin1 modules Magnifi
11. X Magnifier add on module for X Cart 4 1 11 User Manual AAU EC HIG 2001 2008 Ruslan R Fazliev All rights reserved Company website www x cart com Revision date Aug 05 2008 X Magnifier add on module for X Cart 4 1 11 User Manual 2001 2008 Ruslan R Fazliev All rights reserved This User Manual is intended for X Magnifier add on module for X Cart v 4 1 11 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 1 11 User manual 2001 2008 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
12. _up thumbs_scrolling_button_left_over thumbs_scrolling_button_left_down thumbs_scrolling_button_left_inactive zoom_slider_up zoom_slider_over zoom_slider_down thumbnails scrolling slider zoom_line_bg thumbs_scrolling_slider thumbnails scrolling right button thumbs_scrolling_button_right_up thumbs_scrolling_button_right_over thumbs_scrolling_button_right_down thumbs_scrolling_button_right_inactive 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 background close button close_button_up close_button_over close_button_down close button tink close_button skin attrubute 2001 2008 Ruslan R Fazliev All rights reserved Using X Magnifier 25 If you wish to change the appearance of a certain part of the viewer interface you need to find the description of its elements in the XML file and edit the respective graphic files Customizing an X Magnifier skin To adapt X Magnifier viewer appearance to the design of your store you can create your own custom skin for X Magnifier or modify one of the existing skins Customizing an existing skin is easiest of all 1 In the X Magnifier skins directory clone one of the existing skins and give it a new name for example my_skin The new skin appears in the Image viewer style drop down menu on the General settings Modules options gt Magnifier
13. all 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 2001 2008 Ruslan R Fazliev All rights reserved 6 X Magnifier add on module for X Cart 4 1 11 User manual 6 Follow the Wizard s instructions to install the add on module at your site 2001 2008 Ruslan R Fazliev All rights reserved Installing and Uninstalling X Magnifier 7 Step 1 License agreement This step provides a Software License Agreement for you to accept and requires you to enter your Auth code XCART Gold a 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 a SOFTUARE LICENSE AGREEMENT Copyright ei 2001 2007 Ruslan R Facliev lt erf rrf ru gt All rights reserved PLEASE READ THIS AGREEMENT EXPRESSES THE TERMS AND CONDITIONS ON WHICH YOU MAY USE THIS SOFTWARE PROGRAH AND ASSOCIATED DOCUMENTATION THAT RUSLAN R FAZLIEV hereinafter referred to as THE AUTHOR IS FURNISHING OR MAKING AVAILABLE TO YOU WITH THIS AGREEMENT COLLECTIVELY THE SOFTWARE PLEASE REVIEW THE FOLLOVING TERMS AND CONDITIONS OF THIS LICENSE AGREEMENT CAREFULLY BEFORE INSTALLING OR USING THE
14. cilitate 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 Maghifier 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 recommended 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 2001 2008 Ruslan R Fazliev All rights rese
15. document Printed 05 08 2008 Contents l Table of Contents 1 General Information eene KEREN RER KEREN R KEREN R ENEE RRE REEN REENEN REENEN 1 1 1 What X Magnifier TE 1 1 2 How X Magnifier dE 2 2 Installing and Uninstalling X MaQnifier s ssceeeeeseeeeeseenseeseeneeneeeneenees 4 2 1 System e UC TEE A ER CHIEeK EG OE te UC dEEEEE 5 2 3 Uninstalling Ke ET LTE 10 3 Using X Magniifier scssssseseeseessseneneessnennesenenneneeesnenneneeesneneesenenneneeesnens 12 3 1 Admin Interface eege 12 3 1 1 Enabling and Configuring X Magnifier sscsssssssssssssseesesseesnessesenesnessessneseessesseesenesaesesseesaesenesaesaesaneneeseeseneessaess 12 3 1 2 Managing X Magnifier Mages EE 15 3 1 3 SKINNING X Magnifiet E 22 3 2 UPS EOIN Interface cic ties cesta ence cap neice deer 30 3 2 1 Opening the Image Viewer EE 30 3 2 2 Image Viewer Controls EE 31 Thank you for choosing X Cart software solutions 2001 2008 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 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 fa
16. e your own skins matching your store design Depending on the selected skin the image viewer will load the appropriate graphic images for its visual elements The two pre designed skins shipped with X Magnifier are Classic and aqua_blue They provide the following image viewer styles r a II gt X CLOSE Classic style 2001 2008 Ruslan R Fazliev All rights reserved Using X Magnifier 23 Aqua blue style Where skins for X Magnifier are stored All skins for X Magnifier viewer are stored in the directory skin1 modules Magnifier skins where skin1 is X Cart skin directory Every skin is stored in a separate folder and bears the name of the folder in which it is stored Names of skin folders appear as skin names in the Image viewer style drop down box on the General settings Modules options gt Magnifier options page Relations between image viewer interface elements and graphic files Each skin folder contains graphic files depicting the parts of the image viewer interface and an XML data file The XML data file describes the relations between the elements of the image viewer interface and their graphic files Each interface element has a special name that is used in the XML data file to match this element with the corresponding graphic files 2001 2008 Ruslan R Fazliev All rights reserved 24 X Magnifier add on module for X Cart 4 1 11 User manual
17. e following elements aset 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 2001 2008 Ruslan R Fazliev All rights reserved 4 X Magnifier add on module for X Cart 4 1 11 User manual 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 Image format conversion issues Note that any GIF and PNG images that you upload for use in 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
18. e 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 2001 2008 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 i
19. ect 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 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 viewer 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 2001 2008 Ruslan R Fazliev All rights reserved 14 X Magnifier add on module for X Cart 4 1 11 User manual is notrecommended 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
20. ed eq Y assign var use_popup value Y assign var flash_background value 000000 else assign var flash_background value FFFFFF if Here the first definition of the variable flash_background determines the color of the popup window pane the second one the color of the dialog box area behind the image viewer You can change the colors by editing the values of the flash_background variable 2001 2008 Ruslan R Fazliev All rights reserved 30 X Magnifier add on module for X Cart 4 1 11 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 Click to zoom link on the Product details page CALL US 1 800 555 555
21. er magnifier swf OK Removing file skini modules Magnifier popup js OK Removing file skini modules Maanifier popup_create_thumbnail tp OK Removing file skini modules Magnifier popup_magnifier tpl OK Removing file skini modules Magnifier popup_window tpl OK Removing file skini modules Magnifier product_magnifier tpl OK Removing file skini modules Magnifier product_magnifier_modify tpl 0K Removing file skini modules Magnifier skins aqua_blue general close_button_down png OK Removing file skin1 modules Magnifier skins aqua_blue general dose_button_over png OK Removing file skin1 modules Magnifier skins aqua_blue general dose_button_up png OK Removing file skin1 modules Magnifier skins aqua_blue general main_border_bottom png OK Removing Be eich 1modules Magnifier skins aqua_ blue general main_border_left png OK lagnifier skins aqua_blue general main_bord ht OK Removing file skin 1 moduresyrre Siclassic 200m_Parreyrceurn_outton_over png OF Removing file skin 1 modules Magnifier skins classic z0om_panel return_button_up png OK Removing file skini modules Magnifier skins classic zoom_panel zoom_down_button_down png OK Removing file skini modules Magnifier skins classic zoom_panel zoom_down_button_over png OK Removing file skini modules Magnifier skins classic zoom_panel zoom_down_button_up png OK Removing file skini modules Magnifier skins classic zoom_panel zoom_line_bg png
22. frame 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 IMAGE POS AVAILABILITY IMAGE SIZE 1 Enabled wv 2000x1500 Re create thumbnail Re slice image Update Delete selected 2001 2008 Ruslan R Fazliev All rights reserved Using X Magnifier 21 Re slicing images X Magnifier allows you to re slice uploaded images This functionality can be used 1 to readjust the size of Level 0 images so they fit the image viewer work area after you change the size of the image viewer using the options Image viewer width and Image viewer height 2 to restore lost or broken parts of zoomable images tiles or xml data To re slice an image 1 Open the Images for X Magnifier dialog box listing the desired set of zoomable product images 2 Click on the link Re slice image opposite the image that you wish to be re sliced As soon as the selected image is re sliced you should see a confirmation message in an Information box Important Re slicing functionality is provided only for those X Magnifier images for which the original image the image that was originally uploaded into X Magnifier is stored on the system Storing of original images can be enabled disabled by adjusting the variable magnifier_sets save_init_image in X Magnifier module
23. has been successfully installed Before you proceed to use X Magnifier module please remove the install xmagnifier_php installation script Warning We strongly recommend you to remove X Magnifier distribution package from your web directory to prevent unauthorized access to X Magnifier source code 1 ADMINISTRATOR BACKOFFICE 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 2007 X Cart com Copyright 2001 2007 Creative Development 2001 2008 Ruslan R Fazliev All rights reserved 10 X Magnifier add on module for X Cart 4 1 11 User manual 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 Wizard Step 1 License agreement select the Un install the module radio button XCART Geld E eege 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 2007 Ruslan R Fazliev lt rrf rrf ru gt All rights reserved PLEASE READ THIS AGREEMENT EXPRESSES T
24. hts reserved Using X Magnifier 17 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 a S i Enabled e 2000x1500 Re create thumbnail E Re slice image e Update Delete selected 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 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 2001 2008 Ruslan R Fazliev All rights reserved 18 X Magnifier add on module for X Cart 4 1 11 User manual If a product has more than one zoomable images it is possible to control the order in which these image
25. iewer interface elements and graphic files earlier in this chapter we ll find out that the Return button element of the viewer interface includes in fact three elements corresponding to the different button states return_button_up the button is not pressed normal state return_button_over the mouse pointer is over the button but the button is not pressed yet hover state return_button_down the button is pressed Each of the named button states is rendered by its own graphic image If we look into the XML file describing image file references for the elements of the image viewer interface for the classic skin we can find out what image files correspond to the Return button The named PNG files provide the following images up over down O OC We download these images and modify them in an image editor In our example we just change the hue of all the images to make the button pink ish up over down L i Then we save the changes and upload the files back to the directory of our custom skin pink 2001 2008 Ruslan R Fazliev All rights reserved Using X Magnifier 27 If we then apply the pink skin to the image viewer using the option Image viewer style in the section General settings Modules options gt Magnifier options the Return button will be different from what it used to be r 4 u gt x cose 2001 2008 Ruslan R Fazlie
26. ike this Qq Hand tool Allows you to pan an image in the work area When selected the mouse cursor icon changes to show a hand pointer dy To pan an image drag the hand pointer As you pan beyond the 2001 2008 Ruslan R Fazliev All rights reserved 32 X Magnifier add on module for X Cart 4 1 11 User manual 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 smaller 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
27. ly 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 Magnhifier can be activated and configured Enabling and Configuring X Magnifier See how zoomable images can be added edited and removed 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 and enable it 2001 2008 Ruslan R Fazliev All rights reserved Using X Magnifier 13 1 Go to the Modules section of the store s administration back end Administration menu gt 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 gt Magnifier options General settings Magnifier options Image viewer style classic e Display image viewer in a popup vV window Image viewer width 500 Image viewer height 500 Save 2 Adjust X Magnifier options a Use the option Image viewer style to sel
28. mage size limitations Source files for uploading into X Magnifier can be in GIF JPEG and PNG formats X Magnhifier 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 ProductID 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 on module For example xcart images Z 63 1 would be a folder containing image files for the first zoomable image of a product whose ProductID is defined as 63 Every xcart images Z ProductID ImageID directory in your store will contain th
29. options page General settings Magnifier options Image viewer style Display image viewer in a popup window Image viewer width Image viewer height 2 In the directory of the new skin find the graphic files corresponding to the image viewer interface elements whose appearance needs to be changed Use the XML file to find out the names of the necessary graphic files 3 Download these graphic files to your local machine 4 Modify the downloaded images as needed in your favorite image editor 5 Upload the resulting images back to the directory of your custom skin replacing the old images After this you can use the new skin as usual Example Let us create an X Magnifier image viewer skin that will use the same style of interface elements as the pre designed classic skin but will be a different color for example pink We begin by creating a new skin directory pink and copying the contents of the directory Classic 2001 2008 Ruslan R Fazliev All rights reserved 26 X Magnifier add on module for X Cart 4 1 11 User manual into it For the sake of our example we will just change the color of the image viewer Return button The rest of the image viewer elements can be changed in a similar way so you should be able to complete the task of changing the skin color easily after you get the idea If we look at the scheme provided in the section Relations between image v
30. rved 2 X Magnifier add on module for X Cart 4 1 11 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 module 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 th
31. s 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 Magnhifier 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 for X Magnifier Check all Uncheck all IMAGE POS AVAILABILITY IMAGE SIZE SS S S Enabled e 2000x1500 Re create mbna gt Re slice image 63 Update Delete selected 2001 2008 Ruslan R Fazliev All rights reserved Using X Magnifier A popup window with the tool for thumbnail creation opens Create thumbnail 19 2001 2008 Ruslan R Fazliev All rights reserved 20 X Magnifier add on module for X Cart 4 1 11 User manual 3 Define the area that you would like to be displayed in the icon by dragging and resizing the red
32. skins aqua_blue general OK Copying to file skin1 modules Magnifier skins aqua_blue general close_ button _ down png OK fil nifier skins aqua_blue general dose utton_ over png OK Copying to file skin S classic zoom nel_bg png 0 Copying to file skini modules Magnifier skins classic zoom_panel zoom_slider_ Ge png 0K Copying to file skin1 modules Magnifier skins classic zoom_panel zoom_slider_over png OK Copying to file skini modules Magnifier skins classic zoom_panel zoom_slider_up png OK Copying to file skini modules Magnifier skins classic zoom_panel zoom_up_button_down png OK Copying to file skini modules Magnifier skins classic zoom_panel zoom_up_button_over png OK oa to file skin1 modules Magnifier skins classic zoom_panel zoom_up_button_up png OK OK Activating the module Please wait 0K Please wait Creating table xcart_images_zZ OK 0K Please wait 0K lt Back Next gt Ua Copyright 2001 2007 X Cart co Click Next to proceed 2001 2008 Ruslan R Fazliev All rights reserved Installing and Uninstalling X Magnifier 9 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 ERT Gold See e X Magnifier module
33. te GDLib is involved at the stage of preparing a new image for use with X Magnifier but it is notinvolved in zooming or panning of animage in X Magnifier viewer All GDLib does is convertimages 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 using 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 5 Point your browser at the location of your store with the addition of inst
34. 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 2001 2008 Ruslan R Fazliev All rights reserved X Magnifier add on module for X Cart 4 1 11 User manual 2001 2008 Ruslan R Fazliev All rights reserved Printed 05 08 2008
35. v All rights reserved 28 X Magnifier add on module for X Cart 4 1 11 User manual After we change the hue for all the other graphic files of the pink skin the image viewer will be as pink as this one r 2001 2008 Ruslan R Fazliev All rights reserved Using X Magnifier 29 Please be aware that it is also possible to change the background color against which the image viewer frame is displayed corresponds to the color of the popup window pane and the color of the area of X Cart s dialog box behind the image viewer To understand why you would want to change the image viewer background color please see the image above This image is a screenshot of the contents of a popup window displaying an image viewer Note the black areas around the corners of the image viewer frame These areas are what you see of the window pane color behind the viewer frame If you change the color of your image viewer frame like we did above or change the background color of X Cart s dialog boxes the image viewer background color may look out of place To change this color so it matches its surroundings and the color of your image viewer frame edit the template skin1 modules Magnifier product_magnifier tpl If you open this template file in a text editor at the beginning you will find the following lines if config Magnifier magnifier_image_popup eq Y popup_mode eq Y amp amp js_enabl
Download Pdf Manuals
Related Search