Implement dynamic Image Zoomify using jQuery in ASP.Net

Hi Developers,

How 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 2nd 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.

Am applying click event by clicking on the image.

On the image 1st it show the + symbol , if am click means image zoomed and showing - symbol.

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