AbleCommerce Shopping Cart Software

Posted: **Wed Nov 26, 2008 9:45 am**

Currently our product image control lists only the product image. I thought that it might be helpful to provide some way to view the additional images in place instead of opening them in an another page. You can use this control in ShowProduct1 scriptlet in place of the ProductImage control. The control will provide you the next and previous buttons for additional images. The control inherits the ShowImage property from the ProductImage control which has the same meanings and contains an extra property IncludeAdditionalImages of type bool. If IncludeAdditionalImages is set to false then the control behaves exactly like the ProductImage control even if the product contains the additional images.

The installation is very same like other ConLib controls. Just extract and place the control files in ConLib. The next step is to update the ShowProduct1 scriptlet and change the

Code: Select all

[[ConLib:ProductImage ShowImage="Image"]]

to

Code: Select all

[[ConLib:ProductImageEx ShowImage="Image"]]

Posted: **Mon Mar 09, 2009 9:42 am**

Hi Mazhar, thanks for this module. It's exactly what I wanted for my layout.

Could you please tell me how to modify the code so that when it gets to the last image, the NextImage function takes you to the first image? Could you also add a function to go to first and last image, like what you would see navigating database records?

Thanks!

Posted: **Fri Mar 13, 2009 7:39 am**

The modifications you are looking for are very easy. You just need to put two buttons and write some code against their clicks to adjust the first and last images. Here is the updated control, I also made the modification to wrap image with URL of large image in order to make it work with MagicMagnify. All you need to have large image name prefixed with "L-". The directory path for these large images folder should be Webstie/Assets/ProductImages/LargeImages

Posted: **Fri Mar 13, 2009 2:54 pm**

Thanks, Mazhar!

I have it working with the exception of trying to get the javascript to fire when the user clicks one of the image buttons. Right now, I have the javascript loading in the <HEAD> and the image buttons don't reload the entire page, so the javascript isn't firing again for the next image. I know that the javascript is client-side and ASP is server-side, but short of re-writing the entire MagicMagnify function to server-side, I don't know any other way to get it to work when moving from one image to another. I'm researching how best to connect the javascript to the ASP buttons.

The only other issue I have is formatting, but I think the folks at MagicTools will have to help me. They've hard-coded most of their styles, and it's blowing up my CSS for my site and making the images not size correctly. Since they're using inline styles, they trump anything I have in my style sheets.

Thanks for your help!

Posted: **Wed Mar 25, 2009 2:29 pm**

Hi Mazhar,

This works great for me! Thanks for sharing.

I do have one questions. I use Option images and when not using this enhancment, the variant images are updated when the user clicks on a different color to match the selection. I would like if this would also update the link to the large image so that they could zoom on the new color image. I'm not sure where to add in the extra link material - I'm not quite sure where the option image change is made.

Any help would be great

Thanks!
Mike

Posted: **Wed May 06, 2009 12:02 pm**

A small update on the option swatches to change the color images. I was able to get this to work for me but only after purchasing the source code and modifying the behavior of the click event when an option choice is selected. I also was not able to use the MagicMagnify like I had originally attempted to, but switched to Lightbox v1 (for some reason, v2 wouldn't work) and that seems to have accomplished what I'm looking for.

So, for now I've got it working well and though I don't have multiple images for each color right now, that won't be too tough to work out when I do add that in.

Mike

Posted: **Wed May 06, 2009 2:12 pm**

Mike, could you post your link again so I can see what you worked out?

I had all kinds of problems with Magic Magnify because I wasn't able to get it to re-initialize when switching from one image to another. Plus, their inline CSS was trumping my linked CSS and screwing up my image display. They are just barely helpful when it comes to resolving the issue with ASP and after about 20 hours messing around with it, I may just give up on it. It is nice that at least using Magic Magnifies linking idea, I can have the customer click on the image and pop up another browser window (assuming they allow pop-ups) to see the large image.

Thanks!
Greg

Posted: **Wed May 06, 2009 2:33 pm**

Greg,

Check the link below out for what I've got going on right now. It'll work good for our purposes and the only thing to finish with will be multiple views - which we don't even have photography for at this point, so I'll spend time on that when we actually need it.

http://www.schulershoes.com/Womens-Munr ... C1514.aspx

Mike

Posted: **Mon Jun 20, 2011 12:01 pm**

Hi, how do i apply the CustomProductSwatches control under Show Product 1, do i need to remove something in this control or do I just have to add the control?

___________________________________________________________________________________________________

[[ConLib:CategoryBreadCrumbs HideLastNode="False"]]
<div class="pageHeader"><h1>$Product.Name</h1></div>
<table style="margin-bottom:8px">
<tr>
<td class="productimg">
[[ConLib:ProductImage ShowImage="Image"]]<br />
#if($Product.Images.Count > 0)
<a href="#" onclick="window.open('ProductImages.aspx?ProductId=$Product.ProductId', 'productImages', 'status=0,toolbar=0,location=0,menubar=0,directories=0,resizable=yes,scrollbars=1,height=650,width=850')">
More Images
</a>
#end

</td>
<td valign="top" style="padding-left:20px">
#if ($Product.ManufacturerId != 0)
Other products by <a href="Search.aspx?m=$Product.ManufacturerId">$Product.Manufacturer.Name</a><br />
#end
#if($store.Settings.ProductReviewEnabled != "None")
#if($store.Settings.ProductReviewEnabled == "Registered")
#if($customer.IsAnonymous == false)
[[ConLib:ProductRatingImage]] <a href="#reviews">reviews</a>
#end
#end
#if($store.Settings.ProductReviewEnabled == "Anonymous")
#if($customer.IsAnonymous == true)
[[ConLib:ProductRatingImage]] <a href="#reviews">reviews</a>
#end
#end
#if($store.Settings.ProductReviewEnabled == "All")
[[ConLib:ProductRatingImage]] <a href="#reviews">reviews</a>
#end
#end
<hr />
[[ConLib:ProductDiscountsDialog]]
[[ConLib:BuyProductDialog]]
</td>
</tr>
</table>
<a name="desc"></a>
[[ConLib:ProductDescription ShowCustomFields="true"]]
#if($store.Settings.ProductReviewEnabled != "None")
<a name="reviews"></a>
<div class="section">
<div class="header"><h2>Reviews</h2></div>
<div class="content">[[ConLib:ProductReviewsPanel]]</div>
</div>
#end
[[ConLib:MoreCategoryItems Caption="More Items in $Category.Name" Orientation="Horizontal" MaxItems="4" DisplayMode="Sequential"]]

AbleCommerce Shopping Cart Software

Enhanced Product Image Control

Enhanced Product Image Control

Re: Enhanced Product Image Control

Re: Enhanced Product Image Control

Re: Enhanced Product Image Control

Re: Enhanced Product Image Control

Re: Enhanced Product Image Control

Re: Enhanced Product Image Control

Re: Enhanced Product Image Control

Re: Enhanced Product Image Control