Find more Examples here

Lightbox image gallery (Map-API)

Version reduced to minimal set of HTML Read Example Description


This examples demonstrates how the outdooractive LightBox API may be used to add a tour’s image gallery to a web page if you just have the id of the tour. Just add the following html link and image node to your html if you want to place a thumbnail of the tour’s first image on to your page and to start the lightbox by clicking:

<a href=";" title="Click on Thumbnail to open Lightbox">
  <div style="width:236px;height:134px;border:1px solid #aaa;background-color: #fafafa;">
    <img id="thumbnail" src=""></img>

Executing “;” opens the lightbox with the tour’s images and is put into the link tag here.

As the outdooractive Data API supports jsonp it is easy to load a tour’s primary image id with one single request. The following function is used as callback. It picks the image id out of the json response, creates a thumbnail url to the image and puts the url into the image tags “src” attribute: The outdooractive javascript API supports loading data of a single OOI. This makes it easy to load a tour’s primary image id, to create a thumbnail url to the image out of it and to put this url into an image tag’s “src” attribute:

var id = '1555565';

new oa.api.SingleOOI( id ).load( function ( ooi, geom ) {

    var url = "" + + "/.jpg"

    document.getElementById("thumbnail").setAttribute("src", url);

var lightbox = new oa.api.Lightbox( { init_value : id } );