I'm doing some Optimizely work on a site which uses lightboxes (a jquery version called fancybox).
One of the variations I want to test involves a new image, which when clicked opens a different image in a lightbox.
I've been wrestling with it for a while with no luck.
The problem seems to be a sequencing problem.
My optimizely variation adds the new image (let's call it the button image for clarity). I also add the larger image (lightbox image) and then hide it (just to be sure the image exists and is on the optimizely server).
Nothing. Clicking on the buttonimage simply opens the lightbox image in a new page.
I've also tried inserting a <script> call late in the body of the page via optimizely to manually initialise the fancybox but that failed too. I'm unsure why, unless the document ready was being called before optimizely had finished inserting elements which doesn't match your order of operations (https://help.optimizely.com/hc/en-us/articles/200040335)
Has anyone got any suggestions / help?
I've seen the http://blog.optimizely.com/2013/09/12/how-to-add-a-lightbox-to-an-experiment/ post, but:
a) it means I have to add a heap more code for a new version of a lightbox, when I already have one on the site,
b) it doesn't address the key issue of triggering the lightbox
Solved! Go to Solution.
1. Sounds if the Button already exists and you just change the Image or is this a new functionality on your page?
2. If you add alink which should be handled by the lightbox script, optimizely have to change the link before the lightbox init or you have to init the lightbox again by hand.
4. try to activate the whole jquery code for optimizely (project settings) or remove it alltogether.
Thanks for your response:
1. I'm adding the new image. But that's not causing me any problems.
3. No errors are appearing that I can see.
4. I tried this, but disabling it completely stops all the optimizely code working. Activating all of it doesn't seem to help.
Hey there! Sorry for the delay in response! A couple pointers:
Your 2 last lines of code on Page 1/ Variation 1 can look like this:
$(".cta:eq(0)").replaceWith("<a class=\"expfancybox\" href=\"//cdn.optimizely.com/img/668941824/8dd65036b0db418b9833820b159e90fd.png\"><img src=\"//cdn.optimizely.com/img/668941824/1f9d055e34724c039c4b2486f55c06cf.png\" alt=\"Best Value Shopping Guarantee, Free Shipping, 120 Day Returns\"></a>"); window.jQuery("a.expfancybox").fancybox();
You want to avoid putting a document.ready function the the Global JS because this will hold up the rest of the code from exectuing until after document.ready (which could cause flashing). Instead, I recommend just adding the fancybox() call after you add the fancybox element to the page.
When you add do this, be sure to use window.jQuery instead of $. This will ensure that Optimizely uses your own jQuery version rather than the trimmed version in the Optimziely snippet that does not support the .fancybox action.
Can you let me know if this does the trick for you?