Hi,

I am having the following code.This code display image , short description ,title,add to cart button,and price of the product.But what my issue is the product description,price it shows are not for the clicked image.it shows the description,price about the last loaded image.add to cart button is not working.How do i pass the description,price for the currently clicked image.The problem is product description and price are in different div tags and the image is in another tag.

    $(function () {

        debugger;

        $("#dialog").dialog({

            

            modal:true,

            autoOpen: false,

            resizable: false,

            width: "auto"

            

        });

        $("#dialog").draggable({disabled:true}) 

        $(".dialogify").bind("click", function(e) {

         e.preventDefault();

         

         var productprice='@Model.ProductPrice.Price';

            var desc='@Model.ShortDescription'

            $("#dialog").html("<img src='" + $(this).next().find('img').attr('src') + "' width='150' + height='150'>"+'<h2>'+ $(this).next().find('img').attr('title')+'</h2>'+"<label>"+productprice+"</label>"+"<label>"+desc+"</label>"+"<input type='button' value='@(Model.ProductPrice.AvailableForPreOrder ? T("ShoppingCart.PreOrder") : T("ShoppingCart.AddToCart"))' class='button-2 product-box-add-to-cart-button' onclick='AjaxCart.addproducttocart('@addtocartlink ');return false;'/>");

            $("#dialog").dialog("option", "position", {

                

                   modal:"true",

               my: "center",

               at: "center",

               of: window

           });

            if ($("#dialog").dialog("isOpen") == false) {

                $("#dialog").dialog("open");

           }

       });

   });

</script>

<div class="product-item" data-productid="@Model.Id" style="position:relative">

     

       <div class="picture">

          <a href=#  class="dialogify" data-width="350" data-height="300">Quickview</a>

        <a href="@Url.RouteUrl("Product", new { SeName = Model.SeName })" title="@Model.DefaultPictureModel.Title"> 

            <img alt="@Model.DefaultPictureModel.AlternateText" src="@Model.DefaultPictureModel.ImageUrl" title="@Model.DefaultPictureModel.Title" />

        </a>

           <div id="dialog" ></div>

    </div>

    <div class="details">

        <h2 class="product-title">

            <a href="@Url.RouteUrl("Product", new { SeName = Model.SeName })">@Model.Name</a>

        </h2>

        <div class="description">

            @Html.Raw(Model.ShortDescription)

        </div>

        <div class="add-info">

            <div class="prices">

                @if (!String.IsNullOrEmpty(Model.ProductPrice.OldPrice))

                {

                    <span class="price old-price">@Model.ProductPrice.OldPrice</span>

                }

                <span class="price actual-price" id="price">@Model.ProductPrice.Price</span>

            </div> 

            <div class="buttons">

                @*<input type="button" value="@T("Products.Details")" class="button-1 product-box-detail-button" onclick="setLocation('@Url.RouteUrl("Product", new { SeName = Model.SeName })')" />*@

                @if (!Model.ProductPrice.DisableBuyButton)

                {

                    <input type="button" value="@(Model.ProductPrice.AvailableForPreOrder ? T("ShoppingCart.PreOrder") : T("ShoppingCart.AddToCart"))" class="button-2 product-box-add-to-cart-button" onclick="AjaxCart.addproducttocart('@addtocartlink');return false;" />

                }

            </div>

            @Html.Widget("productbox_add_info")

        </div>

    </div>

</div>