Skip to main content

Integrating Fotomoto into an image gallery

Updated

Who?

This document is intended for developers who want to use Fotomoto with their lightbox, gallery, or other library. Some proficiency with JavaScript and HTML is required; you may wish to consult a professional developer if needed.

Why?

Image galleries differ in their function and code; it's not feasible for Fotomoto to build in support for every known library, so we've provided API functions that can be used to add Fotomoto Buy Buttons to any gallery.

How?

Just a few easy steps:

  1. Install the Fotomoto Script in API Mode. Add your Fotomoto Script to your page just above the </body> tag in your HTML, with the API parameter set to true like this:

    <script type="text/javascript" src="//widget.fotomoto.com/stores/script/123abcXXXXXXXX.js?api=true"></script>

  2. Decide where you'll put the Buy Buttons. Add an HTML element with a unique ID, like "FotomotoToolbar", to the page where you want the Buy Buttons to go. Fotomoto will add the Buy Buttons to the container. For example:

    <span id="FotomotoToolbar" class="FotomotoToolbarClass"></span>
  3. Make sure Fotomoto is loaded - please see How to make sure the Fotomoto script is loaded.
  4. Call our API when an image loads. Call our showToolbar() function, passing in the ID of a container element as the first parameter, and the URL of the current image as the second parameter. This will cause the correct Buy Buttons to appear in the designated container from Step 1.
  5. Update the Buy Buttons if the "current" image is changed. If your gallery offers a slideshow, call the updateToolbar() function when the image is changed. Pass in the ID of a container element as the first parameter, and the URL of the "current" image as the second parameter.
  6. Call the API to remove the Buy Buttons. Whenever you are done with the view of the "current" image and want to remove the Buy Button toolbar, call deleteToolbar(), passing in the ID of the container as the only parameter.

Please see our demo to see how the API functions are used, and learn more about our API in Getting Started with the Fotomoto API.

If you need further assistance, feel free to contact Fotomoto Support.

Related articles