Fun with multiple images and image zoom

Store UI, layout, design, look and feel; Discussion on the customer facing pages of your online store. Cascading Style Sheets, Themes, Scriptlets, NVelocity and the components in the ConLib directory.
Post Reply
User avatar
AbleMods
Master Yoda
Master Yoda
Posts: 5170
Joined: Wed Sep 26, 2007 5:47 am
Location: Fort Myers, Florida USA

Fun with multiple images and image zoom

Post by AbleMods » Wed Mar 04, 2009 8:38 pm

Thought I'd show off some progress I've made on a client project involving full replacement to the ProductImage user control.

http://www.ablemods.com/testprod.aspx?ProductId=41

Hover your mouse on the product image to see the zoom feature.

Then click any of the other images in the image selection bar below the product image. The product image will change to reflect your selection and the image zoom will still function. The image bar is dynamic and will grow-shrink based on the number of additional images assigned to the product. It disappears altogether if no additional images are specified.

Not perfect yet, but fun to play with an eccentric mix of server-side and client-code. Great learning experience as it combines VB.Net, Javascript and AJAX functionality into a single page.

I had to use some high-res images in my testing, so forgive the slow loading speed and the abundance of kitten photos :P
Joe Payne
AbleCommerce Custom Programming and Modules http://www.AbleMods.com/
AbleCommerce Hosting http://www.AbleModsHosting.com/
Precise Fishing and Hunting Time Tables http://www.Solunar.com

dappy2
Commander (CMDR)
Commander (CMDR)
Posts: 114
Joined: Wed Jan 18, 2006 5:53 pm
Contact:

Re: Fun with multiple images and image zoom

Post by dappy2 » Wed Mar 04, 2009 10:10 pm

That is really very awesome and could be really useful for alot of things.

Sorry I have to critique a little bit (and I'm sure you're still working on it):
1. The "zoom" image that pops up - maybe make it bigger than the original photo - to really give the user the idea that they are seeing a closeup. It is mostly psychological but...

2. The option to click somewhere to see the full-size image maybe in a lightbox style might be cool/good addition.

You might want to check out some stock photo sites (iStockPhoto.com) to see how they handle a very similar functionality. You don't have to buy anything or register to look.

Edit: I lied, you do have to be registered to view the zooming. I attached 2 screen grabs.

Cheers - and really really cool.

Dappy

William M
Commander (CMDR)
Commander (CMDR)
Posts: 150
Joined: Sat Feb 14, 2009 9:40 am
Contact:

Re: Fun with multiple images and image zoom

Post by William M » Thu Mar 05, 2009 7:24 am

It took about 7 seconds to load those 5 images, I've got Fios. Way too long.

I find this kind of stuff to be a distraction when I'm shopping and I'm much happier to see the merchant's choice for an alternate image over a gimmicky close-up. Unless you're selling kittens, that is.

How much is the tabby kitty? I didn't see a price.

euroluxantiques
Commander (CMDR)
Commander (CMDR)
Posts: 118
Joined: Sat Dec 20, 2008 11:27 pm

Re: Fun with multiple images and image zoom

Post by euroluxantiques » Mon Mar 09, 2009 1:14 pm

Hi, I'm trying to integrate MagicMagnify into my test site, and so far I have been able to do everything but modify ProductImage.ascx.cs properly to add the link wrapper around the dynamic image. When I do that, the page bombs.

Original code:

phProductImage.Controls.Add(new LiteralControl("<img id=\"ProductImage\" src=\"" + Page.ResolveClientUrl(productImage.ImageUrl) + "\" border=\"0\" alt=\"" + Server.HtmlEncode(productImage.ImageAltText) + "\" />"));

My images are named using the SKU + "-" + sequential number, beginning with 0. There can be as many as 60+ images for an item, depending on what it is. The large-size images are kept in another directory on the server, but I could put them in the same directory and append a .L prior to the .jpg extension, if that's any help.

I'm sure it's lack of experience with ASP, but any help would be greatly appreciated. Any help with modifying the code properly would be much appreciated.

User avatar
AbleMods
Master Yoda
Master Yoda
Posts: 5170
Joined: Wed Sep 26, 2007 5:47 am
Location: Fort Myers, Florida USA

Re: Fun with multiple images and image zoom

Post by AbleMods » Mon Mar 09, 2009 1:43 pm

You'll have to modify the ASCX file and include the following:

Code: Select all

<script src="js/magicmagnify.js" type="text/javascript"></script>
Then modify the .cs code-behind file so:

Code: Select all

phProductImage.Controls.Add(New LiteralControl("<a id='imgtag' href='" + Page.ResolveClientUrl(_LargeImage) + "' class='MagicMagnify'><img id='ProductImage' src='" + Page.ResolveClientUrl(_ImageUrl) + "' border='0' alt='" + Server.HtmlEncode(_ImageAltText) + "' /></a>"))
The variable _LargeImage is assigned earlier in the code to represent the full-size image file name.
Joe Payne
AbleCommerce Custom Programming and Modules http://www.AbleMods.com/
AbleCommerce Hosting http://www.AbleModsHosting.com/
Precise Fishing and Hunting Time Tables http://www.Solunar.com

euroluxantiques
Commander (CMDR)
Commander (CMDR)
Posts: 118
Joined: Sat Dec 20, 2008 11:27 pm

Re: Fun with multiple images and image zoom

Post by euroluxantiques » Mon Mar 09, 2009 3:16 pm

Hi Master Yoda,

Thanks for the reply. I suppose I am too old to begin the training. ;)

I am actually using a modified ProductImageEx.ascx.cs file that I found here on this board at:

viewtopic.php?f=47&t=9071

I've got it working well on my development site:

http://dev.euroluxantiques.com/Vintage- ... -P662.aspx

I've added the script tags to the ProductImageEx.ascx file on the first line.

I pasted in your changes for the other line, but it is still blowing up on me.

I thought maybe the difference was that your change is for the original ProductImage.ascx, so I tested there and was still having basically the same problem. It looks like a syntax error. Unfortunately, I'm not real good with ASP/Javascript, yet. I'm more used to VB.NET and am trying to learn on the fly, so troubleshooting these things is hard for me still.

This is the ProductImageEx.ascx.cs code file I'm using.

Code: Select all

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



public partial class ConLib_MoreImagesEx : System.Web.UI.UserControl
{
    //can be icon, thumbnail, or image
    private string _ShowImage = "Thumbnail";
    private bool _IncludeAdditionalImages = true;


   
    private Product _Product;
    private int _ProductId;

    [Personalizable(), WebBrowsable()]


    public string _largeImage
    {
        get { return _largeImage; }
        set { _largeImage = Regex.Replace(_Product.ImageUrl,"00000001","FullSize"); }

    }
   

    
    public string ShowImage
    {
        get { return _ShowImage; }
        set { _ShowImage = value; }
    }

    [Personalizable(), WebBrowsable()]
    public bool IncludeAdditionalImages
    {
        get { return _IncludeAdditionalImages; }
        set { _IncludeAdditionalImages = value; }
    }

    protected void Page_Load(object sender, EventArgs e)
    {
        _ProductId = AlwaysConvert.ToInt(Request.QueryString["ProductId"]);
        _Product = ProductDataSource.Load(_ProductId);

        ButtonPanel.Visible = (_IncludeAdditionalImages && _Product.Images.Count > 0);

        if (!Page.IsPostBack)
        {
            if (_Product != null)
            {
                LiteralControl productImage = GetProductImage();
                if(productImage!=null)
                phProductImage.Controls.Add(productImage);
            }
            CurrentImageIndex.Value = "-1";
        }
    }

    protected void NextImageButton_Click(object sender, EventArgs e)
    {
        int imageIndex = AlwaysConvert.ToInt(CurrentImageIndex.Value);
        if (imageIndex < (_Product.Images.Count - 1))
            imageIndex++;
        ProductImage productImage = _Product.Images[imageIndex];
        phProductImage.Controls.Clear();
      phProductImage.Controls.Add(new LiteralControl("<a id=\"imgtag\" href=\"" + Page.ResolveClientUrl(_largeImage) + "' class=\"MagicMagnify\"><img id=\"ProductImage\" src=\"" + Page.ResolveClientUrl(productImage.ImageUrl) + "\" border=\"0\" alt=\"" + Server.HtmlEncode(productImage.ImageAltText) + "\" /></a>"));
        
        
        CurrentImageIndex.Value = imageIndex.ToString();
    }

    protected void PreviousImageButton_Click(object sender, EventArgs e)
    {
        int imageIndex = AlwaysConvert.ToInt(CurrentImageIndex.Value);
        if (imageIndex > -1)
            imageIndex--;
        if (imageIndex > -1)
        {
            ProductImage productImage = _Product.Images[imageIndex];
            phProductImage.Controls.Clear();
            phProductImage.Controls.Add(new LiteralControl("<a id=\"imgtag\" href=\"" + Page.ResolveClientUrl(_largeImage) + "' class=\"MagicMagnify\"><img id=\"ProductImage\" src=\"" + Page.ResolveClientUrl(productImage.ImageUrl) + "\" border=\"0\" alt=\"" + Server.HtmlEncode(productImage.ImageAltText) + "\" /></a>"));
        }
        else
        {
            LiteralControl productImage = GetProductImage();
            if (productImage != null)
                phProductImage.Controls.Add(productImage);        
        }
        CurrentImageIndex.Value = imageIndex.ToString();
    }

    protected LiteralControl GetProductImage()
    {
        string checkImage = this.ShowImage.ToLowerInvariant();
        string imageUrl;
        string imageAltText;
        if (checkImage == "icon")
        {
            
            imageUrl = _Product.IconUrl;
            imageAltText = _Product.IconAltText;
        }
        else if (checkImage == "thumbnail")
        {
            
            imageUrl = _Product.ThumbnailUrl;
            imageAltText = _Product.ThumbnailAltText;
        }
        else
        {
               
            imageUrl = _Product.ImageUrl;
            imageAltText = _Product.ImageAltText;
        }

        if (!string.IsNullOrEmpty(imageUrl))
        {
            return new LiteralControl("<a id=\"imgtag\" href=\"" + Page.ResolveClientUrl(_largeImage) + "' class=\"MagicMagnify\"><img id=\"ProductImage\" src=\"" + Page.ResolveClientUrl(productImage.ImageUrl) + "\" border=\"0\" alt=\"" + Server.HtmlEncode(productImage.ImageAltText) + "\" /></a>");
        }
        return null;
    }
}


It seems to me that they're declaring the variables near the bottom of the page. If that's correct, I'm thinking I would add the following lines:

string _LargeUrl --added after the other 2 variables already declared

_LargeUrl = 'http://www.euroluxantiques.com/Merchant2/graphics/Large' --added to the if, else if, and else statements

My question is, what appends the actual image file name to this URL variable, i.e., 10-102-01.jpg

Sorry if this is too basic, but I'm trying to figure out the whole AbleCommerce format and how it all works under the hood.

Thanks much!!!
Last edited by euroluxantiques on Thu Mar 12, 2009 8:58 pm, edited 2 times in total.

User avatar
AbleMods
Master Yoda
Master Yoda
Posts: 5170
Joined: Wed Sep 26, 2007 5:47 am
Location: Fort Myers, Florida USA

Re: Fun with multiple images and image zoom

Post by AbleMods » Tue Mar 10, 2009 8:21 pm

Unfortunately I'm not in a position to offer any assistance right now - too many projects and too few hours in the day :(

However I did overhaul my image-zoom project - the final result is almost as I need it to be.

MagicMagnify works on the primary product image as before. However now the images displayed are standard size and not the behemoth sizes before. The system properly loads up the matching large-size image in the background too.

Any alternate image selection from the additional-images choice below the primary product image properly re-enable MagicMagnify. AJAX is disabling MagicMagnify after each partial postback. The AJAX postbacks were needed to keep the page looking clean whenever a new image is chosen. It was tricky getting a client-side script to fire whenever an AJAX postback was called.

The demo link in the OP is still valid and now has more project-specific photos (no more kittens). Feel free to check it out again...

Now all I have to figure out is why the entire primary product image disappears when the add-to-cart button is clicked :roll:
Joe Payne
AbleCommerce Custom Programming and Modules http://www.AbleMods.com/
AbleCommerce Hosting http://www.AbleModsHosting.com/
Precise Fishing and Hunting Time Tables http://www.Solunar.com

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

Re: Fun with multiple images and image zoom

Post by mazhar » Fri Mar 13, 2009 7:41 am

euroluxantiques wrote:Hi, I'm trying to integrate MagicMagnify into my test site, and so far I have been able to do everything but modify ProductImage.ascx.cs properly to add the link wrapper around the dynamic image. When I do that, the page bombs.

Original code:

phProductImage.Controls.Add(new LiteralControl("<img id=\"ProductImage\" src=\"" + Page.ResolveClientUrl(productImage.ImageUrl) + "\" border=\"0\" alt=\"" + Server.HtmlEncode(productImage.ImageAltText) + "\" />"));

My images are named using the SKU + "-" + sequential number, beginning with 0. There can be as many as 60+ images for an item, depending on what it is. The large-size images are kept in another directory on the server, but I could put them in the same directory and append a .L prior to the .jpg extension, if that's any help.

I'm sure it's lack of experience with ASP, but any help would be greatly appreciated. Any help with modifying the code properly would be much appreciated.
Check the following thread
viewtopic.php?f=47&t=9071

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

Re: Fun with multiple images and image zoom

Post by Robbie@FireFold » Tue Mar 17, 2009 7:41 am

I like this. The main image never displays until I click an image. Bug?

My thoughts - mouse over the small images automatically changes the above image. When clicking it pops open a new window with the zoom feature.

Kinda like FireFold's now - http://www.firefold.com/LG-HD-47-LCD-TV ... C1060.aspx
Robbie Hodge
General Manager
Robbie@FireFold.com
http://www.FireFold.com

Post Reply