I need help making a popup menu activate a customized lightbox for a digital magazine/publication.

Question

I'm not much of a programmer since my experience is in animation, but I need to make a popup window link to/activate a lightbox. I did well just to get the button to make the popup work since I have no programming experience! So now, on to something a little more complex for me! A button is basically supposed to bring up a menu (which I got to work) and the menu is supposed to have links that the user can click on to open up a lightbox similar to the one that opens up on the first click of this example: http://viewer.zmags.com/publication/e9dd9178?viewType=pubPreview#/e9dd9178/1
These were the instructions I was given, but I'm not sure where to even place this code! Please help!
For example for Brides/Target this looks like this:
if (window.location.host.indexOf("brides.com") !== -1) { 
            document.domain = "brides.com";
        $('.productImages1').click(function() {   
            openLightbox("http://www.target.com/p/riedel-vivant-champagne-flutes-set-of-4/-/A-10077709#prodSlot=medi um_1_1&term=200-03-1024?ref=tgt_adv_XC&afid=d_brides&cpng=2013weddingregistry&DFA=1");   
            trackEvent("show", {page: 19, id: 'A-10077709', name: 'riedel-vivant-champagne-flutes-set-of-4'});    //_gaq.push(['_trackEvent', 'Target Advertisment', 'Show', 'Page 19 - item 1']); });

Answer 1

I was also given this information, but since I can't really read or write code, this means nothing to me. Is this something I can paste in the stages action panel or on the actual buttons that I'm wanting to call up the lightboxes? I like Edge because it seems to be easy and user friendly for creative/non-programmers like myself, but this is getting a bit complex for me. How can I go about this without having to code HTML5 from scratch?
In the header of the HMTL file, you'll need to add a reference to the Zmags API.
Example in Header
<script src="//secure.api.viewer.zmags.com/widgets/iframe.js" type="text/javascript"></script>
Example with Javascript section:
<script type="text/javascript">  // Opens the specified url in a lightbox, and applies the supplied css to it, if any; otherwising defaulting to the // standard width and height for the lightbox. To explicitly close the lightbox, call close() on the returned lightbox. function openLightbox(url, css) { return window.parent.parent.com.zmags.ps.widget.openLightbox(url, css || {"width": "100%", "max-width": 1010, "height": 780}); } // Shares the specified url on the given network, with optional title and image. This will automatically trigger // tracking of the shared url, so no need to do so here. function shareUrl(network, url, image, title) { return window.parent.parent.com.zmags.ps.widget.sharing.shareUrl('widget', network, url, title || 'Check out this product from Target', image); } // Tracks the logical action, e.g. "show", "overview" event, with the supplied arguments. The actual event action/label // formatting is handled by the Zavior configuration, and can have values injected, like if "args" = {page: 7, name: 'foo', id: 'bar', item: 1}, // a configured label can utilise these data like "${page}" and "${item}". function trackEvent(action, args) { if (!args) { args = {}; } return window.parent.parent.com.zmags.ps.widget.trackEvent("google_analytics", action, args); } if (window.location.host.indexOf("brides.com") !== -1) { document.domain = "brides.com"; } $('.productImages1').click(function() { openLightbox("http://www.target.com/p/giada-de-laurentiis-for-target-6-qt-cast-iron-dutch-oven/-/A-11992 552#prodSlot=medium_1_1&term=11992552?ref=tgt_adv_XC&afid=d_brides&cpng=2013weddingregistr y&DFA=1"); trackEvent("show", {page: 8, id: 'A-11992552', name: 'giada-de-laurentiis-for-target-6-qt-cast-iron-dutch-oven'}); //_gaq.push(['_trackEvent', 'Target Advertisment', 'Show', 'Page 8 - item 1']); }); $('#activateBtn').click(function() { document.getElementById('activateBtn').style.visibility = 'hidden'; //trackEvent("overview", {page: 8}); $('#big_wrapper').animate({ left: '+=100%' }, 1000, function() { //do nothing }); }); $('#deactivateBtn').click(function() { $('#big_wrapper').animate({ left: '-=100%' }, 1000, function() { document.getElementById('activateBtn').style.visibility = 'visible'; }); }); </script>