Anchor Max-Diff
For this setup, just replace the path of images contained in the link with class "fancybox" and its respective image. Replace the price/text in the span with class "price_d". Then copy and replace question text, place in loop and implement appropriate script for max-diff.
<radio
label="Q5"
adim="cols"
grouping="cols"
shuffle="rows"
ss:questionClassNames="Q5_maxdiff"
unique="1">
<title>Considering only these 4 items, which would you be Most Interested (<span class="thm"><img src="/survey/selfserve/560/200209/likeT.png" height="31px" /></span>) in buying and which would you be Least Interested (<span class="thm"><img src="/survey/selfserve/560/200209/dilikeT.png" height="31px" /></span>) in buying for your household?
Click on the image to view it in larger size.</title>
<comment><i>Click on the image to view it in larger size.</i></comment>
<col label="best">Most Important</col>
<col label="worst">Least Important</col>
<row label="item1"><a href="/survey/selfserve/560/200209/d1.jpg" class="fancybox"><img src="/survey/selfserve/560/200209/d1.jpg" class="im" /></a><div class="b_row"><span class="like_b"><img src="/survey/selfserve/560/200209/likeT.png" /></span><span class="price_d">2.15oz for $1.99</span> <span class="dilike_b"><img src="/survey/selfserve/560/200209/dilikeT.png" /></span></div></row>
<row label="item2"><a href="/survey/selfserve/560/200209/d2.jpg" class="fancybox"><img src="/survey/selfserve/560/200209/d2.jpg" class="im" /></a><div class="b_row"><span class="like_b"><img src="/survey/selfserve/560/200209/likeT.png" /></span><span class="price_d">7.8oz for $2.99</span> <span class="dilike_b"><img src="/survey/selfserve/560/200209/dilikeT.png" /></span></div></row>
<row label="item3"><a href="/survey/selfserve/560/200209/d3.jpg" class="fancybox"><img src="/survey/selfserve/560/200209/d3.jpg" class="im" /></a><div class="b_row"><span class="like_b"><img src="/survey/selfserve/560/200209/likeT.png" /></span><span class="price_d">8.4oz for $2.99</span> <span class="dilike_b"><img src="/survey/selfserve/560/200209/dilikeT.png" /></span></div></row>
<row label="item4"><a href="/survey/selfserve/560/200209/d4.jpg" class="fancybox"><img src="/survey/selfserve/560/200209/d4.jpg" class="im" /></a><div class="b_row"><span class="like_b"><img src="/survey/selfserve/560/200209/likeT.png" /></span><span class="price_d">7.5oz for $2.99</span> <span class="dilike_b"><img src="/survey/selfserve/560/200209/dilikeT.png" /></span></div></row>
<row label="item5"><a href="/survey/selfserve/560/200209/d5.jpg" class="fancybox"><img src="/survey/selfserve/560/200209/d5.jpg" class="im" /></a><div class="b_row"><span class="like_b"><img src="/survey/selfserve/560/200209/likeT.png" /></span><span class="price_d">6.6oz for $2.99</span> <span class="dilike_b"><img src="/survey/selfserve/560/200209/dilikeT.png" /></span></div></row>
<row label="item6"><a href="/survey/selfserve/560/200209/d6.jpg" class="fancybox"><img src="/survey/selfserve/560/200209/d6.jpg" class="im" /></a><div class="b_row"><span class="like_b"><img src="/survey/selfserve/560/200209/likeT.png" /></span><span class="price_d">2.15oz for $1.99</span> <span class="dilike_b"><img src="/survey/selfserve/560/200209/dilikeT.png" /></span></div></row>
<row label="item7"><a href="/survey/selfserve/560/200209/d7.jpg" class="fancybox"><img src="/survey/selfserve/560/200209/d7.jpg" class="im" /></a><div class="b_row"><span class="like_b"><img src="/survey/selfserve/560/200209/likeT.png" /></span><span class="price_d">15.25oz for $1.69</span><span class="dilike_b"><img src="/survey/selfserve/560/200209/dilikeT.png" /></span></div></row>
<row label="item8"><a href="/survey/selfserve/560/200209/d8.jpg" class="fancybox"><img src="/survey/selfserve/560/200209/d8.jpg" class="im" /></a><div class="b_row"><span class="like_b"><img src="/survey/selfserve/560/200209/likeT.png" /></span><span class="price_d">15.25oz for $1.69</span><span class="dilike_b"><img src="/survey/selfserve/560/200209/dilikeT.png" /></span></div></row>
<style name="question.after"><![CDATA[
<link rel="stylesheet" href="${KEDomain}/tools/anchorMD/cloudzoom.css">
<link rel="stylesheet" href="${KEDomain}/tools/anchorMD/jquery.fancybox4c03.css">
<style type="text/css">
table.ki {
margin: 0 auto;
border-spacing: 5px;
border-collapse: separate;
}
table.ki>tbody>tr>td {
text-align: center;
width: 50%;
border: 1px solid #d5d5d5;
transition-duration: 0.5s;
-webkit-transition-duration: 0.5s;
}
.hh {
background: red;
color: white;
font-size: 16px;
padding: 5px;
margin-bottom: 10px;
visibility: hidden;
transition-duration: 0.5s;
-webkit-transition-duration: 0.5s;
}
span.thm {
position: relative;
top: 10px;
}
span.like_b>img, span.dilike_b>img {
height: 60px;
cursor: pointer;
}
span.like_b, span.dilike_b {
display: inline-block;
width: 30%;
}
.b_row {
width: 100%;
margin: 0 auto;
display: flex;
}
span.price_d {
/*width: 70%;*/
font-size: 16px;
font-weight: bold;
display: table;
}
img.im {
max-height: 200px;
}
.like_sel
{
box-shadow: 0px 0px 15px green;
}
.dislike_sel
{
box-shadow: 0px 0px 15px red;
}
.answers,#question_Q5a_[loopvar: task] {
display:none;
}
#question_Q5a_[loopvar: task] .answers {
display: block;
}
.cell.hasError, .answers-list .element.hasError, .element.hasError:hover, .rowLegendErr .oe, .colLegendErr .oe {
background-color: white;
}
</style>
]]></style>
<style name="question.top-legend"><![CDATA[
\@if ec.simpleList
$(legends)
\@else
<$(tag) class="maxdiff-header-legend row row-col-legends row-col-legends-top ${"mobile-top-row-legend " if mobileOnly else ""}${"GtTenColumns " if ec.colCount > 10 else ""}colCount-$(colCount)">
${"%s%s" % (legends.split("</th>")[0],"</th>")}
$(left)
${"%s%s" % (legends.split("</th>")[1],"</th>")}
</$(tag)>
\@if not simple
</tbody>
<tbody>
\@endif
\@endif
]]></style>
<style name="question.row"><![CDATA[
\@if ec.simpleList
$(elements)
\@else
<$(tag) class="maxdiff-row row row-elements $(style) colCount-$(colCount)">
${"%s%s" % (elements.split("</td>")[0],"</td>")}
$(left)
${"%s%s" % (elements.split("</td>")[1],"</td>")}
</$(tag)>
\@endif
]]></style>
<style name="question.after"><![CDATA[
<script type="text/javascript" src="${KEDomain}/tools/anchorMD/cloudzoom.js"></script>
<script type="text/javascript" src="${KEDomain}/tools/anchorMD/jquery.fancybox5e1f.js"></script>
<script>
var qn = ${jsexport()}; //returns json object of the question
console.log(qn) //loads question variables into a console tool
var rsp_id=qn.uid;
document.onreadystatechange = function () {
var state = document.readyState
if (state == 'complete') {
/******settings start*****/
var total_cols_in_one_row=2;
var best_label="MOST Interested";
var worst_label="LEAST Interested";
var best_lablel_color="green";
var worst_lablel_color="red";
/******settings end*****/
var rx=1;
var col_count=0;
var table_html="<table class='ki'><tbody>";
jQuery(".answers > table.grid >tbody:nth-child(2) > tr").each(function(){
col_count++;
if(col_count==1){
table_html=table_html+"<tr>";
}
table_html=table_html+"<td id='z"+rx+"' class='MD_box'></td>";
if(col_count==total_cols_in_one_row){
table_html=table_html+"</tr>";
col_count=0;
}
rx++;
});
table_html=table_html+"</tbody>/<table>";
jQuery(".answers").before(table_html);
var k=1;
jQuery(".answers > table.grid >tbody:nth-child(2) > tr").each(function(){
var most_imp=jQuery(this).children("td:nth-child(1)").find("input").attr("id");
var least_imp=jQuery(this).children("td:nth-child(3)").find("input").attr("id");
jQuery("#z"+k).append("<div class='hh'>"+best_label+"</div>");
jQuery("#z"+k).append(jQuery(this).children("th").html());
jQuery("#z"+k).find(".like_b").attr("data-value",most_imp);
jQuery("#z"+k).find(".like_b").attr("data-type",1);
jQuery("#z"+k).find(".dilike_b").attr("data-value",least_imp);
jQuery("#z"+k).find(".dilike_b").attr("data-type",2);
if(jQuery(".cell-input >input#"+most_imp).is(":checked"))
{
jQuery("#z"+k).find(".hh").text(best_label);
jQuery("#z"+k).find(".hh").css("visibility","hidden");
jQuery("#z"+k).addClass("like_sel");
}
if(jQuery(".cell-input >input#"+least_imp).is(":checked"))
{
jQuery("#z"+k).find(".hh").text(worst_label);
jQuery("#z"+k).find(".hh").css("visibility","hidden");
jQuery("#z"+k).addClass("dislike_sel");
}
k++;
});
var zzz1=zzz2=0;
jQuery(".like_b,.dilike_b").click(function(){
var c_val=jQuery(this).attr("data-value");
var c_type=jQuery(this).attr("data-type");
if(c_type==1)
{
zzz1=1;
jQuery(".like_sel").children(".hh").css("visibility","hidden");
jQuery(".like_sel").removeClass("like_sel");
jQuery(this).parents(".MD_box").addClass("like_sel");
jQuery(this).parents(".MD_box").removeClass("dislike_sel");
jQuery(this).parents(".MD_box").find(".hh").text(best_label);
jQuery(this).parents(".MD_box").find(".hh").css("background",best_lablel_color);
jQuery(this).parents(".MD_box").find(".hh").css("visibility","visible");
}
else
{
zzz2=1;
jQuery(".dislike_sel").children(".hh").css("visibility","hidden");
jQuery(".dislike_sel").removeClass("dislike_sel");
jQuery(this).parents(".MD_box").addClass("dislike_sel");
jQuery(this).parents(".MD_box").removeClass("like_sel");
jQuery(this).parents(".MD_box").find(".hh").text(worst_label);
jQuery(this).parents(".MD_box").find(".hh").css("background",worst_lablel_color);
jQuery(this).parents(".MD_box").find(".hh").css("visibility","visible");
}
//alert(c_val);
jQuery("label[for='"+c_val+"']").click();
if(zzz1==1 && zzz2==1)
{
jQuery("#question_Q5a_[loopvar: task]").show();
}
});
/////////////********Fancybox*********////////
jQuery(function(){
jQuery(".fancybox").fancybox({
maxWidth: 1000,
maxHeight:1000,
afterShow: function(){
var jQueryimage = jQuery('.fancybox-image');
// jQueryimage.CloudZoom({zoomPosition:'inside', zoomOffsetX:0});
},
beforeLoad: function(){
var jQueryimage = jQuery('.fancybox-image');
//if (jQueryimage.data('CloudZoom')) jQueryimage.data('CloudZoom').destroy();
},
beforeClose: function(){
var jQueryimage = jQuery('.fancybox-image');
//if (jQueryimage.data('CloudZoom')) jQueryimage.data('CloudZoom').destroy();
}
});
});
}}
</script>
]]></style>
</radio>
<radio
label="Q5a">
<title>Considering only the items above...</title>
<row label="item1">None of these are important to me</row>
<row label="item2">Some of these are important to me</row>
<row label="item3">All of these are important to me</row>
</radio>