Addtional Pictures Question
-
- Commodore (COMO)
- Posts: 433
- Joined: Wed May 28, 2008 9:42 am
- Location: Concord, NC
- Contact:
Addtional Pictures Question
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?
Is that an Able 7 or Able 5.5 website?
Re: Addtional Pictures Question
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
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
- jmestep
- AbleCommerce Angel
- Posts: 8164
- Joined: Sun Feb 29, 2004 8:04 pm
- Location: Dayton, OH
- Contact:
Re: Addtional Pictures Question
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
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
- jmestep
- AbleCommerce Angel
- Posts: 8164
- Joined: Sun Feb 29, 2004 8:04 pm
- Location: Dayton, OH
- Contact:
Re: Addtional Pictures Question
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
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
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
Re: Addtional Pictures Question
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
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
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>
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();
}
}
}
Feel free to use any of this if it is useful.
Scott
-
- Commodore (COMO)
- Posts: 433
- Joined: Wed May 28, 2008 9:42 am
- Location: Concord, NC
- Contact:
Re: Addtional Pictures Question
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...Then, the actual code files are extremely simple...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
CustomProductSwatches.asxc:...and the code file... CustomProductSwatches.ascx.csCode: 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>
In order for this to work, the ID of your main product image has to be ProductImage.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(); } } }
Feel free to use any of this if it is useful.
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?
Re: Addtional Pictures Question
Moved to 'Good Reference Posts'
-
- Lieutenant, Jr. Grade (LT JG)
- Posts: 28
- Joined: Wed Jun 04, 2008 1:45 am
Re: Addtional Pictures Question
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
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
-
- Commodore (COMO)
- Posts: 433
- Joined: Wed May 28, 2008 9:42 am
- Location: Concord, NC
- Contact:
Re: Addtional Pictures Question
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?
-
- Commodore (COMO)
- Posts: 433
- Joined: Wed May 28, 2008 9:42 am
- Location: Concord, NC
- Contact:
Re: Addtional Pictures Question
I was able to fix this by changing up our CSS to convert images in that 'box' to a specific size.
Working nicely now.
Working nicely now.
Re: Addtional Pictures Question
Id like to have the large image 800x800 or 2000x2000.
Re: Addtional Pictures Question
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.
-
- Ensign (ENS)
- Posts: 17
- Joined: Thu Apr 07, 2011 4:31 pm
Re: Addtional Pictures Question
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.
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") %>');">
Thanks so much in advance.
-
- Ensign (ENS)
- Posts: 17
- Joined: Thu Apr 07, 2011 4:31 pm
Re: Addtional Pictures Question
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.
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>
-
- Ensign (ENS)
- Posts: 17
- Joined: Thu Apr 07, 2011 4:31 pm
Re: Addtional Pictures Question
And, in case anyone wonders, all I had to do was add runat="server" to my <a> tag. Now it works.