Zoom - Professor Cloud Integration working fine

Here is my integration with Professor Cloud Zoom and works fine.

This version only works with more than one image per product.

In Modules/ProductInfo.ascx

 <script language="javascript" type="text/javascript">
            function UpdateMainImage(url, bigurl) {
                var imgMain = document.getElementById('zoom1');
                imgMain.href = url;
            }     
</script>

<div class="product-details-info">
    <div class="picture">
<script type="text/JavaScript" src="/Scripts/cloud-zoom.1.0.2.min.js"></script>
      <a href="" class='cloud-zoom' id="zoom1" rel="position: 'inside' , showTitle: false, adjustX:0, adjustY:0">
      <asp:Image ID="defaultImage" runat="server" />
      </a>
      <div class="clear"></div>
        <asp:ListView ID="lvProductPictures" runat="server" GroupItemCount="3">
            <LayoutTemplate>
                <div class="thumbnails">
                    <asp:PlaceHolder runat="server" ID="groupPlaceHolder"></asp:PlaceHolder>
                </div>
            </LayoutTemplate>
            <GroupTemplate>
                    <asp:PlaceHolder runat="server" ID="itemPlaceHolder"></asp:PlaceHolder>
            </GroupTemplate>
            <ItemTemplate>
                <a id="" href="<%#this.PictureService.GetPictureUrl((Picture)Container.DataItem)%>" class="cloud-zoom-gallery" title='<%= lProductName.Text%>' rel="useZoom: 'zoom1', smallImage: '<%#this.PictureService.GetPictureUrl((Picture)Container.DataItem, 350)%>' ">
        <img src="<%#this.PictureService.GetPictureUrl((Picture)Container.DataItem, 50)%>" alt="Product image" /></a>    
            </ItemTemplate>
        </asp:ListView>
                 
<script type="text/javascript">

var i = 1;
 $(".thumbnails a").each(function (){
 $(this).attr('id', ''+i+'');
  i++;
 });
 
 $(document).ready(function () {
   $('#1').click();
});

</script>

</div>

And here is Integration with extra option "View Full Size Image"

<script language="javascript" type="text/javascript">
            function UpdateMainImage(url, bigurl) {
                var imgMain = document.getElementById('zoom1');
                imgMain.href = url;
            }   
      function showHref(elementID){
      document.getElementById('fullview').href = document.getElementById(elementID).href;
      document.getElementById('fullview').title = document.getElementById(elementID).title;
      }
        </script>

<div class="product-details-info">
    <div class="picture">
<script type="text/JavaScript" src="/Scripts/cloud-zoom.1.0.2.min.js"></script>
      <a href="" class='cloud-zoom' id="zoom1" rel="position: 'inside' , showTitle: false, adjustX:0, adjustY:0">
      <asp:Image ID="defaultImage" runat="server" />
      </a>
      <div class="clear"></div>
        <a id="fullview" href="" rel="lightbox-p" title="">View Full Size Image</a>
        <asp:ListView ID="lvProductPictures" runat="server" GroupItemCount="6">
            <LayoutTemplate>
                <div class="thumbnails">
                    <asp:PlaceHolder runat="server" ID="groupPlaceHolder"></asp:PlaceHolder>
                </div>
            </LayoutTemplate>
            <GroupTemplate>
                    <asp:PlaceHolder runat="server" ID="itemPlaceHolder"></asp:PlaceHolder>
            </GroupTemplate>
            <ItemTemplate>
                <a id="" onclick ="showHref(this.id);" href="<%#this.PictureService.GetPictureUrl((Picture)Container.DataItem)%>" class="cloud-zoom-gallery" title='<%= lProductName.Text%>' rel="useZoom: 'zoom1', smallImage: '<%#this.PictureService.GetPictureUrl((Picture)Container.DataItem, 350)%>' ">
        <img src="<%#this.PictureService.GetPictureUrl((Picture)Container.DataItem, 50)%>" alt="Product image" /></a>    
            </ItemTemplate>
        </asp:ListView>
                 
<script type="text/javascript">

var i = 1;
 $(".thumbnails a").each(function (){
 $(this).attr('id', ''+i+'');
  i++;
 });
 
 $(document).ready(function () {
   $('#1').click();
});

</script>
    </div>

Finally, to remove de "Loading..." message when the image first loading, edit de Style Sheet cloud-zoom.css

.cloud-zoom-loading {
  color:white;  
  background:#222;
  padding:3px;
  border:1px solid #000;
  display: none;
}

thanks! I was looking for this.
I just came here and did a search for "lightbox" to get some results and yours was the first.

Thanks

Thanks from me too :)

Thanks for sharing...

Sorry for newbie question. I've kept in ProductInfo.ascx only 2 directives - Control and Register, and replace everything else with the code provided by noelrevuelta.  When I try to rebuild project I am getting following errors:

D:\nopCommerce_1.90_Source\NopCommerceStore\Modules\ProductInfo.ascx.cs(51,17): error CS0103: The name 'lProductName' does not exist in the current context
D:\nopCommerce_1.90_Source\NopCommerceStore\Modules\ProductInfo.ascx.cs(52,17): error CS0103: The name 'lShortDescription' does not exist in the current context
D:\nopCommerce_1.90_Source\NopCommerceStore\Modules\ProductInfo.ascx.cs(53,17): error CS0103: The name 'lFullDescription' does not exist in the current context
D:\nopCommerce_1.90_Source\NopCommerceStore\Modules\ProductInfo.ascx.cs(67,25): error CS0103: The name 'lManufacturersTitle' does not exist in the current context
D:\nopCommerce_1.90_Source\NopCommerceStore\Modules\ProductInfo.ascx.cs(71,25): error CS0103: The name 'lManufacturersTitle' does not exist in the current context
D:\nopCommerce_1.90_Source\NopCommerceStore\Modules\ProductInfo.ascx.cs(73,21): error CS0103: The name 'rptrManufacturers' does not exist in the current context
D:\nopCommerce_1.90_Source\NopCommerceStore\Modules\ProductInfo.ascx.cs(74,21): error CS0103: The name 'rptrManufacturers' does not exist in the current context
D:\nopCommerce_1.90_Source\NopCommerceStore\Modules\ProductInfo.ascx.cs(78,21): error CS0103: The name 'phManufacturers' does not exist in the current context
D:\nopCommerce_1.90_Source\NopCommerceStore\Modules\ProductInfo.ascx.cs(110,25): error CS0103: The name 'lnkMainLightbox' does not exist in the current context
D:\nopCommerce_1.90_Source\NopCommerceStore\Modules\ProductInfo.ascx.cs(111,25): error CS0103: The name 'lnkMainLightbox' does not exist in the current context

What I am doing wrong? Any help will much appreciated.

Thanks.

noelrevuelta, I believe you don't need to include the Script :
"<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>"
because NOP has it in use in the application already.

I couldn't get your code to work in the ProductInfo.ascx file.
When I only have one image, it gets stuck on the "Loading . .  " message.
If the product has more than one image, the "Loading..." message still apprears at first,
but it starts to work when you put the mouse over the image.

If anyone had any luck with this, please post your code. Thanks

Sorry to report this, but i had no luck with neither of your codes. I've spent all day at it and all i get are errors.


Is there anyone out there that has implemented this?
Can you help out? Instead of pasting the code in the message post, maybe you'd be so kind as to upload the whole page to RapidShare or any other file sharing service.

Thanks in advance...

Robert L.

noelrevuelta wrote:





Nice to hear this but what version are you using for it. Nop 1.9?
I was trying to testing with version 1.9 but still face some debug error. :(
also may me there are one <div/> tag is missing kindly can you recheck the code and tell us the version please.

I'm using 1.9.
It works,  . . but ONLY if there is more than one picture uploaded for the product.
When I just have one picture, it hangs on "Loading . . .". See pic :

http://i185.photobucket.com/albums/x307/GaryNull/loading.gif

It seems it's trying to load more pics but can't.
I don't know anything about JavaScript (except I hate it) so I am lost here.