Hi,
I have implemented cloud zoom in the skin I am selling. For more information on skin please see this thread
https://www.nopcommerce.com/boards/t/9887/premium-fashion-theme-with-additional-features-released.aspxMikeMCSD asked me to share this cloudzoom with you guys as you are struggling so here is what you need to do;
Obvoiusly I don't need to mention that you need cloudzoom js and jquery on your page.
This is the code in onevariant.ascx for the image area part;
<div class="thump_listing">
<asp:Literal ID="lImages" EnableViewState="false" runat="server"></asp:Literal>
</div>
<div id="sliderContent">
<asp:Literal ID="ltDefaultImage" EnableViewState="false" runat="server"></asp:Literal>
</div>
the code file should have this code;
var pictures = this.PictureService.GetPicturesByProductId(product.ProductId);
if (pictures.Count > 0)
{
Size size;
string defaultImageUrl = this.PictureService.GetPictureUrl(pictures[0], this.SettingManager.GetSettingValueInteger("Media.Product.DetailImageSizeWidth", 376), this.SettingManager.GetSettingValueInteger("Media.Product.DetailImageSizeHeight", 434), true, out size);
string defaultImageAlternateText = String.Format(GetLocaleResourceString("Media.Product.ImageAlternateTextFormat"), product.LocalizedName);
jqueryScript.AppendLine("<script type=\"text/JavaScript\" src=\"" + CommonHelper.GetStoreLocation() + "js/cloud-zoom.1.0.2.min.js\"></script>");
jqueryScript.AppendLine("<style type=\"text/css\">");
jqueryScript.AppendLine(".jcarousel-skin-tango .jcarousel-container {");
jqueryScript.AppendLine("height: " + (size.Height - 30) + "px;");
jqueryScript.AppendLine("}");
jqueryScript.AppendLine("</style>");
string ZoomWidth = SettingManager.GetSettingValue("ProductDetails.ZoomWidth", "250");
string ZoomHeight = SettingManager.GetSettingValue("ProductDetails.ZoomHeight", "200");
string ZoomPosition = SettingManager.GetSettingValue("ProductDetails.ZoomPosition", "right");
string ZoomX = SettingManager.GetSettingValue("ProductDetails.ZoomX", "10");
string ZoomY = SettingManager.GetSettingValue("ProductDetails.ZoomY", "-4");
string ZoomTint = SettingManager.GetSettingValue("ProductDetails.ZoomTint", "false");
string ZoomTintOpacity = SettingManager.GetSettingValue("ProductDetails.ZoomTintOpacity", "0.5");
string ZoomLensOpacity = SettingManager.GetSettingValue("ProductDetails.ZoomLensOpacity", "0.5");
string ZoomSoftFocus = SettingManager.GetSettingValue("ProductDetails.ZoomSoftFocus", "false");
string ZoomSmoothMove = SettingManager.GetSettingValue("ProductDetails.ZoomSmoothMove", "3");
string ZoomShowTitle = SettingManager.GetSettingValue("ProductDetails.ZoomShowTitle", "true");
string ZoomTitleOpacity = SettingManager.GetSettingValue("ProductDetails.ZoomTitleOpacity", "0.5");
ltDefaultImage.Text = "<a href='" + this.PictureService.GetPictureUrl(pictures[0]) + "' class='cloud-zoom' id='zoom1' rel=\"zoomWidth: " + ZoomWidth + ", zoomHeight: " + ZoomHeight + ", position: '" + ZoomPosition + "', tint: " + ZoomTint + ", tintOpacity: " + ZoomTitleOpacity + ", lensOpacity: " + ZoomLensOpacity + ", softFocus: " + ZoomSoftFocus + ", smoothMove: " + ZoomSmoothMove + ", showTitle: " + ZoomShowTitle + ", titleOpacity: " + ZoomTitleOpacity + ", adjustX: " + ZoomX + ", adjustY:" + ZoomY + "\">";
ltDefaultImage.Text += Environment.NewLine;
ltDefaultImage.Text += "<img src=\"" + defaultImageUrl+ "\" alt='' title=\"" + defaultImageAlternateText + "\" />";
ltDefaultImage.Text += "</a><table width=\"100%\"><tr><td align=\"left\"><b>" + GetLocaleResourceString("ProductDetails.RolloverImageText") + "</b></td><td align=\"right\"><a id=\"largehreflink\" target=\"_blank\" href=\"" + this.PictureService.GetPictureUrl(pictures[0]) + "\"><b>" + GetLocaleResourceString("ProductDetails.ViewLargeImage") + "</b></a></td></tr></table>";
StringBuilder imgString = new StringBuilder();
imgString.AppendLine("<ul id=\"mycarousel\" class=\"jcarousel jcarousel-skin-tango\">");
int count = 0;
foreach (Picture picture in pictures)
{
count += 1;
imgString.AppendLine("<li style=\"margin-bottom:5px;\">");
string thumbPictureUrl = this.PictureService.GetPictureUrl(picture, this.SettingManager.GetSettingValueInteger("Media.Product.DetailImageThumbSizeWidth", 103), this.SettingManager.GetSettingValueInteger("Media.Product.DetailImageThumbSizeHeight", 90), true, out size);
string hiddenImageUrl = this.PictureService.GetPictureUrl(picture, this.SettingManager.GetSettingValueInteger("Media.Product.DetailImageSizeWidth", 376), this.SettingManager.GetSettingValueInteger("Media.Product.DetailImageSizeHeight", 434), true, out size);
string ImageAlternateText = String.Format(GetLocaleResourceString("Media.Product.ImageAlternateTextFormat"), product.LocalizedName);
imgString.AppendLine("<a href='" + this.PictureService.GetPictureUrl(picture) + "' class='cloud-zoom-gallery' title='" + ImageAlternateText+ "' rel=\"useZoom: 'zoom1', smallImage: '" + hiddenImageUrl + "' \">");
imgString.AppendLine("<img src=\"" + thumbPictureUrl + "\" alt=\"Thumbnail " + count + "\"/></a>");
imgString.AppendLine("</li>");
}
imgString.AppendLine("</ul>");
lImages.Text = imgString.ToString();
}
else
{
Size size;
string defaultImageUrl = this.PictureService.GetDefaultPictureUrl(PictureTypeEnum.Entity, this.SettingManager.GetSettingValueInteger("Media.Product.DetailImageSizeWidth", 0), this.SettingManager.GetSettingValueInteger("Media.Product.DetailImageSizeHeight", 434), out size);
string defaultImageToolTip = String.Format(GetLocaleResourceString("Media.Product.ImageAlternateTextFormat"), product.LocalizedName);
string defaultImageAlternateText = String.Format(GetLocaleResourceString("Media.Product.ImageAlternateTextFormat"), product.LocalizedName);
ltDefaultImage.Text = "<img src=\"" + defaultImageUrl + "\" alt=\"" + defaultImageAlternateText + "\" />";
lImages.Visible = false;
}
The part in the code for .jcarousel-skin-tango .jcarousel-container is basically the slider on left side so you don't really need this for the zoom, you can change this according to your own slider.
I have stored all settings in settings for the zoom so it's easy to change.
Another javascript required on the page is this;
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery('#mycarousel').jcarousel({
vertical: true,
scroll: 1
});
});
jQuery(function () {
jQuery('.thump_listing ul li a').click(function () {
var thisAttr = this;
$("#largehreflink").attr("href", thisAttr);
});
});
</script>
This is basically when you click any thumbnail, it gives the right href link to the main image.
Hopefully this would help some people.
If you are unable to put this in your project, please let me know, I would make this on default nop 1.9 installation so it's easy to understand for you guys.
Regards,
Atiq
