How To Upload. Show and Zoom In Out Image in Oracle Apex

How To Upload. Show and Zoom In Out Image in Oracle Apex

 

In Today's Video And Post, After Uploading Pictures To Oracle Apex Application, I Will Discuss In Detail How To Show Pictures, Zoom In And Zoom Out. Hopefully, After Watching The Full Video Post, You Too Can Easily Turn On The Photo Zoom In And Zoom Out Option In Your Application.

Steps How To Upload, Show and Zoom inout Image

To Upload Images, We Will Create A Blank Page And An Item In Two Regions. Take A Look At All The Steps For How To Upload, Show, And Zoom In Out Image In Oracle Apex.

1. Create A Blank Page. Name- Upload, Show and Zoom in/out Image

2. Create a New Region Name- Upload Image

3. Create A New Item. Name- P64_UPLODE_IMAGE

4. Go To Function and Global Variable Declaration. Paste The Code

function getURL(input) {
 if (input.files && input.files[0])
 {
 var reader=new FileReader();
 reader.onload = function(e){
 $('#upimag')
 .attr('src',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");}
 }

5. Go To Inline CSS Paste The Code

.ex
    {
    height:120px ;
    width:150px;
    padding:2px ;
    }

.exZoom 
    {
    height:1000px;
    width:1000px;
    padding:0px;
    }

6. Create a New Region Name- Show Image
Paste The Code

<div align="center">
    <div id="imgdiv" class="ex">
    	<img alt="" class="ex" id="upimag" onclick="my_class(); zoom();" onmouseover="zoom();" src="#" />
 	</div>
</div>

7. Now Go To Advanced - Custom Attributes Paste The Code

onchange="getURL(this);" onload="getURL(this);"

 

🔗 Demo Application-
            URL- Demo Application
            Username - demo, Pass- demo
 

I hope everyone will like it. Please watch the full video,
Comment on any of your problems, I will try my best to solve the problem, In-Shah Allah. Everyone's cooperation is desirable. Visit my blog site, new technology related videos, you will get different types of tutorials of Oracle Apex, and hopefully, you can use them in your daily work.
Please stay tuned by subscribing to the YouTube channel, and encourages new videos to be uploaded.
=================
Visit my site to get more collaborative posts about Oracle Apex and subscribe to my YouTube channel. Thanks.
Comment on any of your issues, I will try my best to solve the problem, In-Shah Allah. Everyone's cooperation is desirable.
Visit my blog site, new technology-related videos, you will get different types of tutorials of Oracle Apex, and hopefully, you can use them in your daily work.
==============================

🙍🏾‍ Md jABER HOSSEN
📲 Mobile- +8801760688286
📨 Email- jaberit786@gmail.com
🌐 FB- facebook.com/mdjaber.hossen1
Please Subscribe to My Channel

Many thanks for visiting the site.

Then Enjoy.........................