How to make dynamic zoomify using jquery in asp.net

Question

Hi Developers,

I am creating a project . Now on that need a module to make dynamic zoomify images using jquery in asp.net.

I am having 3 images called 1,2,3 in my page popup . If i click 1st image means the first image will be in zoomed . 2nd and 3rd images should be not clickable . or If i am clicking 2 nd or 3rd image means should close first image and zoomed the clicked image

now my code is not working fine for my output. if anyone of you know kindly suggest me to complete this task.

 

My Html Code on below

<div id="divForm60" class="col-md-4 col-xs-4 hide">

<div class="form-group">

<label>Form 60</label>

<div class="row" style="height:145px;">

<img id="imgForm60" src="@Url.Content("~/Content/img/Shared/NoImage.png")" alt="Form 60"

style="max-width: 148px;" class="img-responsive img-thumbnail zoomify">

</div>

<div class="row">

<a id="aimgForm60" class="btn bg-maroon margin">Download</a>

</div>

</div>

</div>

<div id="divApplicatioForm" class="col-md-4 col-xs-4 hide">

<div class="form-group">

<label>Application form</label>

<div class="row" style="height:145px;">

<img id="imgApplicationProof" src="@Url.Content("~/Content/img/Shared/NoImage.png")" alt="ApplicationProof"

style="max-width: 148px;" class="img-responsive img-thumbnail zoomify">

<input type="hidden" id="hdnbyteuplfileApplicationProof" />

</div>

<div class="row">

<a id="aimgApplicationProof" class="btn bg-maroon margin">Download</a>

</div>

</div>

</div>

<div class="col-md-4 col-xs-12">

<div class="form-group">

<label id="PPName">Customer Photo</label>

<div class="row" style="max-height: 250px;">

<img id="imgPp" src="@Url.Content("~/Content/img/Shared/NoImage.png")" alt="Pp"

style="max-width:200px;max-height:200px;" class="img-responsive img-thumbnail zoomify">

<input type="hidden" id="hdnbyteuplfileProfilePicture" />

</div>

<div class="row">

<a id="aimgPp" class="btn bg-maroon margin">Download</a>

</div>

</div>

</div>

</div>

my Jquery code

("#aIDproof").attr("href", pathIndex("KYCOperation") + list[0].Id_ProofImagePath);

$("#aimgAddressproof").attr("href", pathIndex("KYCOperation") + list[0].Address_ProofImagePath);

$("#aimgApplicationProof").attr("href", pathIndex("KYCOperation") + list[0].Application_ProofImagePath);

$("#aimgPp").attr("href", pathIndex("KYCOperation") + list[0].ProfileImagePath);

IsLoading(false);

$('.zoomify').zoomify();

 

thanking you

Regards

Paul.S