Within the "Global Components" tab of the Widget Design tab, you will see a template set called "Media Lightbox". This is our photo modal that displays as an overlay when you click on a photo item from a particular widget.

We provide the following templates:

Show Media
Styles
Report photo
Overlay
JS Callbacks

Show Media

This template contains the HTML markup with different variables that you can move around (they use handlebars). All front-end mark-up is modifiable.

Information on .products-list element

Our front-end JS targets <ul class="products-list"> and binds specific functions such as next/prev navigation animation, etc. This class is important as it will hold all products related to the photo.

By default, the product carousel functionality will be active regardless of the number of product items within the loop. This means that if you have 1 product being displayed within the lightbox, the user will be able to scroll left and right even if there are no other products.

You can add an attribute called data-min-items to the <ul class="products-list"> in order to deactivate the carousel functionality when there are less than the specified value within the attribute.

Example: <ul class="products-list" data-min-items="1">

Styles

This template contains the out-of-box CSS for the lightbox.

JS Callbacks

<script type="text/javascript">
/*
use this template to refine the callbacks used on the viewer
Uncomment the following lines:
*/
var OlapicCallback = OlapicCallback || {};
OlapicCallback.olapicViewer2AfterRender = function(w, e){
    oQuery.getScript('https://platform.twitter.com/widgets.js', function(){
        // script is now loaded and executed.
        // put your dependent JS here.
    });};
OlapicCallback.olapicViewer2AfterShow = function(w){
    // place your code here
};
OlapicCallback.olapicViewer2AfterClose = function(w){
    // place your code here
};</#{{!}}script>

Following are the list of callbacks available within the photo modal component, and description of each callback functions:

OlapicCallback.olapicViewer2AfterRender
- Runs after the template styles,overlay and callbacks are rendered on the DOM
- Parameter: copy of the viewer's object
OlapicCallback.olapicViewer2AfterShow
- Runs when the viewer is complete (with the media's data) and is ready to be shown (when .show() is executed).
- Parameter: copy of the viewer's object
OlapicCallback.olapicViewer2AfterClose
- Runs after .hide() on the div olapic_viewer_overlay is executed
- Parameter: copy of the viewer's object

Share URL Modification

To change the share URL within the lightbox (the URL that gets sent to the social network to be shared), you can swap out the #{{share_url}} value to have the following convention: http://www.myshop.com/gallerypage#opi#{{id}}

We are passing the value of href attribute to our share box functionality, so you can change this to reflect the actual URL of the gallery you want to share, plus the #opi hash. The #opi hash is utilized by our front-end JS to pop out the viewer with the particular media ID (which can be referenced by using #{{id}} variable).

Before:

<div class="sharing">
    <ul>
        <li>
            <a class="sharing-fb" href="#{{share_url}}?fb_ref=m"><i class="olapic-icon-facebook"></i></a>
        </li>
        <li>
            <a class="sharing-tw" href="#{{share_url}}" title="#{{caption}}"><i class="olapic-icon-twitter"></i></a>
        </li>
        <li>
            <a class="sharing-pi" href="http://pinterest.com/pin/create/button/?url=#{{share_url}}&media=#{{images.normal}}"><i class="olapic-icon-pinterest"></i></a>
        </li>
    </ul>
</div><!-- end sharing -->

After:

<div class="sharing">
  <ul>
    <li>
      <a class="sharing-fb" href="http://www.myshop.com/gallerypage#opi#{{id}}?fb_ref=m"><i class="olapic-icon-facebook"></i></a>
    </li>
    <li>
      <a class="sharing-tw" href="http://www.myshop.com/gallerypage#opi#{{id}}" title="#{{caption}}"><i class="olapic-icon-twitter"></i></a>
    </li>
    <li>
      <a class="sharing-pi" href="http://pinterest.com/pin/create/button/?url=http://www.myshop.com/gallerypage#opi#{{id}}&media=#{{images.normal}}"><i class="olapic-icon-pinterest"></i></a>
    </li>
  </ul>
</div><!-- end sharing -->

Extensive Share URL Modification

In order to make the href value "truly" dynamic (relative to the environment, so no hardcoding), you want to use the callback.

Callback:

//js
OlapicCallback.olapicViewer2AfterShow = function(w){
    // construct new share url
    var newShareUrl = location.protocol + '//' location.hostname + '#opi' + w.data.id;    // replace existing href
    oQuery(".share-wrap a[class^='sharing-']").each(function(e){
        oQuery(this).attr('href',newShareUrl)
    });
};

HTML (notice that the href value stays the same, since it's going to get overridden by the callback):

<div class="sharing">
    <ul>
        <li>
            <a class="sharing-fb" href="#{{share_url}}?fb_ref=m"><i class="olapic-icon-facebook"></i></a>
        </li>
        <li>
            <a class="sharing-tw" href="#{{share_url}}" title="#{{caption}}"><i class="olapic-icon-twitter"></i></a>
        </li>
        <li>
            <a class="sharing-pi" href="http://pinterest.com/pin/create/button/?url=#{{share_url}}&media=#{{images.normal}}"><i class="olapic-icon-pinterest"></i></a>
        </li>
    </ul>
</div><!-- end sharing -->