AbleCommerce Shopping Cart Software

In our progress of the new store we have begun working on the additional images. In our store we just get a link that says Additional Images - which is okay, but I'd like to do something more like this: http://www.pegasusshoes.com/Merrell-Cru ... O46081.cfm

Is that an Able 7 or Able 5.5 website?

Hey Robbie.
I'm not sure what version that store (which looks awesome) is on...
I know that on 7.0, there are options to display additional images when you are using options. In my store, that's still in development, we use more kits, and we had to customize to show the additional images on the product page. Here's an example of what we came up with...
http://76.12.100.221/Applied-Biochemist ... P2219.aspx
I wrote the code for this a while back, but, I seem to remember it not being too difficult at all...
Is that sort of what you're looking for? Or will swatches associated with different options work for you?

Scott

We had a 5.5 site where we did that using javascript and putting the code in the product description area. You can probably find some code on http://www.dynamicdrive.com if you want to go that route.

Someone just found this old post for me that shows how it was done in 5.5. Something similar in 7 could be done.
viewtopic.php?f=4&t=2361&hilit=multiple+item+images

I added a CustomProductSwatches conlib file to my Product Page scriptlet...
I have it check, first, if there is more than one image for the product... Then, the actual code files are extremely simple...
CustomProductSwatches.asxc: ...and the code file... CustomProductSwatches.ascx.cs In order for this to work, the ID of your main product image has to be ProductImage.
Feel free to use any of this if it is useful.

Scott

heinscott wrote:I added a CustomProductSwatches conlib file to my Product Page scriptlet...
I have it check, first, if there is more than one image for the product...

Code: Select all

#if($Product.Images.Count > 0)
<td style="border-top:solid 1px gray; border-right:solid 1px gray; padding:5px;">
[[ConLib:CustomProductSwatches]]
#else
<td style="border-top:none; border-right:solid 1px gray; padding:0px;">
#end

Then, the actual code files are extremely simple...
CustomProductSwatches.asxc:

Code: Select all

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="CustomProductSwatches.ascx.cs" Inherits="ConLib_CustomProductSwatches" %>
<script type="text/javascript">
    function changeImage(urlpath)
    {
        t = urlpath.length;
        urlpath = urlpath.substr(2,t-2);
        document.getElementById("ProductImage").src = urlpath;
    }
</script>
<ajax:UpdatePanel ID="DescriptionAjax" runat="server">
    <ContentTemplate>
        <div>
            <asp:Repeater runat="server" ID="ImageList">
                <ItemTemplate>
                    <span onmouseover="changeImage('<%# Eval("ImagePath") %>');"> 
                    <asp:Image runat="server" ID="DisplayImage" ImageUrl='<%# Eval("ImagePath") %>' Width="50" Height="50" BorderWidth="0" />
                    </span>
                </ItemTemplate>
            </asp:Repeater>
        </div>
    </ContentTemplate>
</ajax:UpdatePanel>

...and the code file... CustomProductSwatches.ascx.cs

Code: Select all

using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using CommerceBuilder.Products;
using CommerceBuilder.Utility;

public partial class ConLib_CustomProductSwatches : System.Web.UI.UserControl
{
    protected void Page_Load(object sender, EventArgs e)
    {
        DataTable dt = new DataTable();
        dt.Columns.Add("ImagePath", typeof(String));
        int _ProductId = AlwaysConvert.ToInt(Request.QueryString["ProductId"]);
        Product _Product = ProductDataSource.Load(_ProductId);
        if (_Product != null)
        {
            ProductImageCollection images = _Product.Images;
            dt.Rows.Add(new Object[] { AlwaysConvert.ToString(_Product.ImageUrl) });
            foreach (ProductImage theimage in images)
            {
                dt.Rows.Add(new Object[] { AlwaysConvert.ToString(theimage.ImageUrl) });
            }
            ImageList.DataSource = dt;
            ImageList.DataBind();
        }
    }
}

In order for this to work, the ID of your main product image has to be ProductImage.
Feel free to use any of this if it is useful.

Scott

Scott,

This is QUITE useful. Actually everything I wanted.

One question though.. My additional images are huge - say 500x500 or more. My regular size are set to 300x300. Therfore you get this crazy 500x500 when you mouse over. Any thoughts?

Moved to 'Good Reference Posts'

Great !
Q : is there a way to pre-load the pictures (with the page) so cusomer does not face waiting time when moving over an image ?
thanks

Bump - One question though.. My additional images are huge - say 500x500 or more. My regular size are set to 300x300. Therfore you get this crazy 500x500 when you mouse over. Any thoughts?

I was able to fix this by changing up our CSS to convert images in that 'box' to a specific size.

Working nicely now.

Id like to have the large image 800x800 or 2000x2000.

It seems that you are using same id value "ProductImage" for a td and actual image control. Edit your Product Details template and make sure that table column td warping product image control must have some other value for its id attribute for example change its id to ProductImageContainer etc.

I know this is a very old thread, so I apologize for bumping it. I've used this mod several times, and it works great! Thanks so much for posting it.

Here's my problem. . . I'd like to be able to click the thumbnails and display an extra-large image in a Lightbox or GrayBox-type window. Right now I'm using GreyBox, but I'd be willing to switch. I tried adding an onclick behavior to the thumbnail, but while the behavior works, no image displays in the box. Being a bit of a hack at this point, I basically copied the span tag from the onmouseover behavior and modified it: Obviously, I'm missing something. Has anyone done this? Is it possible to both use this mod and enlarge the images? I searched old threads for this topic, but only found topics on using Lightbox with a single image or using GreyBox with other elements (not images).

Thanks so much in advance.

Update: I've almost gotten this to work with this code: My issue now is that the link that it generates contains an additional "/~", which is not a valid link. Perhaps I'll figure out that part today.

And, in case anyone wonders, all I had to do was add runat="server" to my <a> tag. Now it works.