ZOOM Image in Oracle Apex byClicking on Image

 ZOOM Image in Oracle Apex byClicking on Image

Step 1.

CREATE OR REPLACE FUNCTION APEX.GET_image_from_directory(imgname VARCHAR2) RETURN BLOB IS  

 l_blob  blob;

        l_bfile bfile;

begin

       DBMS_LOB.CREATETEMPORARY(l_blob, TRUE);

      l_bfile := bfilename( 'VNO_IUS', imgname||'.jpg' );

      dbms_lob.fileopen( l_bfile );

      dbms_lob.loadfromfile( l_blob, l_bfile,

                               dbms_lob.getlength( l_bfile ) );

      dbms_lob.fileclose( l_bfile );

        return l_blob;

        END;

/

Step 2.

Create a Application Process with Name SHOWDOCPIC

declare

mylob blob;

begin 

    select GET_IMAGE_FROM_DIRECTORY(:DOCNAM) into MYLOB  from DUAL ;

     

        sys.wpg_docload.download_file(MYLOB);

        apex_application.stop_apex_engine;

  

end;

Step 3.

Create a Application Item DOCNAM.

Step 4.

Paste Following Code in Page (Global Variables and Declartion)

function getURL(input) {

 if (input.files && input.files[0])

 {

 var reader=new FileReader();

 reader.onload = function(e){

 $('#upimag')

 .attr('P559_NEW',e.target.result);

 };

 reader.readAsDataURL(input.files[0]);

 }

}

function zoom(){

 var divlClass=$('#imgdiv').attr('class');

 if (divlClass==="ex"){

 $('#imgdiv').css('cursor','zoom-in');}else

 if ( divlClass=== "exZoom" ) {

 $('#imgdiv').css('cursor','zoom-out');}

 }

function my_class(){

 var divlClass= $('#imgdiv').attr('class');

 if(divlClass=== "ex"){

 $("#imgdiv").removeClass("ex");

 $("#upimag").removeClass("ex");

 $("#imgdiv").addClass("exZoom");

 $("#upimag").addClass("exZoom");} else

 if(divlClass==="exZoom"){

 $("#imgdiv").removeClass("exZoom");

 $("#upimag").removeClass("exZoom");

 $("#imgdiv").addClass("ex");

 $("#upimag").addClass("ex");}

 }

Step 5.

Paste Inline CSS Code

.ex

    {

    height:250px;

    width:250px;

    padding:2px ;

    }

.exZoom 

    {

    height:1000px;

    width:1000px;

    padding:0px;

    }

Step 6.

Create a PL/SQL DynamicContent Region and add the Following Code

HTP.P('

<div align="center">

    <div id="imgdiv" class="ex">

    <img alt="" class="ex" id="upimag" onclick="my_class(); zoom();" onmouseover="zoom();" src="f?p=&APP_ID.:0:&APP_SESSION.:APPLICATION_PROCESS=SHOWDOCPIC:::DOCNAM:'||:P559_DOCID||'" />

  </div>

</div>

');