X-Cart forums - Highslide Image Module

X-Cart forums (https://forum.x-cart.com/index.php)

- Dev Questions (https://forum.x-cart.com/forumdisplay.php?f=20)

- - Highslide Image Module (https://forum.x-cart.com/showthread.php?t=48914)

Highslide Image Module

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!

Re: Highslide Gallery and single image 4.2.1

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.

Re: Highslide Gallery and single image 4.2.1

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

Thank you.

Re: Highslide Gallery and single image 4.2.1

Quote:

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

Re: Highslide Gallery and single image 4.2.1

Hello Tal.
Requesting on Version 4.10

Thanks

Re: Highslide Gallery and single image 4.2.1

Quote:

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 ?

Re: Highslide Gallery and single image 4.2.1

Quote:

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

Re: Highslide Gallery and single image 4.2.1

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!

Re: Highslide gallery (4.2 and 4.1) and single (4.2)

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?

Re: Highslide gallery (4.2 and 4.1) and single (4.2)

Any updates on this Gallery working on 4.3.x?

Alex

Re: Highslide gallery (4.2 and 4.1) and single (4.2)

I'll get 4.3 up sometime later. Very busy currently.

Re: Highslide gallery (4.2 and 4.1) and single (4.2)

Highslide for 4.3 is now available! With new features... Well, not new since it's not be released before like this.

You can now get Highslide 4.3 from simplexcart.com. The 4.3 version includes the following:

Now made as a module! Enable/disable from the X-cart interface
Only need to edit 2 files to get this working
No charges by me. Highslide still has a $29 license fee though
Supports single, mini-gallery and gallery mode
14 pre-made templates!
Settings are edittable via the X-cart admin interface! 52 settings as well.

What do you have to lose except those ugly massive detailed photos? :D/

If you have any issues with getting it to install then let me know. Same if some settings don't play nice, but in that case I will need to know what settings you have changed from the default value.

Modules for X-cart 4.2 and 4.1 will be available in the future.

Re: Highslide gallery (4.2 and 4.1) and single (4.2)

HI Tal,

I am building my XC 4.3.1 and I was wondering if you had a sample of someone using Highslide with this version of XC. I love the idea of not have the detailed product!! :)

Quote:

Originally Posted by Tal

Now made as a module! Enable/disable from the X-cart interface
Only need to edit 2 files to get this working
No charges by me. Highslide still has a $29 license fee though
Supports single, mini-gallery and gallery mode
14 pre-made templates!
Settings are edittable via the X-cart admin interface! 52 settings as well.

Re: Highslide gallery (4.2 and 4.1) and single (4.2)

Unfortunately not.
Installing it on your own site is quick and painless so you could give it a shot to see if you like it. If you have a dev server, you could install on that as well, no need for paying for a license and then using... The single-site license seems to be a trust-basis thing and isn't verified like X-cart and other PHP applications.

Re: Highslide gallery (4.2 and 4.1) and single (4.2)

Thanks Tal! Quick and pain huh?:oops:

What is a dev server?

Quote:

Originally Posted by Tal

Re: Highslide gallery (4.2 and 4.1) and single (4.2)

Hi,
I've followed the instructions exactly for my Xcart 4.3.1 Gold install and I dont get any pop out window just a big image filling the page. What have I done wrong ?
Any help much appreciated

Thanks all.
Paul

xcart 4.3.1 Gold

Re: Highslide gallery (4.2 and 4.1) and single (4.2)

Quote:

Originally Posted by pbalfour

If you could send me a link to your site so I can take a peak, I might be able to tell you.
Also, be sure to check that it is enabled in both the modules area (can be found on the left) and also is enabled in the settings area.

Quote:

Thanks Tal! Quick and pain huh?:oops:

What is a dev server?

A dev server is a development server. Instead of testing changes and such on a live site, you can just make a copy of it and test on the copy. If anything goes wrong, delete the copy or remove the edit and try again without having any potential problems on the live site.

Re: Highslide gallery (4.2 and 4.1) and single (4.2)

I love highslide! I purchased the commercial license and have installed it on my site so that I can have a gallery for my artwork (just on a static page) and it works great!

I wanted to try this module, so I have followed all the instructions very carefully - there aren't that many instructions, so it seems fairly simple. I've backed up my database and applied the sql patch, uploaded the highslide folder into skin1/modules, then updated the bottom.tpl file and the product.tpl file.

I can see the module in my admin section, so that seems to be working properly. But, now when I look at one of my products, the highslide doesn't seem to be working.

It shows my thumbnail and the thumb to the detailed image below, but clicking on either of them just opens the image itself in the whole window, not any popup like before or like the highslide popup.

Any ideas to fix this? I really want to get this working!

You can see here:
http://www.dreamtreestudio.com/star-shine-ACEO_2.5x3.5-inches.html

Oh, and by the way, in step 5 of the instructions you reference:

Code:

{include file="modules/highslide/product_highslide.tpl" productid=$product.image_id image_x=$product.image_x image_y=$product.image_y product=$product.product|escape tmbn_url=$product.image_url id="product_thumbnail" type=$product.image_type}

 {include file=modules/highslide/single_detailed.tpl}

but you have the highslide folder in your uploads called Highslide (capitalized). At first I didn't catch this and it caused a smarty error and couldn't read the module, but once I made the capitalizations on those 2 lines I got to this point. And it looks like the " " are missing on that 2nd line too, unless I was mistaken in that.

Thank you for your assistance!

Re: Highslide gallery (4.2 and 4.1) and single (4.2)

Hi,

Can you double check to see if everything is properly placed? I looked at your site and its trying to get the highslide files from http://skin1/modules/Highslide/
Yes, skin1 would be the domain xD

I think I might have found the instructions where I goofed.

Step 4: xcartDir/skin1/customer/bottom.tpl
Find the lines that reference /{$SkinDir}/modules/highslide/ and replace with {$SkinDir}/modules/highslide/
I just checked my local install and noticed that the variable already had a / infront. Removing that should work :)

Re: Highslide gallery (4.2 and 4.1) and single (4.2)

Hi Tal! :)

Thanks so much for your quick response! Yes, you're right, there's an extra "/" in there that I didn't notice either! lol I removed those in the bottom.tpl file and now it's better, but not quite there yet.

Now, when I click on the thumbnail, I see the loading image, but the detailed image doesn't pop up. I'm going to check the product.tpl file to see if there are any extra "/" in those lines too just in case.

I hate to bother you with this, but I really appreciate your help! Any tips on what may be wrong? I hope it's nothing I did! :)

Re: Highslide gallery (4.2 and 4.1) and single (4.2)

Quote:

Originally Posted by TheGardenBath

Wow, I botched my first mod.
In highslide-full.js on line 56 there should be a graphicsDir line. Remove xcart43/ but keep the first forward slash. That should work.

Don't get why my testing didn't reveal that though... It was in a completely new directory and shouldnt have worked.

Re: Highslide gallery (4.2 and 4.1) and single (4.2)

No worries, Tal! :)

I fixed that line in the js and the highslide seems to be working now.

Maybe I don't understand how it's supposed to work - it's not behaving how I expected now that I can see it in action.

Before, with the detailed image set to be in a popup window, the product thumb that I uploaded was on the product page and when you clicked it, the detailed product image would pop up.

Now, with highslide enabled, there is the original product thumb image but also a 2nd thumb image. If you click on the product thumb, it does the highslide popup, but since it's a thumb and already the small size that it is, it doesn't really get bigger - in other words, it does NOT popup to the larger detailed product image.

The 2nd thumb image DOES popup with highslide to the detailed product image.

http://www.dreamtreestudio.com/star-shine-ACEO_2.5x3.5-inches.html

Is there supposed to be 2 thumbs like this? I expected just the one thumb would open the larger detailed image. Is there a setting that maybe I need to change? I've tried doing single image, gallery, and mini-gallery so far. In mini-gallery there is only 1 thumb image on the product page, but it doesn't link to the detailed product image, it just pops up itself (no larger, if that makes sense).

What I was expecting was similar to the way the original pop-up worked, just with a nicer pop-up! :)

Any more advice? I truly appreciate your support with this!

Re: Highslide gallery (4.2 and 4.1) and single (4.2)

The way I implemented it, the very first image you upload (on the main product page, not detailed) will pop-up in the full size. This is so you don't need to upload the same image twice. One for the thumbnail to show in the category/search and then one for detailed. This will just use the larger version of the thumbnail as the first image.

So, just remove the detailed image you currently have and then reupload that image as the main image in the main product options area.

Re: Highslide gallery (4.2 and 4.1) and single (4.2)

Ah-ha!! That's even better - I always hate having to do 2 images when 1 will do!

I just did that and it works PERFECTLY!!!!! :D

Thanks so much for working through this with me! Hopefully we've both learned a few things...and that's always good!

I love highslide - my images look so much nicer now! Thank you for your hard work!

Re: Highslide gallery (4.2 and 4.1) and single (4.2)

Module is now updated and works for both 4.2.x and 4.1.x!
Please see http://simplexcart.com/modifications/highslide
If anyone has problems or questions, do let me know and I'll gladly help you get it working on your site :)

Also, original posts for 4.2.x and 4.1.x modifications will still be kept in the thread and on the site, however it should only be used as a reference.

Will be working on a newer version with even moar features. Not going to go into too much depth but it will provide an all-in-one solution for modal windows. Per page, category control as well...

Re: Highslide Image Module

hi there

can you post a couple of links showing the mod in action please?

Thank you!

Re: Highslide Image Module

Quote:

Originally Posted by fogofogo

hi there

can you post a couple of links showing the mod in action please?

Thank you!

Only X-cart example would be this:
http://www.dreamtreestudio.com/star-shine-ACEO_2.5x3.5-inches.html

I don't have any info from others using it. It functions pretty much exactly like the ones on highslide.com though.

Re: Highslide Image Module

Tal - it will be great if you make this available for v4.4. Adding Highslide in Detailed Product Images Module - drop down menu together with the other 3 QT options (cloudzoom, ...).