Addtional Pictures Question

This forum is where we'll mirror posts that are of value to the community so they may be more easily found.
Post Reply
Robbie@FireFold
Commodore (COMO)
Commodore (COMO)
Posts: 433
Joined: Wed May 28, 2008 9:42 am
Location: Concord, NC
Contact:

Addtional Pictures Question

Post by Robbie@FireFold » Wed Jul 23, 2008 7:29 am

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?
Robbie Hodge
General Manager
Robbie@FireFold.com
http://www.FireFold.com

User avatar
heinscott
Captain (CAPT)
Captain (CAPT)
Posts: 375
Joined: Thu May 01, 2008 12:37 pm

Re: Addtional Pictures Question

Post by heinscott » Wed Jul 23, 2008 8:04 am

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

User avatar
jmestep
AbleCommerce Angel
Posts: 8164
Joined: Sun Feb 29, 2004 8:04 pm
Location: Dayton, OH
Contact:

Re: Addtional Pictures Question

Post by jmestep » Wed Jul 23, 2008 3:15 pm

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.
Judy Estep
Web Developer
jestep@web2market.com
http://www.web2market.com
708-653-3100 x209
New search report plugin for business intelligence:
http://www.web2market.com/Search-Report ... -P154.aspx

User avatar
jmestep
AbleCommerce Angel
Posts: 8164
Joined: Sun Feb 29, 2004 8:04 pm
Location: Dayton, OH
Contact:

Re: Addtional Pictures Question

Post by jmestep » Fri Jul 25, 2008 8:11 am

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
Judy Estep
Web Developer
jestep@web2market.com
http://www.web2market.com
708-653-3100 x209
New search report plugin for business intelligence:
http://www.web2market.com/Search-Report ... -P154.aspx

User avatar
heinscott
Captain (CAPT)
Captain (CAPT)
Posts: 375
Joined: Thu May 01, 2008 12:37 pm

Re: Addtional Pictures Question

Post by heinscott » Fri Jul 25, 2008 9:07 am

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

Robbie@FireFold
Commodore (COMO)
Commodore (COMO)
Posts: 433
Joined: Wed May 28, 2008 9:42 am
Location: Concord, NC
Contact:

Re: Addtional Pictures Question

Post by Robbie@FireFold » Mon Jul 28, 2008 10:09 am

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?
Robbie Hodge
General Manager
Robbie@FireFold.com
http://www.FireFold.com

User avatar
sohaib
Developer
Developer
Posts: 1079
Joined: Fri Jan 23, 2004 1:38 am

Re: Addtional Pictures Question

Post by sohaib » Mon Jul 28, 2008 1:58 pm

Moved to 'Good Reference Posts'

sacards.com
Lieutenant, Jr. Grade (LT JG)
Lieutenant, Jr. Grade (LT JG)
Posts: 28
Joined: Wed Jun 04, 2008 1:45 am

Re: Addtional Pictures Question

Post by sacards.com » Tue Jul 29, 2008 12:29 am

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

Robbie@FireFold
Commodore (COMO)
Commodore (COMO)
Posts: 433
Joined: Wed May 28, 2008 9:42 am
Location: Concord, NC
Contact:

Re: Addtional Pictures Question

Post by Robbie@FireFold » Tue Jul 29, 2008 3:01 pm

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?
Robbie Hodge
General Manager
Robbie@FireFold.com
http://www.FireFold.com

Robbie@FireFold
Commodore (COMO)
Commodore (COMO)
Posts: 433
Joined: Wed May 28, 2008 9:42 am
Location: Concord, NC
Contact:

Re: Addtional Pictures Question

Post by Robbie@FireFold » Wed Jul 30, 2008 9:34 am

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

Working nicely now.
Robbie Hodge
General Manager
Robbie@FireFold.com
http://www.FireFold.com

kastnerd
Commodore (COMO)
Commodore (COMO)
Posts: 474
Joined: Wed Oct 22, 2008 9:17 am

Re: Addtional Pictures Question

Post by kastnerd » Mon Jan 12, 2009 12:51 pm

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

User avatar
mazhar
Master Yoda
Master Yoda
Posts: 5084
Joined: Wed Jul 09, 2008 8:21 am
Contact:

Re: Addtional Pictures Question

Post by mazhar » Thu Apr 23, 2009 5:40 am

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.

illyrianmoon
Ensign (ENS)
Ensign (ENS)
Posts: 17
Joined: Thu Apr 07, 2011 4:31 pm

Re: Addtional Pictures Question

Post by illyrianmoon » Fri Jun 10, 2011 8:36 am

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:

Code: Select all

<span onclick="return GB_showImage('<%# Eval("ImagePath") %>');">
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.

illyrianmoon
Ensign (ENS)
Ensign (ENS)
Posts: 17
Joined: Thu Apr 07, 2011 4:31 pm

Re: Addtional Pictures Question

Post by illyrianmoon » Mon Jun 13, 2011 8:08 am

Update: I've almost gotten this to work with this code:

Code: Select all

 <a href='<%# Eval("ImagePath") %>' onclick="return GB_showImage('View Product', this.href)">

                        <asp:Image runat="server" ID="DisplayImage" ImageUrl='<%# Eval("ImagePath") %>' Width="70" Height="50" BorderWidth="0" />
                        
                        </a>
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. :)

illyrianmoon
Ensign (ENS)
Ensign (ENS)
Posts: 17
Joined: Thu Apr 07, 2011 4:31 pm

Re: Addtional Pictures Question

Post by illyrianmoon » Mon Jun 13, 2011 8:50 am

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

Post Reply