{"id":20660990,"url":"https://github.com/liatemplates/pannellum","last_synced_at":"2026-02-09T15:02:19.872Z","repository":{"id":107256843,"uuid":"148110441","full_name":"LiaTemplates/Pannellum","owner":"LiaTemplates","description":"A template for including pannellum 360 degree images","archived":false,"fork":false,"pushed_at":"2019-11-24T22:45:46.000Z","size":5,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-17T06:02:47.632Z","etag":null,"topics":["liascript","liascript-template","pannellum","panorama","template"],"latest_commit_sha":null,"homepage":"https://liascript.github.io/course/?https://raw.githubusercontent.com/liaTemplates/pannellum/master/README.md","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/LiaTemplates.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-09-10T06:40:25.000Z","updated_at":"2022-02-22T12:43:38.000Z","dependencies_parsed_at":null,"dependency_job_id":"9fa0f0f1-2258-47b2-b179-ebc6ad469396","html_url":"https://github.com/LiaTemplates/Pannellum","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/LiaTemplates/Pannellum","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LiaTemplates%2FPannellum","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LiaTemplates%2FPannellum/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LiaTemplates%2FPannellum/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LiaTemplates%2FPannellum/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/LiaTemplates","download_url":"https://codeload.github.com/LiaTemplates/Pannellum/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LiaTemplates%2FPannellum/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":267345538,"owners_count":24072541,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-07-27T02:00:11.917Z","response_time":82,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["liascript","liascript-template","pannellum","panorama","template"],"created_at":"2024-11-16T19:06:44.420Z","updated_at":"2026-02-09T15:02:19.825Z","avatar_url":"https://github.com/LiaTemplates.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003c!--\nauthor:   Andre Dietrich\nemail:    andre.dietrich@ovgu.de\nversion:  0.1.1\nlanguage: en\nnarrator: US English Female\n\nlogo:     https://cdn.pixabay.com/photo/2010/12/14/11/44/forest-3147_960_720.jpg\n\ncomment:  Template for integrating 360 degree panorama images with the help of\n          pannellum.\n\nlink:     https://pannellum.org/css/style.css\n          https://cdn.pannellum.org/2.4/pannellum.css\n          https://vjs.zencdn.net/7.1.0/video-js.css\n\nscript:   https://cdn.pannellum.org/2.4/pannellum.js\n          https://vjs.zencdn.net/7.1.0/video.js\n          https://pannellum.org/js/videojs-pannellum-plugin.js\n\n@Pannellum.panorama: @Pannellum._panorama_(@uid,@0,{})\n@Pannellum.panoramaWithHotspots: @Pannellum._panorama_(@uid,@0,```@1```)\n@Pannellum.hotspots: @Pannellum._panorama_(@uid,@0, ,true)\n@Pannellum._panorama_\n\u003cdiv id=\"panorama_@0\" style=\"width: 100%; height: 400px;\"\u003e\u003c/div\u003e\n\n\u003cscript\u003e\n  setTimeout(function(e) {\n    let debug = \"@3\";\n    pannellum.viewer('panorama_@0', {\n          \"type\": \"equirectangular\",\n          \"hotSpotDebug\": (debug == \"true\" ? true : false),\n          \"panorama\": \"@1\",\n          \"autoLoad\": true,\n          \"hotSpots\": [@2]\n    });\n  }, 1000);\n\u003c/script\u003e\n@end\n\n@Pannellum.video\n\u003cvideo id=\"@0\" class=\"video-js vjs-default-skin vjs-big-play-centered\"\n  controls preload=\"none\" style=\"width:100%;height:400px;\"\n  crossorigin=\"anonymous\"\u003e\n  \u003csource src=\"@1\" type=\"video/mp4\" /\u003e\n    \u003cp class=\"vjs-no-js\"\u003e\n        To view this video please enable JavaScript, and consider upgrading to\n        a web browser that \u003ca href=\"http://videojs.com/html5-video-support/\"\n        target=\"_blank\"\u003esupports HTML5 video\u003c/a\u003e\n    \u003c/p\u003e\n\u003c/video\u003e\n\n\u003cscript\u003e\nsetTimeout(function(e) {\n  videojs('@0', {\n      plugins: {\n          pannellum: {}\n      }\n  })}, 1000);\n\u003c/script\u003e\n\n@end\n--\u003e\n\n# Pannellum - Template\n\n                         --{{0}}--\nA template for including pannellum 360 degree panorama images into\n[LiaScript](https://liascript.github.io) courses. See the following links for\nfurther information and documentation:\n\n                          {{0-1}}\n* See the pannellum docs [here...](https://pannellum.org)\n* See the Github version of this document\n  [here...](https://github.com/liaTemplates/pannellum)\n* See the LiaScript version of this document\n  [here...](https://liascript.github.io/course/?https://raw.githubusercontent.com/liaTemplates/pannellum/master/README.md)\n\n\n                         --{{1}}--\nThere are three ways to use this template. The easiest way is to use the\n`import` statement and the url of the raw text-file of the master branch or any\nother branch or version. But you can also copy the required functionionality\ndirectly into the header of your Markdown document, see therefor the\n[last slide](#6). And of course, you could also clone this project and change\nit, as you wish.\n\n                           {{1}}\n1. Load the macros via\n\n   `import: https://raw.githubusercontent.com/liaTemplates/pannellum/master/README.md`\n\n2. Copy the definitions into your Project\n\n3. Clone this repository on GitHub\n\n\n## `@Pannellum.panorama`\n\n                         --{{0}}--\nSimply call the macro `@Pannellum.panorama` with the url of the 3D image as the\nonly parameter (in parenthesis).\n\n@Pannellum.panorama(https://pannellum.org/images/cerro-toco-0.jpg)\n\n## `@Pannellum.panoramaWithHotspots`\n\n                         --{{0}}--\nUse `@Pannellum.panoramaWithHotspots`, the url of the 3D image and a JSON list\nof hotspots. You can use the macro code-block notation for this, the content of\nthe is then block is passed as the second parameter. You can use the macro on\nthe next slide to identifier your points of interest.\n\n```json @Pannellum.panoramaWithHotspots(https://pannellum.org/images/bma-1.jpg)\n{\n    \"pitch\": 14.1,\n    \"yaw\": 1.5,\n    \"type\": \"info\",\n    \"text\": \"Baltimore Museum of Art\",\n    \"URL\": \"https://artbma.org/\"\n},\n{\n    \"pitch\": -9.4,\n    \"yaw\": 222.6,\n    \"type\": \"info\",\n    \"text\": \"Art Museum Drive\"\n},\n{\n    \"pitch\": -0.9,\n    \"yaw\": 144.4,\n    \"type\": \"info\",\n    \"text\": \"North Charles Street\"\n}\n```\n\n## `@Pannellum.hotspots`\n\n                         --{{0}}--\nIf you use `@Pannellum.hotspots` (and pass it url of the 3D image as the only\nparameter) and open the developer-console you can click around on your image and\nthe see the positions as console log outputs.\n\n@Pannellum.hotspots(https://pannellum.org/images/bma-1.jpg)\n\n## `@Pannellum.video`\n\n                         --{{0}}--\nIntegrating a video happens similarly, but you will have to pass a unique\nidentifier and then the url of your video.\n\n@Pannellum.video(vidID,https://pannellum.org/images/video/jfk.mp4)\n\n## Implementation\n\n                         --{{0}}--\nExcept of `@Pannellum.video`, all other panorama view macros are parametrized\ncalls of the macro `@Pannellum._panorama_`, which defines a target `div` and a\nscript to be executed. The delay is currently required, to deal with the loading\ndelay of the all CSS and JavaScript files. This will be fixed in the next\nversion of LiaScript.\n\n````html\nlink:     https://pannellum.org/css/style.css\n          https://cdn.pannellum.org/2.4/pannellum.css\n          https://vjs.zencdn.net/7.1.0/video-js.css\n\nscript:   https://cdn.pannellum.org/2.4/pannellum.js\n          https://vjs.zencdn.net/7.1.0/video.js\n          https://pannellum.org/js/videojs-pannellum-plugin.js\n\n@Pannellum.panorama: @Pannellum._panorama_(@uid,@0,{})\n@Pannellum.panoramaWithHotspots: @Pannellum._panorama_(@uid,@0,```@1```)\n@Pannellum.hotspots: @Pannellum._panorama_(@uid,@0, ,true)\n\n@Pannellum._panorama_\n\u003cdiv id=\"panorama_@0\" style=\"width: 100%; height: 400px;\"\u003e\u003c/div\u003e\n\n\u003cscript\u003e\n  setTimeout(function(e) {\n    let debug = \"@3\";\n    pannellum.viewer('panorama_@0', {\n          \"type\": \"equirectangular\",\n          \"hotSpotDebug\": (debug == \"true\" ? true : false),\n          \"panorama\": \"@1\",\n          \"autoLoad\": true,\n          \"hotSpots\": [@2]\n    });\n  }, 1000);\n\u003c/script\u003e\n@end\n\n@Pannellum.video\n\u003cvideo id=\"@0\" class=\"video-js vjs-default-skin vjs-big-play-centered\"\n  controls preload=\"none\" style=\"width:100%;height:400px;\"\n  crossorigin=\"anonymous\"\u003e\n  \u003csource src=\"@1\" type=\"video/mp4\" /\u003e\n    \u003cp class=\"vjs-no-js\"\u003e\n        To view this video please enable JavaScript, and consider upgrading to\n        a web browser that \u003ca href=\"http://videojs.com/html5-video-support/\"\n        target=\"_blank\"\u003esupports HTML5 video\u003c/a\u003e\n    \u003c/p\u003e\n\u003c/video\u003e\n\n\u003cscript\u003e\nsetTimeout(function(e) {\n  videojs('@0', {\n      plugins: {\n          pannellum: {}\n      }\n  })}, 1000);\n\u003c/script\u003e\n\n@end\n````\n\n                         --{{1}}--\nIf you want to minimize loading effort in your LiaScript project, you can also\ncopy this code and paste it into your main comment header, see the code in the\nraw file of this document.\n\n{{1}} https://raw.githubusercontent.com/liaTemplates/pannellum/master/README.md\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fliatemplates%2Fpannellum","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fliatemplates%2Fpannellum","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fliatemplates%2Fpannellum/lists"}