Image Zooming Integration

Hi there,

I am implementing Cloud-Zoom (http://www.professorcloud.com) and have it integrated fine for the defaultImage. However, for the other smaller images I want to load them into the defaultImage slot on click but dont seem to be able to do this. (it keeps opening them as larger images in the same window).

I am thinking I could just make the small images as image buttons, rather than as links. But how would i handle the click event to put them into the defaultImage space?

Kind Regards

SiK wrote:

Hey, so are you refering to a product template page?

I'm guessing you have a product with multiple images?

They have a javascriptfunction
            function UpdateMainImage(url) {
                var imgMain = document.getElementById('<%=defaultImage.ClientID%>');
                imgMain.src = url;
            }
in the code that looks like what they use to change the default image when the page is loaded.

If that didn't help then please provide some code as to what you changed and where- in order to integrate the 3rd party zoom feature- sometimes changing elements can just mess up how the code works, and it helps to have other people just give it a look over.

Hi Df,

Thank you for the response.

The script/ function call to the clientid has been left in place. The only they that have changed are the class has been dropped from the thumbnails as this makes them open in LightBox. Wrapped the main image with some divs and also created a new image on the page.

All i need it to do is click a thumb nail, load it to the default image and then the rollover zoom should start working. :o)

Front end code.

  <script language="javascript" type="text/javascript">
        function UpdateMainImage(url) {
            var imgMain = document.getElementById('<%=defaultImage.ClientID%>');
            imgMain.src = url;
        }
    </script>
    <asp:HyperLink ID='zoom1' CssClass='cloud-zoom' runat="server" rel="">
        <asp:Image ID="defaultImage" runat="server" /></asp:HyperLink>
    <div class="picture">
        <asp:ListView ID="lvProductPictures" runat="server" GroupItemCount="3">
            <LayoutTemplate>
                <table style="margin-top: 10px;">
                    <asp:PlaceHolder runat="server" ID="groupPlaceHolder"></asp:PlaceHolder>
                </table>
            </LayoutTemplate>
            <GroupTemplate>
                <tr>
                    <asp:PlaceHolder runat="server" ID="itemPlaceHolder"></asp:PlaceHolder>
                </tr>
            </GroupTemplate>
            <ItemTemplate>
                <td align="left">
                    <a href="<%#this.PictureService.GetPictureUrl((Picture)Container.DataItem)%>" title="<%= lProductName.Text%>">
                        <img src="<%#this.PictureService.GetPictureUrl((Picture)Container.DataItem, 70)%>"
                            alt="Product image" /></a>
                </td>
            </ItemTemplate>
        </asp:ListView>
    </div>

Back end code.... only given a snippet as only added an additional 3 line.... they say zoom1

 //pictures
            var pictures = this.PictureService.GetPicturesByProductId(product.ProductId);
            if (pictures.Count > 1)
            {
                defaultImage.ImageUrl = this.PictureService.GetPictureUrl(pictures[0], this.SettingManager.GetSettingValueInteger("Media.Product.DetailImageSize", 300));
                zoom1.NavigateUrl = this.PictureService.GetPictureUrl(pictures[0], this.SettingManager.GetSettingValueInteger("Media.Product.MaximumImageSize", 800));
                defaultImage.ToolTip = String.Format(GetLocaleResourceString("Media.Product.ImageAlternateTextFormat"), product.LocalizedName);
                defaultImage.AlternateText = String.Format(GetLocaleResourceString("Media.Product.ImageAlternateTextFormat"), product.LocalizedName);
                lvProductPictures.DataSource = pictures;
                lvProductPictures.DataBind();
            }
            else if (pictures.Count == 1)
            {
                defaultImage.ImageUrl = this.PictureService.GetPictureUrl(pictures[0], this.SettingManager.GetSettingValueInteger("Media.Product.DetailImageSize", 300));
                zoom1.NavigateUrl = this.PictureService.GetPictureUrl(pictures[0], this.SettingManager.GetSettingValueInteger("Media.Product.MaximumImageSize", 800));
                defaultImage.ToolTip = String.Format(GetLocaleResourceString("Media.Product.ImageAlternateTextFormat"), product.LocalizedName);
                defaultImage.AlternateText = String.Format(GetLocaleResourceString("Media.Product.ImageAlternateTextFormat"), product.LocalizedName);
                lvProductPictures.Visible = false;
            }
            else
            {
                defaultImage.ImageUrl = this.PictureService.GetDefaultPictureUrl(this.SettingManager.GetSettingValueInteger("Media.Product.DetailImageSize", 300));
                zoom1.NavigateUrl = this.PictureService.GetPictureUrl(pictures[0], this.SettingManager.GetSettingValueInteger("Media.Product.MaximumImageSize", 800));
                defaultImage.ToolTip = String.Format(GetLocaleResourceString("Media.Product.ImageAlternateTextFormat"), product.LocalizedName);
                defaultImage.AlternateText = String.Format(GetLocaleResourceString("Media.Product.ImageAlternateTextFormat"), product.LocalizedName);
                lvProductPictures.Visible = false;
            }    

SiK wrote:


See if you can add an 'onClick' event to the hyperlink used for the images to invoke the change event. (see above in bold)