{"_id":"openseadragon-opacity-slider","_rev":"4-2bba82d4a9c912f7a8443233772e570a","name":"openseadragon-opacity-slider","dist-tags":{"latest":"1.0.0"},"versions":{"0.0.1":{"name":"openseadragon-opacity-slider","version":"0.0.1","description":"This plugin adds to OpenSeaDragon the functionality to adjust the transparency of superimposed images in the GUI, as well as to adjust their order.","main":"src/plugin.js","repository":{"type":"git","url":"git+https://github.com/WasMachenSachen/openseadragon-opacity-slider.git"},"keywords":["openseadragon"],"author":"Tim Loges, Benedikt Engel, Chris Toth, Marius Scherff","license":"BSD-3-Clause","bugs":{"url":"https://github.com/WasMachenSachen/openseadragon-opacity-slider/issues"},"homepage":"https://github.com/WasMachenSachen/openseadragon-opacity-slider#readme","devDependencies":{"vite":"^2.8.6"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","dev":"vite","build":"vite build","preview":"vite preview"},"_id":"openseadragon-opacity-slider@0.0.1","_integrity":"sha512-FCfgAcP53uxjQ8Ypu3yt5Xk75PHrRlDmkSF3kgsEVP39pcLCFtRME/Au5jdZTT3cVL8g70hotYNvApd8CHleJA==","_resolved":"/Users/timloges/git/openseadragon-opacity-slider/openseadragon-opacity-slider-0.0.1.tgz","_from":"file:openseadragon-opacity-slider-0.0.1.tgz","_nodeVersion":"16.13.1","_npmVersion":"8.1.2","dist":{"integrity":"sha512-FCfgAcP53uxjQ8Ypu3yt5Xk75PHrRlDmkSF3kgsEVP39pcLCFtRME/Au5jdZTT3cVL8g70hotYNvApd8CHleJA==","shasum":"ce8bf371a1fd0b2a4488c3ec13d1008bbb34eecd","tarball":"https://registry.npmjs.org/openseadragon-opacity-slider/-/openseadragon-opacity-slider-0.0.1.tgz","fileCount":11,"unpackedSize":5267595,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiKbh+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqGdw/+Ny9YIu5IXiAYbcki5toZ1CdipPb6rE3dck3uu5bg0f8cQWnT\r\n9NYpXQqjgDTVsPk4UOhL+TGQJhbHjBewlchEyyH7wWnV5FdQi67REKCNX/wl\r\nOKfrhknIuH+s8ZptauVDJ2OzVc+u/+V7xPzVQ7gRy3DcjCDyJPtux0uE8E6j\r\nYkQ5UOeEkN7/bLt/PjXWYu9SXB7AzgfEYG1khel/ovgql0TbonOpVJEThX57\r\n3b6Gt164BDAyKqcDoIp6XZuC8MQYrBzuYgTAytrP4faTWqHlbTXrlvyOI07+\r\niS2oYajBumtuhrabX/7J5JT3g0qgsZ2elWPiRAO46xg9cxI6wgZKSyWzReug\r\nu0TrdJXpZghzYUxJ0DUGGqNvTtAcmr5ZvI1LZZcQiTrNExUdzgQCg5apkZdH\r\n9TXhVPV+iBeSfukS2IEwKw0DKTl2pN/InL4Tv+Yx2QmnuOCgSByZW9CUKAf6\r\nJL+rftC9eOc4I4GsFtTl4w2KQZdLRmEDyd1Tpt5oO0TofZ6//DsS+bjCMTel\r\nNaHmX4qSukvUZVYBXtwMP2WQIBNXFH0T3NEUjr3T05XTAxKPaW5vi4KDThhQ\r\nJCJqPLMBu4Hd6NrmooL7ASBbyFSUjuP8kksaV/66wQCuDln22ZWPV0Ux69wT\r\nUtItnEu2xCQ9CCitQnpylNFpQiaSZZBdYK0=\r\n=Ka/N\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD7rkebE8TdU41SCiiwLhvxDtpLMWrRqa9ckJbeEKFiywIgKYG9OILynibPKzTFIU4zaw2f3ArIxJ/iWU0MRWYiPbQ="}]},"_npmUser":{"name":"timloges","email":"github@timloges.de"},"directories":{},"maintainers":[{"name":"timloges","email":"github@timloges.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/openseadragon-opacity-slider_0.0.1_1646901373913_0.3075092418301537"},"_hasShrinkwrap":false},"0.0.2":{"name":"openseadragon-opacity-slider","version":"0.0.2","description":"This plugin adds to OpenSeaDragon the functionality to adjust the transparency of superimposed images in the GUI, as well as to adjust their order.","main":"src/plugin.js","repository":{"type":"git","url":"git+https://github.com/WasMachenSachen/openseadragon-opacity-slider.git"},"keywords":["openseadragon"],"author":"Tim Loges, Benedikt Engel, Chris Toth, Marius Scherff","license":"BSD-3-Clause","bugs":{"url":"https://github.com/WasMachenSachen/openseadragon-opacity-slider/issues"},"homepage":"https://github.com/WasMachenSachen/openseadragon-opacity-slider#readme","devDependencies":{"vite":"^2.8.6"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","dev":"vite","build":"vite build","build-gh-pages":"vite build --c vite.config.gh-pages.js","preview":"vite preview"},"_id":"openseadragon-opacity-slider@0.0.2","_integrity":"sha512-4+q1YHy+s0pmKQW6/rMWUElxO/V+cgba58nDzeYtENZ6H2ZjhVtnOdw3NR6NVjmaNOMlHjknDKFdJDI+aPP50A==","_resolved":"/Users/timloges/git/openseadragon-opacity-slider/openseadragon-opacity-slider-0.0.2.tgz","_from":"file:openseadragon-opacity-slider-0.0.2.tgz","_nodeVersion":"16.13.1","_npmVersion":"8.1.2","dist":{"integrity":"sha512-4+q1YHy+s0pmKQW6/rMWUElxO/V+cgba58nDzeYtENZ6H2ZjhVtnOdw3NR6NVjmaNOMlHjknDKFdJDI+aPP50A==","shasum":"000021b536f02781dbc26a71a93b9fa3e8450c1d","tarball":"https://registry.npmjs.org/openseadragon-opacity-slider/-/openseadragon-opacity-slider-0.0.2.tgz","fileCount":18,"unpackedSize":14896920,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiMGGpACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpTJQ//ecB/vtXHtzG8tU/d+eG+3KhKsOg1agK7F5JJEcj73TNr1H7h\r\nLzqu7bP8vZ7UFN2OvMC+Ej+mfmA8GQqMLmakpEUuY+ryaGws5IQnugOSbG2O\r\n3223zI+OfjKNi3Z87O7CuYImKr+9z9kU9AwJmvtcEXhZE5R51NOFf0FBMODg\r\n7nbDbR/9GfTwmKf0X7RmdqjWFIQy97rLKqHC4PVIoLxo2tzRCMZK2Lun7wyP\r\nxR/Bnt4w/4DMwMFHI41U5Xg1/vt/4bG86J62imZXSa1OlvsDvhPslqv+rfn8\r\n808YKyIqyBrem2pOrVik7DTiuc1gVDfio1Rx3FIvx1FBUuSuTLPod/sfwQl7\r\nmpu6VAP7ON0DQL3uemyK+TCTYkmdkf6WV0yiVQEFpm0uw9fP1+Yf7cFgsBii\r\nFCG0l2fBsdv57pR2o0W/jRy9S9KEPKkbp78xQAbn3PiqnCS/BN5bG1/I03Nm\r\nnJhDO8sX6NYTWFFQ0lkwJHLWadW8L7/2GCzthbrVQoqTsSfVZqmyFxm6fpZz\r\nsMYSEoKZEEAcGsfMaDZlaK0UllqhVN+0bXVumkm8ScSaPS9tfy4xegRV5oZF\r\nsIPY4HclBanmaWyzCXI5z+/JcWSda16OW41jyWxXOKrlfiPaXTbseLe10r+5\r\nGkHzRGHenRMh+TLg5NMVO/D5tABzK2h0R+g=\r\n=WUoM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGTQcY9oH07CKv/GYo/bPWpavl9A+OIZppSzBjkWd0o3AiEAgPFo8SQbiMaA4w+AXukAXjNtHxkFzCji/AaDJsJKZBo="}]},"_npmUser":{"name":"timloges","email":"github@timloges.de"},"directories":{},"maintainers":[{"name":"timloges","email":"github@timloges.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/openseadragon-opacity-slider_0.0.2_1647337897046_0.6544091120980133"},"_hasShrinkwrap":false},"0.0.3":{"name":"openseadragon-opacity-slider","version":"0.0.3","description":"This plugin adds to OpenSeaDragon the functionality to adjust the transparency of superimposed images in the GUI, as well as to adjust their order.","main":"src/plugin.js","repository":{"type":"git","url":"git+https://github.com/WasMachenSachen/openseadragon-opacity-slider.git"},"keywords":["openseadragon"],"author":"Tim Loges, Benedikt Engel, Chris Toth, Marius Scherff","license":"BSD-3-Clause","bugs":{"url":"https://github.com/WasMachenSachen/openseadragon-opacity-slider/issues"},"homepage":"https://github.com/WasMachenSachen/openseadragon-opacity-slider#readme","devDependencies":{"vite":"^2.8.6"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","dev":"vite","build":"vite build","build-gh-pages":"vite build --c vite.config.gh-pages.js","preview":"vite preview"},"_id":"openseadragon-opacity-slider@0.0.3","_integrity":"sha512-olIBbwG7nFbuM0xIoUuQb4sfhL3w8JIaXtICczEcUT/+m4vf0eMffgnRcg8/TyCjzcqe25Y7i6HoZQtHGgnagA==","_resolved":"/Users/timloges/git/openseadragon-opacity-slider/openseadragon-opacity-slider-0.0.3.tgz","_from":"file:openseadragon-opacity-slider-0.0.3.tgz","_nodeVersion":"16.13.1","_npmVersion":"8.1.2","dist":{"integrity":"sha512-olIBbwG7nFbuM0xIoUuQb4sfhL3w8JIaXtICczEcUT/+m4vf0eMffgnRcg8/TyCjzcqe25Y7i6HoZQtHGgnagA==","shasum":"64b84a171b96f1e9703cbdec180c794c55dea3b0","tarball":"https://registry.npmjs.org/openseadragon-opacity-slider/-/openseadragon-opacity-slider-0.0.3.tgz","fileCount":15,"unpackedSize":84116,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiNGvaACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoPPhAAkBxFcuqO0OHJRz3OqPIwQmUDKr2CUxj9PAKsE8v4yQy7RyHO\r\nC4vfw1rMJYFzH6ga7jCs4NzdLcSZelhEax/+VeEaD/AYki6fG9xGFE6Shx5I\r\n6B0kn9awUiIkKJ+V8hZM2QHFgIWNShwDWVDtCZY1HsXULJuoU6HoNJnUZOmf\r\ni+jD7rk7a4ml+k3/wINstUM7DOEcjpT3n5LWO2M5xtfBvstIwSME+DuDSTwM\r\nfioQyVEj0VdZ0nEJnO/rWE0wh1M7j6gs3/Hh1EL385x1e8ZvvQd4re2Rv6q2\r\n8jE0lVB8oYSKsx2dCtcnuvnA3te3sZDYbVMTuRgsbHBEwv3z8MZwrQoYbJlq\r\n6ByjpbQJ8Uq6FffVAKu+XZ6cLOr5HYvARLS5x/0tNGMDTxH+bVPpZgbsIxcY\r\naH0ieoidzVR8oJw795oP5/8+OAL9OrSP4VAU2r2m4j9nfJiQlDCaDusJSxv8\r\nCazFGYBGP97PIcO/Iwp0MJp0MDeCMUelJhQ5xrdnp7S4K013/KLfBMBNtwqv\r\nuwdhvouGcy9ukh7qp/3dlFbb6mGiXuYC+Sz4JBozy/sEse7Mki3Rz0I6vZy4\r\nQmVvX8tyZpZFk3IjYUdsXPwI/su8JBP1pZsdsigI/4dAeRqAazRqNZsQF9xg\r\n3BmcMtaI6Cpv+4bH8cdRTXiLyTryzHb+xsk=\r\n=yIEl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAqmnrAfyKpCgPaBpR5oS5LH9ippa2I6RMjmWzqcIFdbAiEA26+Ezqo9Vc1A/jWIURkaHQKrY4Vlkbf+TsoTycxO6JI="}]},"_npmUser":{"name":"timloges","email":"github@timloges.de"},"directories":{},"maintainers":[{"name":"timloges","email":"github@timloges.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/openseadragon-opacity-slider_0.0.3_1647602650559_0.366672921241491"},"_hasShrinkwrap":false},"1.0.0":{"name":"openseadragon-opacity-slider","version":"1.0.0","description":"This plugin adds to OpenSeaDragon the functionality to adjust the transparency of superimposed images in the GUI, as well as to adjust their order.","main":"src/plugin.js","repository":{"type":"git","url":"git+https://github.com/WasMachenSachen/openseadragon-opacity-slider.git"},"keywords":["openseadragon"],"author":"Tim Loges, Benedikt Engel, Chris Toth, Marius Scherff","license":"BSD-3-Clause","bugs":{"url":"https://github.com/WasMachenSachen/openseadragon-opacity-slider/issues"},"homepage":"https://github.com/WasMachenSachen/openseadragon-opacity-slider#readme","devDependencies":{"vite":"2.8.6"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","dev":"vite","build":"vite build","build-gh-pages":"vite build --c vite.config.gh-pages.js","preview":"vite preview"},"_id":"openseadragon-opacity-slider@1.0.0","_integrity":"sha512-7uuT8QdWqHiFCulqu0T5x6mm5/DoImJ81oQoqIjixQ69mypL16j97eO7Y5Swbii1bwqr4WSUXJQwJ+nfX/HAHA==","_resolved":"/Users/timloges/git/openseadragon-opacity-slider/openseadragon-opacity-slider-1.0.0.tgz","_from":"file:openseadragon-opacity-slider-1.0.0.tgz","_nodeVersion":"16.13.1","_npmVersion":"8.1.2","dist":{"integrity":"sha512-7uuT8QdWqHiFCulqu0T5x6mm5/DoImJ81oQoqIjixQ69mypL16j97eO7Y5Swbii1bwqr4WSUXJQwJ+nfX/HAHA==","shasum":"6a94c4d494301478178fa5d1d9f3ba0853756186","tarball":"https://registry.npmjs.org/openseadragon-opacity-slider/-/openseadragon-opacity-slider-1.0.0.tgz","fileCount":15,"unpackedSize":86761,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQClerHrRgT0Kfge6Hgm3ZRHLAWFXBtOfeHT3JunBi4BLgIhAOS9w4FMo7yAtjrhjDieHC5dypoJRhSltjNV3WD6x7n6"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiTZb7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqsQw//VwhZcTuNoRoJvFAIqUj1MW4HCFJ/ankaSjy+SiykK8ccP6V3\r\nTgiPoDhRL1RGgP7xmLxuUqhdxtcXWplAarS6HD8Y/N9Tg5DEzqX+qhm193DV\r\nwGQz0zO3PlRpShfsEEhnTIa9ZrWzCZrV5VLv65V8/LNI96XJrs/CYnnIbi7+\r\nAvtEHeZvlzVhXa49jeCFdMPO/NybxmGKHG9R9cS74ULwWgZ6YXwlSnVMNmRU\r\nmmhDZoJU2wh0KBmJmAEjbja44qz/pC/pJoaVQxOa3Gw1gwE59b/jOCLRFPzO\r\nmFW5aPDbfAwCN8ZttkxdsGhqgXJOP4VHUPULfuc0+DoMWvKhZThRcHpHn4Ye\r\ngg3K+eoZ+BVUnlou6wKjIR9foGpzuBNmQ+4E48Pj5fyKRY2I4HwnLfqp9fIr\r\nSV4D4c6QBtY4v8VaKZNb8+50l3LPmsOogj9P07aLKXDPAByBMxsYh88gv1Da\r\nEoWQ+lQxnRjMRxtxs7AfZo+VKpBv2FbA6Nhsh7gMvaB4Q3lnWrsPEqXXPShn\r\n87cWcGUb3Jz9ckqY07rLovhEPeOhz9ARzeo8kzZ8uNym2sxvNZaUSQnVObpw\r\n5LhroUKwHJKHmlNvugdSIxL7rtdiFCN3WR1YBSPFGOt57nrx3MXHkaPJe9mS\r\nrcOh7ej35U+4PjrG0NF8PFzJel0NVlqlXn4=\r\n=Qs0s\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"timloges","email":"github@timloges.de"},"directories":{},"maintainers":[{"name":"timloges","email":"github@timloges.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/openseadragon-opacity-slider_1.0.0_1649252091024_0.8627163681693335"},"_hasShrinkwrap":false}},"time":{"created":"2022-03-10T08:36:13.912Z","0.0.1":"2022-03-10T08:36:14.222Z","modified":"2022-05-12T06:36:27.128Z","0.0.2":"2022-03-15T09:51:37.498Z","0.0.3":"2022-03-18T11:24:10.745Z","1.0.0":"2022-04-06T13:34:51.255Z"},"maintainers":[{"name":"timloges","email":"github@timloges.de"}],"description":"This plugin adds to OpenSeaDragon the functionality to adjust the transparency of superimposed images in the GUI, as well as to adjust their order.","homepage":"https://github.com/WasMachenSachen/openseadragon-opacity-slider#readme","keywords":["openseadragon"],"repository":{"type":"git","url":"git+https://github.com/WasMachenSachen/openseadragon-opacity-slider.git"},"author":"Tim Loges, Benedikt Engel, Chris Toth, Marius Scherff","bugs":{"url":"https://github.com/WasMachenSachen/openseadragon-opacity-slider/issues"},"license":"BSD-3-Clause","readme":"# openseadragon-opacity-slider\n\nThis plugin adds the functionality to adjust the transparency of superimposed images to [OpenSeaDragon (OSD)](https://openseadragon.github.io) in the GUI, as well as to adjust their order.\nThis can be useful for comparing different maps of the same place, satellite-imagery with different recording dates, images of art captured with different techniques.\n![](./docs-assets/demo.gif)\n\nYou can try out a demo [here](https://wasmachensachen.github.io/openseadragon-opacity-slider/).\n\n## Requirements\nOpenSeaDragon (OSD) > v.2.4.2\n\n## Glossary\nFor a better understanding of the plugin, here are some terms, which we will use in this documentation:\n- **Layer:** Due to the reason that we put several images on top of each other, we don't talk about images anymore, but about layers. An image thus represents a layer.\n- **Layername:** The layername represents the designation of a layer, which can be, for example, the recording date or the recording technique.\n- **Layernameexplanation:** The layernameexplanation are additional informations for the user about the layer.\n- **Slider:** Each visible layer has a slider to manipulate it. Without any additional [settings](#options) a slider consisits of a removal-button, up- and down-buttons for the layerorder, a range slider and a number-input for changing the opacity. So a slider is not only the range input.\n- **Sliderarea:** The sliderarea is the space where all the sliders live.\n- **Layerpicker:** The layerpicker is an additional area where all layers are listed and can be toggled. Also there the layernameexplanation is shown.\n\n## Installation\nIf not already done install OSD as described in the [OSD installation guide](https://openseadragon.github.io/#download).\nAfter that, you can install the Plugin in multiple ways: \n### 1. Via npm/yarn/pnpm\nUse the installation-script for your prefered package manager from below:\n\nnpm: `npm install openseadragon-opacity-slider` or `npm i openseadragon-opacity-slider`\n\nyarn: `yarn add openseadragon-opacity-slider` \n\npnpm: `pnpm add openseadragon-opacity-slider` \n\nAfter that import it into your JS-File:\n\n```js\nimport \"openseadragon-opacity-slider\"\n```\n\n> If you use this option you have to add `type=\"module\"` to your script-tag in your HTML-file.\n\n### 2. Use a CDN:\nImport one of this CDN-links in your HTML-file:\n\njsDelivr: \n```html\n<script src=\"https://cdn.jsdelivr.net/npm/openseadragon-opacity-slider/dist/openseadragon-opacity-slider.min.js\"></script>\n```\n\nunpkg:\n```html\n<script src=\"https://unpkg.com/openseadragon-opacity-slider/dist/openseadragon-opacity-slider.min.js\"></script>\n```\n\nbundle.run: \n```html\n<script src=\"https://bundle.run/openseadragon-opacity-slider\"></script>\n```\n\n> This will always provide the latest version. If you want to use a special version change the following part of the url from `openseadragon-opacity-slider` to `openseadragon-opacity-slider@X.X.X`.\n\n### 3. Via download \nDownload the Plugin [here](https://github.com/WasMachenSachen/openseadragon-opacity-slider/archive/refs/heads/main.zip) and move it into your project directory. For size reasons only copy the `dist`- and the `styles`-folder.\nAnd import it into your JS- or HTML-File:\n```js\nimport \"<RELATIVE_PATH_TO_DIST>/dist/openseadragon-opacity-slider.min.js\"\n```\n> If you use this option you have to add `type=\"module\"` to your script-tag in your HTML-file.\n\n **OR**\n```html\n<script src=\"<RELATIVE_PATH_TO_DIST>/dist/openseadragon-opacity-slider.min.js\"></script>\n```\n\n## Setup and Usage\n1. Setup OSD, if already done go to 3. \n\nAdd div for OSD to your html:\n```html\n<!-- ... -->\n  <div id=\"openseadragon\"></div>\n<!-- ... -->\n```\n\n2. Create a new OSD-object in your JS and add images (which will become the layers):\n```js \nconst viewer = OpenSeadragon({\n  id: \"openseadragon\",\n});\n\n// Tiled image: \nviewer.addTiledImage({\n  tileSource: \"<YOUR_TILE_SOURCE>\",\n  opacity: <START_OPACITY>,\n  // More options go here\n});\n\n// Simple image:\nviewer.addSimpleImage({\n  url: \"<YOUR_IMAGE_SOURCE>\",\n  opacity: <START_OPACITY>,\n  // More options go here\n});\n```\n> If no opacity is given the layer will have the default OSD opacity of 100% (or 1).\n\n3. Add DIV for Sliders\n```html\n<!-- ... -->\n  <div id=\"opacitySliderWrapper\"></div>\n<!-- ... -->\n```\n> Because the plugin will position it absolute, it doesn't matter where you put it in the dom.\n4. Setup the additional information of the layers:\n```js \nconst layerInformation = [\n  {\n    layerName: \"<NAME_OF_THE_LAYER>\",\n    layerNameExplanation: \"<EXPLANATION_OF_THE_LAYER>\",\n    source: \"<YOUR_SOURCE>\", // This has to be the same source as in the previous step!\n    hidden: <false|true>,    // If true, the image is hidden by default and only availible in the layerpicker \n  },\n  // One object for each layer\n]\n```\nPlease note, that it's currently **not** possible to add the same image (source) multiple times.\n\n5. Setup the [options](#options) for the layers:\n```js\nconst osdosOptions = {\n  // Options can go here\n}\n```\n\n6. Add the plugin to the viewer:\n```js\nviewer.opacityslider({ ...osdosOptions, layerInformation });\n```\n\nIf everything is right there should be a basic sliderarea below the OSD-viewer. Now you can style the sliderarea and sliders like described [here](#styling) or change the options like described [below](#options).\n\n## Options\nYou can set multiple options in your options-object to manipulate the output of the sliderarea. These are all optional and fallback to the default if not defined.\n| Option | Type | Default | Explanation | Additional information|\n|---|---|---|---|---|\n| `showLayerPicker` | Boolean | true | If true, the layerpicker will be displayed | - |\n| `showRangeSlider` | Boolean | true | If true, the rangeslider will be displayed | If this and `showNumberInput` are false the user can't change the opacity!  |\n| `showNumberInput` | Boolean | true | If true, the numberinput will be displayed | If this and `showRangeSlider` are false the user can't change the opacity!  |\n| `showRemove` | Boolean | true | If true, the removebutton will be displayed | This only toggles the remove-button. The user can still hide the layers in the layerpicker. |\n| `showLayerInformation` | Boolean | true | If true, the layerinformation will be displayed in the layerpicker. | - |\n| `layerPickerHeading` | String | Choose layers:  | Heading for the Layerpicker | - |\n| `layerPickerButtonText` | String | Layer Picker | Buttontext for the button which toggles the layerpicker | - |\n| `sortable` | Boolean | true | If true, the up- and down-buttons are displayed | - |\n<!-- Blueprint for new Rows: | `` |   |   |   |   | -->\n\n## Styling\nFor styling you have two options:\n\n### 1. Predefined stylesheets\nIf you want it simple you can use one of our predefined stylesheets. Right now this stylesheet is availible:\n- `Minimal`: This is the most basic styles you can use. Pretty clean in Black and white.\n![](./docs-assets/screenshot_minimal.png)\n- `Minimal-Side`: Also basic styles but they are in a sidebar instead of below the viewer. \n![](./docs-assets/screenshot_minimal-side.png)\n- `Black & Yellow`: Another theme with some colors in black, yellow and gray. And some custom styled range sliders.\n![](./docs-assets/screenshot_black-and-yellow.jpeg)\n- More are coming soon! We are working on sweet colourful styles.\n\nJust import one into your HTML-document with the following link-tag..\n#### ...when you used a packagemanager:\nIn your JS-File:\n```js\nimport \"openseadragon-opacity-slider/styles/<NAME_OF_THE_SHEET>.css\";\n``` \n\n#### ...when you used a CDN:\n```html\n<!-- ... -->\n  <link rel=\"stylesheet\" href=\"<CDN_URL>/styles/<NAME_OF_THE_SHEET>.css\">\n<!-- ... -->\n``` \nReplace `<CDN_URL>` with one of these:\n- `https://cdn.jsdelivr.net/npm/openseadragon-opacity-slider`\n- `https://unpkg.com/openseadragon-opacity-slider`\n- `https://bundle.run/openseadragon-opacity-slider`\n(If you want a special version it's the same like described [here](#2-use-a-cdn))\n\n#### ...when you used the download:\n```html\n<!-- ... -->\n  <link rel=\"stylesheet\" href=\"<RELATIVE_PATH_TO_STYLES_FOLDER>/styles/<NAME_OF_THE_SHEET>.css\">\n<!-- ... -->\n``` \n\n### 2. Build your own stylesheet\nIf you are not satisfied with the predefined stylesheets or want to customize it more to your styleguide you can create your own stylesheet. For this we have added classes to all elements. \n<!-- TODO: add file and link! -->\n> TBD. Here you find a blueprint and more explanation soon.\n<!--In [style-blueprint.css](#) you find all classes you can use for styling. In addition, we have added comments describing on which elements this class owns.\n\nIf you want to share your stylesheet with others, feel free to open a [pull request](https://github.com/WasMachenSachen/openseadragon-opacity-slider/pulls)!-->\n\n## Team and Contribution\nThis plugin is developed and maintained by the following team members:\n - [@WasMachenSachen](https://github.com/WasMachenSachen) | Tim Loges\n - [@BenediktEngel](https://github.com/BenediktEngel) | Benedikt Engel\n - [@Masch229](https://github.com/Masch229) | Marius Scherff\n - [@SickxX](https://github.com/SickxX) | Christopher Toth\n\n\n### Contribute\n<!-- Maybe something about dev-server and build stuff with npm and vite  -->\nIf you want to contribute feel free to build something, but give your best to follow the following steps:\n\n1. Create a new branch with the `dev`-branch as base. Please consider a good and self-descriptive name for your branch.\n2. Now you can build stuff.\n3. For your commit-messages please use the [conventional commits syntax](https://www.conventionalcommits.org/en/v1.0.0/#specification).\n4. If everything is done open a pull request onto the `dev`-branch; we will look into it and when everything is fine it will get merged. \n5. Your changes will be merged into the `main`-branch with the next version!\n\n## MISC\n\n**Licence:** [BSD-3](./LICENSE)\n\n**Problems?** Please open an [issue](https://github.com/WasMachenSachen/openseadragon-opacity-slider/issues), maybe we can help.\n\n**Roadmap:** \n\n- Add functionality for adjusting the position of a layer in x- and y-direction.\n- More stylesheets with different styles. *You have developed a stylesheet and want to share it with others? Feel free to [open](https://github.com/WasMachenSachen/openseadragon-opacity-slider/pulls) a pull request!*\n- *Are we missing something you would want? Feel free to [open](https://github.com/WasMachenSachen/openseadragon-opacity-slider/issues) an issue and describe it.*\n\n\n**Additional Information:** This repository/project is the result of a module in the [Media Informatics Master course](https://www.medieninformatik.th-koeln.de) at [TH Köln](https://www.th-koeln.de). We are doing our best to maintain this project. If you have any wishes, suggestions or questions, please write an [issue](https://github.com/WasMachenSachen/openseadragon-opacity-slider/issues).\n","readmeFilename":""}