Support Center

Integrating Fotomoto into an image gallery

Last Updated: Feb 13, 2019 10:52AM PST


This document is intended for programmers who want to build Fotomoto compatibility into their lightbox, gallery, or other photo library. Requires some proficiency with JavaScript and HTML.


Image galleries are diverse in their appearance and implementation. It's not possible for Fotomoto to support every type of gallery automatically, so we've provided API functions that can be used to add Fotomoto Buy Buttons to any gallery.


Five easy steps:

  1. Install the Fotomoto Script in API Mode. If you're using the WordPress plugin, enable API mode in WordPress Dashboard > Settings > Fotomoto, otherwise add your Fotomoto Script just above the </body> tag with the API parameter set to true like this:
    <script type="text/javascript" src="http://"></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. 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. Note that you can use the fotomoto_loaded() function to first make sure the Fotomoto script is loaded.
  4. Update the Buy Buttons if the "current" image is changed. If your gallery offers the ability for users to navigate between images on the same page, 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.
  5. 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.

Don't find what you are looking for? Try our community discussions.

Announcements View Discussions

Have A Question?

Recent Discussions

Go to Discussion Forums ​​

Track Your Package

Track your FedEx package
Track Your UPS package

powered by