You must Sign In to post a response.
  • Category: ASP.NET

    How to make dynamic zoomify using jquery in asp.net

    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
  • #770015
    Hello ,Are you trying to achieve ias in below link? , correct me if I understand wrong
    https://www.c-sharpcorner.com/UploadFile/sapnabeniwal/powerful-image-zoom-effect-using-jquery/


  • Sign In to post your comments