Fancybox jQuery plugin available - here .
Getting Our Plugin
The first thing you want to do is download and unzip the Fancybox download. Once done, navigate to the 'source' folder, which should look like this. I went ahead and highlighted the files we will transfer to your Help Center Assets area.
Adding The Source Files To Help Center
Next, we will want to log in to Help Center and access our theme's asset directory. Start by clicking "Customize Design" on the pane you see once you log in. Then click "edit theme" in the sidebar that loads.
Finally, navigate to the assets tab, then drag and drop the files highlighted in the first image to the drop area. Remember to copy the links provided for both the .css and the .js files
Getting Help Center Acquainted With Fancybox
There is still a bit more setup. The first thing we need to do is tell your help center that is should load the fancybox source and css stylesheet. To do that, we will move from "Assets" to the tab on the left. Click it, then select "Document Head" from the dropdown. We need to add two lines to this section.
<link href="Link_Provided_For_CSS_Document" type="text/css" rel="stylesheet" />
The first line tells Zendesk Support to use the appropriate stylesheet for modal images, the second line imports the fancybox source so we can use it in our pages. Remember to replace the placeholders here with the links you copied previously.
The Last thing we need to do is let the browser know where to look for images we want to use with our lightbox. Click on "JS" next to document head and add the below code on the very last line.
Tying Everything Together
We should be all set at this point. The last thing we need is our image files. Place all the image files you would like to use with your fancybox plugin into the same Asset area we added our source files to. Copy the links we provide for the image somewhere were you can get at them easily and try to label them if your photo filenames are not memorable.
We can put our images anywhere, but this tutorial will show you how to add them to articles. Start by creating a new article wherever you like. For this part we can add an image to a new article (using a thumbnail of the image you want to use in the modal window is ideal). Then, after adding the image, highlight it and click the link button, replacing any text provided with the entire link for your full size image (i.e. //p1.zdassets.com/hc/theme_assets/413487/200013043/Y7.png).
Once you link the image to the full size version, go ahead and click the show/hide HTML button. You should see something like what you see below.
Except, we need to add - class="fancybox" - to the anchor tag. This is what the plugin will see to know that the linked image should open in a modal window.
The Big Picture
Go ahead and click update once you add the special class, then click the thumbnail. You should see your image in a modal window (fancybox/lightbox).