Have an idea?

Visit Sawtooth Software Feedback to share your ideas on how we can improve our products.

Enlarge image with a href + record if clicked and time

Hi everyone,

I'm currently trying to add an image to one of my survey questions that participants can enlarge if they are interested. The image has a very big height, so participants would have to zoom in and scroll down to see every detail in the picture.
My preferred option would be to use the "a href" tag and let the image pop up within the survey question as participants can zoom in with this command.
 <a href="[%GraphicsPath()%]image.png"">Click here</a> 

If I use this code though, I don't know how can participants can return to the question page after they have clicked on the hyperlink to the image?

I've seen that the image can be opened in a separate tab with the "target=_blank" command and this tab can be simply closed by participants. However, the image shouldn't be available to participants during the next questions anymore. If it opens as a separate tab, I cannot track if people leave the tab open or close it. That is why I would like to go with the popup on the same page.

And is there an option to measure if participants clicked on the hyperlink at all and if yes, how long they stayed on this popup page?

If it is not possible to go with the "a href" tag, do you have any other idea how to implement this request?

Thanks a lot in advance!

Best regards,
asked May 3 by Henny (150 points)
This might work for you:


If so, the code could be modified to record the amount of time where the image was magnified.
Thanks a lot for your quick response, Zachary!

I've realized that within the Magnific Popup script, I can simply change the code for the image from "verticalFit: true" to "verticalFit: false" to zoom in and scroll down to see the remaining picture. This script perfectly works now.

However, could you help me with how I would have to modify the code to record the amount of time the picture was magnified?

Thanks a lot!

1 Answer

0 votes
Best answer
Try this.  Add a free format question to the same page.  Give it one hidden, numeric variable for each image you want to record the time of.  The HTML can look something like this:

<input name="[% QuestionName() %]_img1" id="[% QuestionName() %]_img1" type="hidden" value=""/>
<input name="[% QuestionName() %]_img2" id="[% QuestionName() %]_img2" type="hidden" value=""/>
<input name="[% QuestionName() %]_img3" id="[% QuestionName() %]_img3" type="hidden" value=""/>

For each image element, add an ID with the same name as a free format variable:

<img id="img1" src="..." alt="" border="0"/>

Finally, change the script part to this, replacing "FreeFormatQ" with the name of your free format question:

    var freeFormat = 'FreeFormatQ';
    var opened;

        var id = this.id;
        var src = $(this).attr('src');
        $(this).wrap('<a class="magnific-popup" href="' + src + '"></a>');
            type: 'image',
            closeOnContentClick: true,
            fixedContentPos: true,
            image: {
                verticalFit: false
            zoom: {
                enabled: true,
                duration: 300
            callbacks: {
                open: function(){
                    opened = new Date();
                close: function(){
                    var time = Number($('#' + freeFormat + '_' + id).val());
                    time += (new Date() - opened) / 1000;
                    $('#' + freeFormat + '_' + id).val(time);
answered 3 days ago by Zachary Platinum Sawtooth Software, Inc. (171,950 points)
selected 3 days ago by Henny
Thank you so much, Zachary! That works perfectly! And now I also get what I did wrong the entire time trying to figuring it out myself.