Modal Images / Large Image / Image Zoom from Report In Oracle apex 5.1 with HTML,CSS,JavaScript

 Press On the Photo to See Clearly 

Modal Images /  Large Image from Report In Oracle apex 5.1 is a very interesting and different some thing. Here I give some step to do  Modal Image or Zoom Image from Report what ever you say.


1. First click on the name of the page where you create the report and go to HTML HEADER
     then write this code like this:

Press On the Photo to See Clearly 

                          IT'S  CONTAIN  CSS CLASSES  AND JAVASCRIPT FUNCTIONS
 <style>
#myImg {
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
}

#myImg:hover {opacity: 0.7;}

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 48px;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

/* Modal Content (image) */
.modal-content {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
}

/* Caption of Modal Image */
#caption {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
    text-align: center;
    color: #ccc;
    padding: 10px 0;
    height: 150px;
}

/* Add Animation */
.modal-content, #caption {    
    -webkit-animation-name: zoom;
    -webkit-animation-duration: 0.6s;
    animation-name: zoom;
    animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
    from {-webkit-transform:scale(0)} 
    to {-webkit-transform:scale(1)}
}

@keyframes zoom {
    from {transform:scale(0)} 
    to {transform:scale(1)}
}

/* The Close Button */
.close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
}

.close:hover,
.close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
    .modal-content {
        width: 100%;
    }
}
    
    #img01{
        height: 500px;
        width:  500px;
    }    
</style>

<script type="text/javascript">
         function ShowLargeImage(image) {
var sorc = $(image).attr("src");

var modalImg = document.getElementById("img01");
var modal = document.getElementById('myModal');
var span = document.getElementsByClassName("close")[0];
    modal.style.display = "block";
    modalImg.src = sorc;
    span.onclick = function() {
    modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}
         }
</script>



2. Create a Report and fetch image from database using HTML <img   tag . Here need to call CSS id and JavaScript function.
Like this code:

                                                     Press On the Photo to See Clearly 


  TI'S THE SELECT QUERY  HOW TO FETCH DATA AND IMAGE FROM DATABASE TABLE

select EMPLOYEEID,
       EMPLOYEENAME,
       EMAIL,
       MOBILE,
       DEPARTMENTID,
       JOBID,
       SALARY,
       HIREDATE,
        '<img id="myImg" src="'
       || APEX_UTIL.GET_BLOB_FILE_SRC ('P8_PICTURE',EMPLOYEEID)
       || '" height="60px" width="60px"
        onclick="ShowLargeImage(this); return false;" style="cursor:pointer;"/>'

    photo
       from EMPLOYEES

3. After all create a new REGION with STATIC CONTENT Type. Then click on the name of this REGION and find out SOURCE >> TEXT from properties. 
Write this code:

                                                      Press On the Photo to See Clearly 

<div id="myModal" class="modal">
    <span class="close">&times;</span>
  <div class="modal-content">    
<img class="img" id="img01">
  </div>
      <div id="caption"></div>
</div>



(PRESS SAVE AFTER DOING EVERY CHANGE OR WRITING CODE) 

Then Run the page report and click on the Reports Image file. It will be turn to large size.

THANK YOU