+1-415-501-9156 (USA) • +44-151-808-0440 (Europe) • +972-522-341-957 (Israel) Contact/Chat

Making Flare Popouts work in Zendesk

There are occasions where you need to add some code to Zendesk for the Flare image popups (lightbox), in addition to the Javascript files you have added already from your Flare deliverables. If you have this problem, please follow these instructions:

  1. From the Zendesk Help Center menu, select General > Customize design.
    The Theme sidebar appears.
  2. Click Edit theme
    The Theme editor appears. 
  3. From the page option, select Footer
  4. You need to add the text below to the footer, after your existing code.
  5. Once added, click Save and Publish to activate the code. 

This is the code you need to copy:

<script type="text/javascript">
$('.MCPopupThumbnailLink').click(function(e) {
console.log('e', e)
e.preventDefault();

var al = e;
var am = this;
var ah = 'click';
var ag = 10;
var ab = 1;
var X = 10;
var N = $(am).children("img")[0];
var aa = parseInt(MadCap.Dom.Dataset(N, "mcWidth"));
var U = parseInt(MadCap.Dom.Dataset(N, "mcHeight"));
var J = U / aa;
var aj = document.documentElement.clientWidth - ((ag + ab + X) * 2);
var af = document.documentElement.clientHeight - ((ag + ab + X) * 2);
if (U > af) {
U = af;
aa = U / J
}
if (aa > aj) {
aa = aj;
U = aa * J
}
var P = new MadCap.Utilities.Url(document.location.href);
var ak = $(N).offset().top;
var ao = $(N).offset().left;
var ar = MadCap.Dom.GetAttribute(am, "href");
var ae = MadCap.Dom.GetAttribute(am, "data-mc-popup-alt");
var Z = U + ((ab + X) * 2);
var W = aa + ((ab + X) * 2);
var V = (ak + (N.offsetHeight / 2)) - (Z / 2);
var R = (ao + (N.offsetWidth / 2)) - (W / 2);
var Q = MadCap.Dom.GetScrollPosition();
var ac = Q.Y;
var L = ac + document.documentElement.clientHeight;
var an = Q.X;
var K = an + document.documentElement.clientWidth;
var S = ac + ag;
var ad = an + ag;
var T = L - ag;
var M = K - ag;
if (V < S) {
V = S
}
if (R < ad) {
R = ad
}
if (V + Z > T) {
V = T - Z
}
if (R + W > M) {
R = M - W
}
var O = $("<div></div>");
O.addClass("MCPopupContainer");
var ai = document.createElement("img");
$(ai).addClass("MCPopupFullImage");
ai.setAttribute("src", ar);
ai.setAttribute("alt", ae);
ai.setAttribute("tabindex", "0");
O.bind(ah, function() {
MadCap.DEBUG.Log.AddLine(ah);
O.animate({
top: aq,
left: Y
}, 200, function() {
O.remove()
});
$(ai).animate({
width: N.offsetWidth,
height: N.offsetHeight
}, 200);
$(ap).animate({
opacity: 0
}, 200, function() {
MadCap.TextEffects.RemoveBackgroundTint()
})
});
O.bind("keydown", function(at) {
var at = at || window.event;
if (at.keyCode != 27 && at.keyCode != 13) {
return
}
O.remove();
MadCap.TextEffects.RemoveBackgroundTint()
});
O.append(ai);
document.body.appendChild(O[0]);
var aq = ak - (ab + X);
var Y = ao - (ab + X);
if (MadCap.IsIBooks()) {
$idealContainer = $(am).parentsUntil("body").last();
aa = $idealContainer[0].offsetWidth * 0.9;
U = aa * J;
R = $idealContainer.offset().left;
O.css({
top: aq,
left: Y
}).animate({
top: V,
left: R,
width: aa,
height: U
}, 200)
} else {
O.css({
top: aq,
left: Y
}).animate({
top: V,
left: R
}, 200)
}
$(ai).css({
width: N.offsetWidth,
height: N.offsetHeight
}).animate({
width: aa,
height: U
}, 200);
var ap = MadCap.TextEffects.AddBackgroundTint(null, document.body);
$(ap).animate({
opacity: 0.5
}, 200);
ai.focus()
});
</script>

Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request

0 Comments

Please sign in to leave a comment.