Hover to Enlarge (Image)

This article will help you setup Hover to Enlarge Functionality. 


Background

This is used to show large images once you hover over an area. 

NOTE: This functionality does not work on mobile devices. Please use Click to Enlarge instead. 


Articles to Reference


Overall Settings

  1. Click on the 'SURVEY SETTINGS' on the question tree
  2. Click on 'DEFAULT TEXT' on the left
  3. Click on the Text Editor icon to the left of the 'SURVEY HEADER' on the Default Text card 
  4. While on the text editor window, click on the source (</>) to enter the html editor. 
  5. While in the HTML Editor, paste in the following code: 
    <script type="text/javascript" src="https://cdn.cmix.com/surveyContent/thirdparty/custom-functionality/image-hover-v1.3.js"></script>
    	

  6. Click on the source (</>) button again to exit the HTML Editor 
  7. Click 'SAVE'
  8. You can now close out of the Default Text card. 

Updating Your Responses

Now its time to add the code to each item you want to have this feature

  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. 
    <img data-zoom-hover="" style=" width:100px" src="https://xxxxx

    Back_to_the_Future

    .jpg" class="fr-fic fr-dii fr-draggable">
    1. Make sure to update width of the image (default size without hover) AND 
    2. Image url
  4. Once you are done, click on the source (</>) button again to exit this screen. 

  5. Click 'SAVE' 
  6. As always, make sure to test to confirm everything is working as intended


Hover Formatting

You may want to format the hover image itself. Follow the steps below to do so:
  1. Please review the following article if you haven't already: Adding JavaScriipt and/or CSS to a Question
  2. Add the following code to the JavaScript field of the question you are using Hover on
    1. Update the question number to match yours ("QHOVER")
    2. You can update the hover image width 
    3. Use a border if needed
      cmSurvey.plugins.zoomOnHover("QHOVER", {  /* UPDATE WITH YOUR QUESTION NUMBER */
          style: {
            'max-width': '400px',  /* UPDATE THE WIDTH OF YOU HOVER IMAGE */ 
            'border': '1px solid black' /* UPDATE THE BORDER OF YOU HOVER IMAGE */
          }
      });
      		
  3. Make sure to test and make adjustments as needed. 

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