X-Cart forums

[Shamun]

Are you wanting to use those nifty javascript image popup scripts in your store to trim or saw down on those detailed images? Or maybe just to impress your visitors? Well, look no further!
Highslide is one of those javascript popup viewers but what sets it apart from the rest is the amount of customization possible! You can display your images however you want! It supports galleries, arrow key movement, open/close effects, css styling, captions and more!

If you're even the slight bit interested, head on over to http://www.simplexcart.com/SXC-Highslide-V1.1.0.zip and get it up and running in minutes! If you don't like it, just disable it and your site will be back to using regular detailed images.

Unfortunately posts have a max of 10,000 characters. The info/editing in this post had to be removed to be under the limit. Original code can still be found on the website though!

[Shamun]

No comments or problems?

Also, I found the problem if anyone noticed the note earlier on the post.
The css, .js and .tpl files require the absolute web path. So you can still copy+paste mostly, just have a few files to change.
I also removed the 25% image size code and replaced it with 100%. This is because without that, the thumbnail will actually be the non-thumbnail version. 100% width/height makes it the correct thumbnail size.

[Learner]

Hi,
Can you help me for x-cart 4.1.9 and 4.1.11?

Thank you.

[Shamun]

Originally Posted by Learner

Hi,
Can you help me for x-cart 4.1.9 and 4.1.11?

Thank you.

Sure.
Gimme a lil while though, still got some things to resolve with the current site im working on.

Unlikely it'll take more than a week and the changes should work on both versions

[hramani]

Hello Tal.
Requesting on Version 4.10

Thanks

[Learner]

Originally Posted by Tal

Sure.
Gimme a lil while though, still got some things to resolve with the current site im working on.

Unlikely it'll take more than a week and the changes should work on both versions

Any solution about 4.1.9 and 4.1.11 ?

[Shamun]

Originally Posted by Learner

Any solution about 4.1.9 and 4.1.11 ?

Not quite yet, sorry.
Been working on a site/forum with some mods so I havent had the time to even download.

I'll get to that now though

[Shamun]

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!):

{* $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!

<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:

{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} 

Change it to this:

{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} 

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:

{/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!

[krtwn]

i have x-cart gold (X-Cart DB Version: 4.3.1 GOLD) and followed these instructions - Highslide gallery (4.2 and 4.1) - but it doesnt seem to be working. It all seems ok, but the images never go past the "loading" part.

can anyone please point me to the right instructions?

[alexskoro]

Any updates on this Gallery working on 4.3.x?

Alex