How to Make Image Elevate Zoom On Oracle Apex

Image Elevate Zoom On Oracle Apex

Topic Introduction: 'Image Elevate Zoom On Oracle Apex', here we will discuss how to Elevate the zoom of an image on Oracle Apex. Sometimes we add a Photo to a small area but need to zoom in or show part by part of a picture in this scenario we can view this picture in another region of an individual part. I have given the source code and the description below. 

To use Image Elevate Zoom, we first need to download a JS and CSS file. Download the JS file by clicking on the link below.

Download

After downloading the JS And CSS file, follow the steps below.

1. Go To The Shared Components Option of Your Application,  Name- Image Elevate Zoom

           Click Static Application Files → Create File

2. Upload The Previously Downloaded JS and CSS File  

           Copy the JS And CSS file reference URL and place it in the text file

3. Create A New Page,  Name- Image Elevate Zoom

4. Create a Region, Name- Image Elevate Zoom

5. Go to the Properties page →  Javascript → File Urls → Paste the JS And CSS file reference URL

#APP_FILES#Image ElevateZoom JS File/jquery.elevateZoom-3.0.8.min.js

#APP_FILES#Image ElevateZoom JS File/jquery.magnific-popup.js

#APP_FILES#Image ElevateZoom JS File/magnific-popup.css

6. Go to the Region → HTML Code 

<img data-zoom-image="#APP_FILES#Reza0222.jpg" id="zoom_01" src="#APP_FILES#Reza0222.jpg"> 

7. Go to the Properties page → Function and Global Variable Declaration

$(document).ready(function() {

    $('.rep-popup-link').magnificPopup({type:'image'});

});

$("#zoom_01").elevateZoom({tint:true, tintColour:'#F90', tintOpacity:0.5});

8. Go to the Properties page → Inline 

img {

    width: 10%;

}             

.white-popup {

    position: relative;

    background: #FFF;

    padding: 20px;

    width: auto;

    max-width: 200px;

    text-align: center;

}