Friday, December 21, 2018

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.




2 comments :

  1. This looks great! Exactly what I need for an application I'm currently working on. We are on APEX 5.1.3 though and I'm not able to import your application into our APEX environment.
    Do you think this should work on 5.1.3 as well?
    Any suggestions on how to achieve that?

    Thanks in advance for your help.

    ReplyDelete