The script discussed in this document enables you to add a lightbox feature to a question containing images. This lightbox feature allows your participants to click and enlarge an image you've included in a question so that they can take a closer look at its details. The lightbox opens in another window within the survey.
Notes:
- The Script does not work with the mobile view because of the use of JavaScript.
- For Visual and Multimedia questions, the script only works in the question text.
- You will need a thumbnail and a full size version of an image to use the lightbox feature.
Detailed Steps
Prepare your Thumbnail Image
- Size your image. The typical thumbnail size is 250px by 250px or smaller.
- Save your thumbnail image as IMAGENAME-thumb in .png or .jpg format. You may change “IMAGENAME” to an image name of your choice. However, please ensure that you keep “- thumb” in the name. For example, Koala-thumb.jpg. The image name should be alpha numeric and should not contain spaces or special characters.
Note: The extension of the thumbnail and full sized images must match, for example Koala-full.jpg and Koala-thumb.jpg
Prepare your Full size Image
- Size your image. Your image size must not exceed the width of your survey skin which is between 700px and approximately 900px.
- Save your full image as IMAGENAME-full in .png or .jpg format. You may change “IMAGENAME” to an image name of your choice (matching the name of the thumbnail version). However, please ensure that you keep “- full” in the name. For example, Koala-full.jpg. The image name should be alpha numeric and should not contain spaces or special characters.
Upload the Images to your Survey
- Go to the Questionnaire tab of your survey.
- Create the question that will contain the lightbox feature. The lightbox feature works with images in the question text of any question, answer options of the classic choice questions and rows and columns of classic grids.
- Select the Image Manager icon for either the question or answer option that you are adding the image to.
- Select the Images folder on the left pane.
- Click Upload.
- Click Select and select both the thumbnail and full size image from your computer.
- Click Upload.
- Select the thumbnail image.
- Click Insert.
- Click Save.
Insert the completed script into the Scripting section of your question
- Copy the below script.
- In the Scripting section of your question, click Edit Scripts.
- Paste the completed script in the JavaScript tab.
- Click Save.
- Click Validate and test your survey.
/* Script Name: How do I set up click-and-enlarge images using a lightbox? (Power Surveys) To ensure your script works as expected, always copy the original script from the script library found in the support portal. Failure to use the most up to date script from the script library may cause unexpected results. */ <SCRIPT src="https://static.visioncritical.net/prog/ext_libs/jquery/jquery-1.12.3.min.js" type=text/javascript></SCRIPT> <SCRIPT> var $j = jQuery.noConflict(); $j(document).ready(function(){ $j('img[src*="thumb"]').each(function() { $j(this).attr('border', '0'); var src= $j(this).attr('src').replace('-thumb','-full'); var tit = $j(this).attr('alt'); var a = $j('<a/>').attr({ href: src, rel: 'lightbox', title: tit, target: '_blank'}); $j(this).wrap(a); }); }); </SCRIPT> <SCRIPT src="https://static.visioncritical.net/prog/ext_libs/slimbox/2.05.0/js/slimbox2.js" type=text/javascript></SCRIPT> <link rel="stylesheet" href="https://static.visioncritical.net/prog/ext_libs/slimbox/2.05.0/css/slimbox2.css" type="text/css" media="screen" />
Comments
0 comments
Article is closed for comments.