Welcome To Our Customer Service Portal


Zoom image in articles - iframe implementation

Step 1 - Prepare you Articles:

There are 3 options of implementations for zooming an image in an Article:

1. Zoom all images - "Option All"

2. Zoom to only selective images - "Option Zoom Selective".

In order to define, which images you would like to zoom please add a class: "magnify" that is set in the image Properties => Advance: 

3. Zoom on all the images except selective images "Option not Zoom Selective".   In order to define which image you do not want to zoom please add  class "no_magnify" in the same place as picture above.

 

Important notice: Images will not be zoomed if they are used as links. Instead, when clicking the image, the link would be opened.

Step 2 - Setup the Support Center widget:

After your articles are set, we can move to the next stage:

Add the following script in the embedded widget of the support center. (see picture below)

 

For "Option All" 

If you want all the images to be zoomed please select this script:

<script>(function() {

window.showModal=true;

var sc = document.createElement("script");  sc.src = '//s3.amazonaws.com/nr-customers/common/iframe/widget_footer_iframe_v2.js';  document.head.appendChild(sc); })();</script>

 

 For "Option Zoom Selective"

If you want to zoom only selective images, Please select this script

<script>(function() { 

window.showSelectiveModal=true;

var sc = document.createElement("script");  sc.src = '//s3.amazonaws.com/nr-customers/common/iframe/widget_footer_iframe_v2.js';  document.head.appendChild(sc); })();</script>

 

For "Option not Zoom Selective"

If you want images to be zoomed except images that you specified as not to be magnified, please select this script:

<script>(function() { 

window.dontshowSelectiveModal=true;

var sc = document.createElement("script");  sc.src = '//s3.amazonaws.com/nr-customers/common/iframe/widget_footer_iframe_v2.js';  document.head.appendChild(sc); })();</script>

Step 3 - Setup the Support Center:

In master page:

In the support center, please find the following code in the master page in the support center templates:

window.iframeHlpr=

Please unmark the relevant line according to your implementation.

For "Option All"  unmark:

obj={showImageInModal:true};

 For "Option Zoom Selective" unmark:

obj={showselectiveImageInModal:true};

"Option not Zoom Selective" unmark

obj={dontshowselectiveImageInModal:true};

 

In article page:

Please make sure that your article content is wrapped with a div with id:articlePage<div id="articlePage">