I'm just now getting back to this. I think the problem is that my \"original\" images already take up too much of the available task width. Even though these images are already pretty wide, I would still like a magnification of some sort because each one has small print that can be hard to read on some monitors without magnification.

Is there a way to override the maxdiff task width, question width and/or page width without creating havoc on various devices/browsers?

For what it's worth, I asked ChatGPT-4 for a solution, and it gave me the following. (Doing this stretched my images vertically, and didn't do much (if anything) for the width):

Add to header:

$(document).ready(function() {

$('body').on('mouseenter', '.zoom-image', function() {

var width = $(this).width();

var height = $(this).height();

$(this).data('original-width', width);

$(this).data('original-height', height);

$(this).css({

'width': (width * 2) + 'px',

'height': (height * 2) + 'px'

});

$('body').on('mouseleave', '.zoom-image', function() {

var originalWidth = $(this).data('original-width');

var originalHeight = $(this).data('original-height');

$(this).css({

'width': originalWidth + 'px',

'height': originalHeight + 'px'

});

</script>

And then the following in my maxdiff levels:

[% ToolTip(\"<img src='\" & GraphicsPath() & \"image1.jpg' class='zoom-image' />\", \"\") %]

[% ToolTip(\"<img src='\" & GraphicsPath() & \"image2.jpg' class='zoom-image' />\", \"\") %]

...

MaxDiff images / hover & magnify