Magnify Image For APEX

How to magnify images? in this post show us how to use it.


Demo application : OAC

Download sample application : APEX-MagnifyImage

First of all we should add two *.js files and to get more samples and information  we need to visit dimsemenov.com & elevateweb . In addition this post show us some examples that third sample is about Interactive report and fourth is about image zoom. 

Step 1=> adds below files.

File URLs:

#APP_IMAGES#jquery.magnific-popup.js
#APP_IMAGES#jquery.elevateZoom-3.0.8.min.js

Step 2: adds below codes. "It can be to change the class & ID name. "

Function and global variable Declaration:

//image link
$('.image-link').magnificPopup({ 
  type: 'image',

  retina: {
    ratio: 2 // can also be function that should retun this number
  }

});

// Example with single object
$('#open-button1').magnificPopup({
    items: {
      src: '#APP_IMAGES#iranoug-3.jpg'
    },
    type: 'image' // this is default type
});


// Example with multi objects
// Define data for the popup
var data = [
  {
    username: "Saeed Hassanpour", // Key "username" means that Magnific Popup will look for an element with class "mfp-username" in markup and will replace its inner HTML with the value.
    userWebsite_href: '#', // Key "userWebsite_href" means that Magnific Popup will look for an element with class "mfp-userWebsite" and will change its "href" attribute. Instead of ending "href" you may put any other attribute.
    userAvatarUrl_img: '#APP_IMAGES#image1.jpg', // Prefix "_img" is special. With it Magnific Popup finds an  element "userAvatarUrl" and replaces it completely with image tag.
    userLocation: 'Tehran, Iran'
  },
  
  {
    username: "Saeed Hassanpour",
    userWebsite_href: 'http://iranoug.org',
    userAvatarUrl_img: '#APP_IMAGES#iranoug-3.jpg',
    userLocation: 'Tehran, Iran'
  },
  
  {
    username: "-----",
    userWebsite_href: '#',
    userAvatarUrl_img: '#APP_IMAGES#image1.jpg',
    userLocation: 'Tehran, Iran'
  }
];

$('#open-button2').magnificPopup({ 
  key: 'my-popup', 
  items: data,
  type: 'inline',
  inline: {
    // Define markup. Class names should match key names.
    markup: '<div class="white-popup"><div class="mfp-close"></div>'+
              '<a class="mfp-userWebsite">'+
                '<div class="mfp-userAvatarUrl"></div>'+
                '<h2 class="mfp-username"></h2>'+
              '</a>'+
              '<div class="mfp-userLocation"></div>'+
            '</div>'
  },
  gallery: {
    enabled: true 
  },
  callbacks: {
    markupParse: function(template, values, item) {
      // optionally apply your own logic - modify "template" element based on data in "values"
       console.log('Parsing:', template, values, item);
    }
  }
});


// report link
$(document).ready(function() {
  $('.rep-popup-link').magnificPopup({type:'image'});
});

//--------------Tints

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

Step 3: we need a CSS file and downloads above site address that was mentioned.

File URLs:

#APP_IMAGES#jquery.magnific-popup.js

First Sample (Link) :

When clicks on link so the image will appear. we create a region and put below text in source.

<a href="#APP_IMAGES#iranoug-3.jpg" title="Test caption" class="image-link">Show image</a>

Second Sample (Button) :

When clicks on button so the image will appear. we create a button and only set a "Static ID" for example "open-button1"

Third Sample (Interactive Report) :

When clicks on a little image at IR as result the image will appear with original size. We create a report region and in SQL Query we have to change or add some codes. if we see the below image so the numbers 3,4 are important keys.

<img class="rep-popup-link" alt="'||apex_escape.html_attribute(p1.product_name)||'" title="'||apex_escape.html_attribute(p1.product_name)
              ||'" style="border: 4px solid #CCC; -moz-border-radius: 4px; -webkit-border-radius: 4px;" '
              ||'src="'||image_link||'" height="75" width="75"  id="img'||p1.product_id||'" 
              data-mfp-src="'||image_link||'" />

Fourth Sample (Image Zoom) :

When moves cursor on the left image for each position as result the big image of that point will appear. 

We create a region and adds below text in source.

<img id="zoom_01" src="#APP_IMAGES#image1.png" data-zoom-image="#APP_IMAGES#image1.jpg">

Enjoy with Magnify Image.