X-Cart forums - Highslide Image Module

THIS IS FOR THE 4.1.XX SERIES ONLY!
Tested on 4.1.12 using the light and lucid theme

Step 1. Getting your gallery:
1.1) Go to http://highslide.com/editor/
1.2) Load it, click continue and on the left click under "Load Example" click 'Gallery: Mini Gallery'
1.3) Customize to your hearts content [may require extra modding, if so I can upload mine which would work]
1.4) Click publish at the top and download the .zip file

Step 2. Uploading files and fixing directories
2.1) Unzip the zip file and browse to the /highslide/ directory.
2.2) Copy all .js and .css files to your /skin1/ directory.
2.3) Copy the /graphics/ folder from the zip download into the /skin1/ directory
2.4) Load up highslide.css , highslide.config.js , highslide-with-gallery and highslide-ie6.css files in notepad, notepad++ or your choice of text editor that doesnt insert formatting info.
2.5) Look for all directories that point to /highslide/graphics/ or just graphics/ and replace them with /skin1/graphics and /skin1/graphics respectively. (Note: must be absolute web path! If store is located in a sub-directory, that must be included. Ex: www.domain.com/store/ would make the path /store/skin1/)
Example) xcart41/12/skin1/graphics/ ( URL Would be example.com/xcart41/12/skin1/graphics/ )

Step 3. Make a new thumb file
I did this so it wouldnt replace all thumbnails on the site (ex: category product thumbs) with highslide.

3.1) make a new .tpl file called product_thumbcustom and place it in /skin1/
3.2) Insert this code (This is heavily commented! If you have problems, read them!):

Code:

{* $Id: product_thumbcustom.tpl,v 1.19.2.4 2008/07/15 12:07:39 ferz Exp $ *}

{if $config.Appearance.show_thumbnails eq "Y" or ($type ne "T" and $type ne "")}





{* 

####################################################################################################

# Ok, so the below will put the thumbnail of the product as the main image on the product page.    #

# This is so if you have a 1500x1500 image  it wouldnt be 1500x1500 on the product page.           #

# This will also be the image you click to get into the gallery view.                              #

# The below code has been changed from the normal doing the following:                             #

# 1) The normal code located in product_thumbnail.tpl was gutted for use.  All that was kept is    #

#    the <img src ...> and the width/height variables.                                             #

# 2) I added in a clickable link.  Originally it wasnt there.  All that I used was the normal      #

#    anchor tags, input the img src code from the original, added the title tag (can be removed)   #

#    and the onclick is there for the ajax popup.  The alt tag has also been removed.              #

# 3) !!! PLEASE BE AWARE !!! The thumbnail size had to be roughly hacked in!  In the xcart 4.1.xx  #

#     series the image sizes are calculated differently than in the 4.2 series.  To get the        #

#     thumbnail to work properly, I had to remove the normal width and height and replace them      #

#     set them to 100%.  This alone wont do much, in the PimgBox div class, you MUST set the        #

#     max width and height to 10%                                                                   #

#    This may not work for everyone though, so you'll have to play around with your css file       #

#    A general rule of thumb, if the image looks like its in a 1px * 1px box, you didnt do it right#

#    If its only displaying the width OR height at the right thumb size, you didnt add in the      #

#    corresponding selector.                                                                       #     

####################################################################################################

*}



<div class="highslide-gallery">



    <a id="thumb1" href="{if $tmbn_url}{$tmbn_url|amp} {else} {if $full_url}{$http_location} {else}{$xcart_web_dir}{/if}/image.php?type={$type|default:"T"}&amp;id={$productid}{/if}"" class="highslide" 

            title="Caption from the anchor's title attribute" 

            onclick="return hs.expand(this, config1 )

             ">

            

                <img

                src="{if $tmbn_url}{$tmbn_url|amp} {else} {if $full_url}{$http_location} {else}{$xcart_web_dir}{/if}/image.php?type={$type|default:"T"}&amp;id={$productid}{/if}"

width="100%"

height="100%"

                alt="{$product|escape}" />{/if}

 

    </a>





{* 

####################################################################################################

# Now lets populate the rest of the gallery with images from the detailed area!                    #

# I stole the code for the below from the detailed product area and modified for use.              #

# The below code has changed in the following ways from the detailed images mod:                   #

# 1) This has been redone pretty much entirely.  All that I used from the detailed prod mod was    #

#    the URLs to fetch the full sized image.  The div class hides the images inside the product    #

#    thumbnail.  The {section name ..} just loops the code over for each image until theres no     #

#    more images.  Thumb1 ID is for highslide, the href is for clicking (incase no jscript or      #

#    something) and the src is for the image.                                                      #

####################################################################################################

*}



    <div class="hidden-container">

    

    

    

    

        {section name=image loop=$images}

            {if $images[image].avail eq "Y"}

            {if $images[image].tmbn_url}

                <a id="thumb1" href="{$xcart_web_dir}/image.php?id={$images[image].imageid}&amp;type=D" class="highslide" 

                    title="Caption from the anchor's title attribute" 

                    onclick="return hs.expand(this, config1 )">

                <img src="{$xcart_web_dir}/image.php?id={$images[image].imageid}&amp;type=D"  alt=""/>

                </a>

            {/if}

            <br />

            {/if}

        {/section}

        

        

        

    </div>

</div>

3.3) Open /skin1/customer/main/product.tpl and add the following after the !FIRST! line!

Code:

<script type="text/javascript" src="/skin1/highslide-with-gallery.js"></script>

<script type="text/javascript" src="/skin1/highslide.config.js" charset="utf-8"></script>

<link rel="stylesheet" type="text/css" href="/skin1/highslide.css" />

3.4 In the same product.tpl file look for this code:

Code:

{include file="product_thumbnail.tpl" productid=$product.image_id image_x=$product.image_x image_y=$product.image_y product=$product.product tmbn_url=$product.image_url id="product_thumbnail" type=$product.image_type}&nbsp;

Change it to this:

Code:

{include file="product_thumbcustom.tpl" productid=$product.image_id image_x=$product.image_x image_y=$product.image_y product=$product.product tmbn_url=$product.image_url id="product_thumbnail" type=$product.image_type}&nbsp;

Thats so it looks for our new custom highslide thubmnail template and not the old one.

3.5) At the bottom of /skin1/customer/main/product.tpl look for the following:

Code:

{/if}

{if $active_modules.Detailed_Product_Images ne "" && ($config.Detailed_Product_Images.det_image_popup ne 'Y' || $js_enabled ne 'Y')}

<p />

{include file="modules/Detailed_Product_Images/product_images.tpl" }

Either remove it or comment it out.

You are now done installing the gallery mod!