Image Gallery

[mazhar]

This user control can be used for showing the product images or images from a folder. Available images will be listed as thumbnail at bottom of the control. Clicking upon any thumbnail will open the large version of the image. You can change the styles etc to meet your needs.

Installation

The package contains three files. Place the ImageGallery.ascx or user control file in the conlib. Place the Gallery.css file in your current store theme. Finally place the mootools1.2.js on your website root.

Configurations

You can use control to either list product additional imges or to show images from some folder. By default the control shows the product images. In order to show the product images place control on some page where product id is available, for example you can place it on the product details page. You can also specify the description for the images. In order to support the description the control uses the alt text. On the AbleCommerce admin you can specify the alt text for the images and control will show it as description. Currently you can provide a text up to 100 characters for alt text. If you want to increase this you can change the maximum text limit on the alt field in ac_ProductImages table of the database.

Control supports two properties

1)- ProductMode
This is of boolean type. By default its set to true. If you want to list the images from some folder set it to false.

2)- GalleryPath
This is of string type. By default the path is Assets/Gallery/. You can change it your custom path on server. This setting is depending upon the ProductMode. First set the ProductMode=false and then set the path.

Screen Shots

[Jaz]

I can’t thank you enough. This totally solved my problems. I think this gallery will be a big help to all. You also managed to solve the problem that the original gallery, in that it would not allow html in the Alt tag.

Now just to be picky. How would you set it so the page loads with the first large image active?

[mazhar]

How would you set it so the page loads with the first large image active?

This could be done through some JavaScript statements. This change will update the user control file. Here is the updated ImageGallery.ascx file.

[alkasber]

Hello Mahzar,

I installed the files following your instructions but how I make it works? I just want it to replace the standard MORE IMAGES gallery, what I have to do?

Here is the code to MORE IMAGES in the Show Product 1 Content:

Code: Select all

#if($Product.Images.Count > 0)
<a href="#" onclick="window.open('ProductImages.aspx?ProductId=$Product.ProductId', 'productImages', 'status=0,toolbar=0,location=0,menubar=0,directories=0,resizable=yes,scrollbars=1,height=650,width=850')">
More Images

Can someone show me where to change to replace the standard More Images Gallery?

Thanks

[Jaz]

Thanks, that worked great. this image comes right up. I just noticed 2 small differences from how the origional gallery worked. First there seems top be something wrong with the fase of the main image. The background does the fading, not the image. This is not a huge problem. I just changed the fade colors to black to disable the fade.

The other difference is that on the origional Galleria, the thumbnails would go to the next line if there were too many of them. On this one, they go off the page.

Thanks,

[mazhar]

Hello Mahzar,

I installed the files following your instructions but how I make it works? I just want it to replace the standard MORE IMAGES gallery, what I have to do?

Here is the code to MORE IMAGES in the Show Product 1 Content:

Code:
#if($Product.Images.Count > 0)
<a href="#" onclick="window.open('ProductImages.aspx?ProductId=$Product.ProductId', 'productImages', 'status=0,toolbar=0,location=0,menubar=0,directories=0,resizable=yes,scrollbars=1,height=650,width=850')">
More Images


Can someone show me where to change to replace the standard More Images Gallery?

Thanks

In order to make this control show the product images, you can just add it in the show product 1 scriptlet and it will list the additional products. If you want to replace the more image gallery with this one then there are two possiablities just use the control in show product 1 scriptlet and comment out the lines you mentioned above. The other possibility could be to create a new aspx page for example ImageGallery.aspx and place the user control on it then change the more images code to look like

Code: Select all

#if($Product.Images.Count > 0)
<a href="#" onclick="window.open('ImageGallery.aspx?ProductId=$Product.ProductId', 'productImages', 'status=0,toolbar=0,location=0,menubar=0,directories=0,resizable=yes,scrollbars=1,height=650,width=850')">

[mazhar]

The other difference is that on the origional Galleria, the thumbnails would go to the next line if there were too many of them. On this one, they go off the page.

It seems some cross browser problem. This issue is on IE, FF just works fine.

[Jaz]

Yea - just saw that. Just can't be easy.

[mazhar]

Here is the fix locate the

Code: Select all

#gallery-items .gallery-item

style in the Gallery.css and change its

Code: Select all

overflow: hidden

style to

Code: Select all

overflow: visible

.

[Jaz]

Worked Perfect

[mazhar]

Hello Mahzar,

I installed the files following your instructions but how I make it works? I just want it to replace the standard MORE IMAGES gallery, what I have to do?

Here is the code to MORE IMAGES in the Show Product 1 Content:

Code:
#if($Product.Images.Count > 0)
<a href="#" onclick="window.open('ProductImages.aspx?ProductId=$Product.ProductId', 'productImages', 'status=0,toolbar=0,location=0,menubar=0,directories=0,resizable=yes,scrollbars=1,height=650,width=850')">
More Images


Can someone show me where to change to replace the standard More Images Gallery?

Thanks

Have a look at this control as well.
viewtopic.php?f=47&t=9071

[Jaz]

If anyone is interested, here is an example of it up and running:

http://www.trickconcepts.com/Regular-Fi ... 10C11.aspx

[mazhar]

If anyone is interested, here is an example of it up and running:

http://www.trickconcepts.com/Regular-Fi ... 10C11.aspx

Thanks for the link David. The live example is great.

[Logan Rhodehamel]

Is anyone from this thread interested in trying an alternative image gallery? If so, check the thread I posted here: viewtopic.php?f=42&t=9200

[mazhar]

IE8 FIX

Problem:-
IE8 is not loading large image when some one clicks on thumbnail image.

Fix:-

Edit ImageGallery.ascx file and locate following code line

Code: Select all

var image = item.getElement('img').clone();

and replace it with following code

Code: Select all

var image = item.getElement('img');
imageUrl = image.get('src');
image = image.clone();
image.set('src',imageUrl);

[Jaz]

Thanks, worked perfect.

[Jaz]

I just noticed that there is still a problem with IE8 and this gallery. The photos all show, but the description only shows for the first image. Here is an example:

http://www.trickconcepts.com/Poison-Fire-Fan-P26C7.aspx

[mazhar]

Trying to reproduce it on my local setup. I got three images with alternate text and its working great on IE8. Do you have any tip about reproduction case?

[Jaz]

I have tried to pin down the problem, but I have the same issue on 3 vista machines and on XP machine. I do not have any of them set to run on compatibility mode. I don't have any machines that it works correctly on.

[kastnerd]

Thanks, I am trying to tweak this for 800x600 images, But now the pop up window is not tall enough when it first opens. What file controls this size?

[mazhar]

check the CSS file for style on large image.

[kastnerd]

I am using this to show larger images of my products. One thing that could be improved is the auto naming of the files. If i upload "Kit.jpg" as the product image. It automaticly names the Icon and Thumbnail. But if I also try and upload Kit.jpg as "Additional Images" I have to manualy change the name so it wont over wright the product image.

[missylhale]

I am not getting the basic image first, just the additional images. So if there's not additional images and just basic images I am not getting any image. Am I not doing something right or is that how it is set up. Is there a way to display the basic image first or do I have to set up the first additional image the same as the basic image on each product? Thanks.

[mazhar]

Yes its coded in a way to load additional images only. In order to load basic image you can attach it as first additional image as well.