Zoom image in articles

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

  • Zoom all images
  • Zoom only selected images
  • Zoom all the images except selected ones
Important: Images will not be zoomed if they are used as links. Instead, the link opens when clicking the image.

Zooming all images in an iframe solution

  1. Add the following script in the embedded widget of the support center. 
    <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>

  2. In the support center, find the following code in the master page in the support center templates: window.iframeHlpr=
  3. Unmark obj={showImageInModal:true};.
  4. Make sure that your article content is wrapped with a div that has the articlePage id.

    Example: <div id="articlePage">

Zooming only specific images in an iframe solution

  1. To define which images you would like to be zoomed, edit the image's properties.
    1. Right-click the image to edit its properties.
    2. Select the Advanced tab.
    3. In the Stylesheet Classes field, enter maginify.

  2. Add the following script in the embedded widget of the support center. 
    <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>

  3. In the support center, find the following code in the master page in the support center templates: window.iframeHlpr=
  4. Unmark obj={showselectiveImageInModal:true};.
  5. Make sure that your article content is wrapped with a div that has the articlePage id.

    Example: <div id="articlePage">

Zooming all but specific images in an iframe solution

  1. To define which images you would not like to be zoomed, edit the image's properties.
    1. Right-click the image to edit its properties.
    2. Select the Advanced tab.
    3. In the Stylesheet Classes field, enter no_magnify.

  2. Add the following script in the embedded widget of the support center. 
    <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>

  3. In the support center, find the following code in the master page in the support center templates: window.iframeHlpr=
  4. Unmark obj={dontshowselectiveImageInModal:true};
  5. Make sure that your article content is wrapped with a div that has the articlePage id.

    Example: <div id="articlePage">

Zooming images in a non-iframe solution

The implementation in the support center widget is the same a for the iframe solution.
  1. If you have an older iframe solution, you should add this code to the head section: 
    <script 
  type="text/javascript" 
  src="https://s3.amazonaws.com/nr-customers/common/iframe/iframe_v2_staging.js">
</script> 
<script 
  type="text/javascript" 
  src="https://s3.amazonaws.com/nr-customers/common/js/open_modal.js">
</script> 
<script>
(function(){ 
  window.iframeHlpr = new iframeHelper(
    { 
      showImageInModal: true, 
        parentURL: "< %Site.MainSiteUrl% >",
        iframeBasicURL: '< % Site.Domain % >',
        showImageInModal: true
    }); 
})(); 
</script>
  2. Change the bold text with one of three options below:
    • showImageInModal: true
    • showselectiveImageInModal: true
    • dontshowselectiveImageInModal: true
  3. Add this code at the end of the master template just before the closing body tag: 
    <script>
window.iframeHlpr.InitiateResizeIframe();
</script>