Gallery & slide loader
basicslide loadergallery
Console
PMA.UI version: 2.43.3
Gallery & slide loader example.
gallery_slide.html
1<!doctype >
2<html lang="en">
3
4<head>
5 <meta charset="utf-8">
6 <meta http-equiv="X-UA-Compatible" content="IE=10">
7 <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
8
9 <!-- Include PMA.UI required libraries downloaded or from CDN -->
10 <script src="./pma.ui/jquery-3.1.0.js"></script>
11 <link href="./pma.ui/font-awesome.min.css" type="text/css" rel="stylesheet">
12
13 <!-- Include PMA.UI script & css -->
14 <script src="./pma.ui/pma.ui.js"></script>
15 <link href="./pma.ui/pma.ui.css" type="text/css" rel="stylesheet">
16
17 <!-- Include custom script & css -->
18 <script src="./js/gallery_slide.js"></script>
19 <link href="./css/gallery_slide.css" type="text/css" rel="stylesheet">
20
21 <title>Gallery & slide loader</title>
22</head>
23
24<body>
25 <!-- The element that will host the gallery -->
26 <div id="gallery"></div>
27
28 <!-- The element that will host the slide loader -->
29 <div id="viewer"></div>
30</body>
31
32</html>gallery_slide.css
1html,
2body
3{
4 height: 100%;
5 padding: 0px;
6 margin: 0px;
7}
8
9#gallery
10{
11 width: 100%;
12}
13
14#viewer
15{
16 height: calc(100vh - 137px);
17 width: 100%;
18}
gallery_slide.js
1// Initial declarations
2var serverUrl = "https://host.pathomation.com/pma.core.2/";
3var serverUsername = "PMA_UI_demo";
4var serverPassword = "PMA_UI_demo";
5var galleryElementSelector = "#gallery";
6var slideLoaderElementSelector = "#viewer";
7var caller = "DemoPortal";
8var galleryMode = "horizontal";
9var directoryPath = "Reference/3DHistech";
10var thumbnailWidth = 150;
11var thumbnailHeight = 100;
12
13jQuery(function () {
14 console.log(`PMA.UI version: ${PMA.UI.getVersion()}`);
15
16 // Create a context
17 var context = new PMA.UI.Components.Context({ caller: caller });
18
19 // Add an autologin authentication provider
20 new PMA.UI.Authentication.AutoLogin(context, [{ serverUrl: serverUrl, username: serverUsername, password: serverPassword }]);
21
22 // Create a tree view that will display the contents of PMA.core servers
23 var gallery = new PMA.UI.Components.Gallery(context, {
24 element: galleryElementSelector,
25 thumbnailWidth: thumbnailWidth,
26 thumbnailHeight: thumbnailHeight,
27 mode: galleryMode,
28 });
29
30 // Create an image loader that will allow us to load images easily
31 var slideLoader = new PMA.UI.Components.SlideLoader(context, {
32 element: slideLoaderElementSelector,
33 });
34
35 // Load the contents of a directory
36 gallery.loadDirectory(serverUrl, directoryPath);
37
38 // Listen for the slide selected event by the gallery
39 gallery.listen(PMA.UI.Components.Events.SlideSelected, function (args) {
40 console.log("Slide selected");
41 console.log(args);
42 // Load the image selected from treeview
43 slideLoader.load(serverUrl, args.path);
44 });
45
46 // Listen for the slide deselected event by the gallery
47 gallery.listen(PMA.UI.Components.Events.SlideDeSelected, function (args) {
48 console.log("Slide deselected");
49 console.log(args);
50 // Clear slide loader
51 slideLoader.load(serverUrl, null);
52 });
53
54 // Listen for the slide loaded event by the slide loader
55 slideLoader.listen(PMA.UI.Components.Events.SlideLoaded, function (args) {
56 console.log("Slide loaded");
57 console.log(args);
58 });
59
60 // Listen for the slide info error event by slide loader
61 slideLoader.listen(PMA.UI.Components.Events.SlideInfoError, function (args) {
62 console.log("Slide info error");
63 console.log(args);
64 });
65});