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="javascript:lightbox.show();" 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>
</div>
</a>
Executing “lightbox.show();” 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 = "http://img.oastatic.com/img/236/134/fit/" + ooi.data.primaryImage.id + "/.jpg"
document.getElementById("thumbnail").setAttribute("src", url);
});
var lightbox = new oa.api.Lightbox( { init_value : id } );