Picturae Webkitchen - Webexpo

Webexpo - Getting Started

To add the webexposition to your website you need to perform the following steps

Javascript & CSS

Include the default javascript and css

<script type="text/javascript" src="https://webservices.picturae.com/exposition/dist/js/expo.min.js"></script>
<script src="http://images.memorix.nl/topviewer/1.0/src/topviewer.compressed.js" type="text/javascript"></script>
<link rel="stylesheet" href="https://webservices.picturae.com/exposition/dist/css/webexpo.css">

HTML

You need an html element with an identifier example:

<div id="pic-expo" ></div>

Instantiate exposition

As last step we need to instantiate the exposition application we can do this as following:

<script>
    new picturaeWebkitchenExposition({
        el: '#pic-expo', // Required html element to attach to
        url: 'https://webservices.picturae.com/exposition/', // Required exposition api url
        apiKey: 'ecbd576d-d5e0-4a76-b917-63c584206be4', // Required exposition api key
        animated: false, // Add exposition-animated class to the element (only works for page in entire screen not embedded)
        pagination: {
            // rows: 20 // Optional amount of expositions to show per page
        },
        mediabank: {
            'url': 'https://webservices.picturae.com/mediabank/', // Required mediabank url
            apiKey: '84fb6dde-1718-11e4-abe0-fff30396f5b7' // Required mediabank api key
        }
    });
</script>

Height detail exposition

To change the height of the exposition detail view you need to override the css.

#picturae-webexpo-container .webexpo-scroll {
    height: 1000px;
}