Changing additional pictures display on mouse over

From AbleCommerce Wiki
Revision as of 11:07, 15 August 2013 by Sohaib (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to: navigation, search

First of all add a new ConLib control, for example i say it CustomProductSwatches. Then add it to my Product Page scriptlet ShowProduct1 in the following way

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

The control's files will be as bellow

<%@ 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;
<ajax:UpdatePanel ID="DescriptionAjax" runat="server">
            <asp:Repeater runat="server" ID="ImageList">
                    <span onmouseover="changeImage('<%# Eval("ImagePath") %>');"> 
                    <asp:Image runat="server" ID="DisplayImage" ImageUrl='<%# Eval("ImagePath") %>' Width="50" Height="50" BorderWidth="0" />

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;

and you are done with your new conlib control which will change and display the product images on mouse over.