Tutorial: Gallery & Image Loader

Gallery & Image Loader

Note how the context component is shared among the components and, via the auto login provider, handles authentication so that the rest of the components do not have to manage sessionIDs themselves. The gallery can be created in "horizontal", "verical" or "grid" mode
    <!-- include PMA.UI script & css -->
    <script src="pma.ui.js" type="text/javascript"></script>
    <link href="pma.ui.css" type="text/css" rel="stylesheet">
    <!-- the element that will host the gallery -->
    <div id="gallery"></div>

    <!-- the element that will host the viewport -->
    <div id="viewer" style="height: 500px"></div>

    <script type="text/javascript">
        console.log("PMA.UI loaded: " + PMA.UI.getVersion());

        // create a context
        var context = new PMA.UI.Components.Context({ caller: "PMA.UI demo" });

        // add an autologin authentication provider
        new PMA.UI.Authentication.AutoLogin(context, [{ serverUrl: "https://host.pathomation.com/pma.core.2/", username: "PMA_UI_demo", password: "PMA_UI_demo" }]);

        // create an image loader that will allow us to load images easily
        var slideLoader = new PMA.UI.Components.SlideLoader(context, {
            element: "#viewer",
            theme: PMA.UI.View.Themes.Default,
            overview: {
                collapsed: false
            // the channel selector is only displayed for images that have multiple channels
            channels: {
                collapsed: false
            // the barcode is only displayed if the image actually contains one
            barcode: {
                collapsed: false,
                rotation: 180
            loadingBar: true,
            snapshot: true,
            annotations: {
                visible: true,
                labels: true,
                imageBaseUrl: "https://host.pathomation.com/pma.view/Content/themes/base/Images/",
                imageScale: 0.5
            digitalZoomLevels: 2,
            scaleLine: true,
            filename: true

        // create a gallery that will display the contents of a directory
        var gallery = new PMA.UI.Components.Gallery(context, {
            element: "#gallery",
            thumbnailWidth: 200,
            thumbnailHeight: 150,
            mode: "horizontal",
            showFileName: true,
            showBarcode: true,
            barcodeRotation: 180,
            filenameCallback: function (path) {
                // show the filename without extension
                return path.split('/').pop().split('.')[0];
            additionalHtmlCallback: function (path) {
                return "<strong>PMA.UI rocks!</strong>";

        // load the contents of a directory
        gallery.loadDirectory("https://host.pathomation.com/pma.core.2/", "Reference/3DHistech");

        // listen for the slide selected event to load the selected image when clicked
        gallery.listen(PMA.UI.Components.Events.SlideSelected, function (args) {
            // load the image with the image loader
            slideLoader.load(args.serverUrl, args.path);

Click on an image