Click to Enlarge

This article will help you setup Click to Enlarge Functionality. 


Background

This is used to show large images and/or concept text once you click on an area. 


Articles to Reference


Setting Up Click to Enlarge

  1. Click on the icon to go to the Editor screen for the specific response you are working on.
  2. Click on the source icon (</>) to go to the HTML Editor
  3. You will need to add the code below to your the editor. The top line is the response/choice and the 2nd is the pop-up. 
    1. Have both the response choice and the popup both be text
      <div data-cm-open-popup="b1">  Default Response Text </div>
      <div data-cm-popup="b1"> Text to appear on click </div>
    2. Have the response choice be text and the popup an image
      <div data-cm-open-popup="b1">  Default Response Text </div>
      <div data-cm-popup="b1">  <img src="https://xxxxx/large.jpg" alt="1" style="width: 200px; height: 300px;"> </div>
    3. Have the response choice be and image and and the popup be text
      <div data-cm-open-popup="b1">  <img src="https://xxxxx/small.jpg" alt="1" style="width: 100px; height: 100px;"> </div>
      <div data-cm-popup="b1"> Text to appear on click </div>
    4. Have both the response choice and the popup both be images
      <div data-cm-open-popup="b1">  <img src="https://xxxxx/small.jpg" alt="1" style="width: 100px; height: 100px;"> </div>
      <div data-cm-popup="b1">   <img src="https://xxxxx/large.jpg" alt="1" style="width: 200px; height: 300px;"> </div>
    5. NOTE: If you are using the Drag and Drop Scale or Drag and Drop Buckets question types, add the pop-up div's (second line in the examples above) all in the source of the instructions field.  
  4. Please note the " b1", needs to be unique for each response so the code knows what to open in the new window.
  5. Once you are done, click on the source (</>) button again to exit this screen and enable the save. 
  6. Then click 'SAVE' 
  7. Use the code below to control the pop up window should you need to
    #cm-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    display: none;
    width: 100%;
    height: 100%;
    background-color: black;
    opacity: .5;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter: alpha(opacity=50);
    z-index: 90001;
    }
    [data-cm-popup] {
    position: fixed;
    top: 0;
    left: 0;
    display: none;
    width: 100%;
    height: 100%;
    background-color: transparent;
    z-index: 90002;
    text-align: center;
    white-space: nowrap;
    }
    [data-cm-popup]:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    margin-right: -0.25em;
    }
    .cm-popup-content {
    display: inline-block;
    vertical-align: middle;
    max-width: 100%;
    max-height: 100%;
    overflow: auto;
    padding: 8px;
    border-radius: 8px;
    background-color:#FFF;
    }
    	
  8. As always, make sure to test to confirm everything is working as intended
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us