This gist demonstrates how to use OpenSeadragon in order to overlap two tiled images and switch between them using an opacity slider control.
When the opacity slider is moved a problem occours if the wrapHorizontal option is used. Infact, only the central image is affected by the opacity changes while the ones repeated on its left and right are not.
| viewer = OpenSeadragon { | |
| id: "openseadragon", | |
| prefixUrl: "https://rawgit.com/fabiovalse/Hub/master/lib/openseadragon/images/", | |
| wrapHorizontal: true, | |
| immediateRender: true | |
| } | |
| viewer.addTiledImage { | |
| tileSource: { | |
| getTileUrl: (z, x, y) -> "http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/#{z-8}/#{y}/#{x}" | |
| height: (1<<24)*256 | |
| width: (1<<24)*256 | |
| tileSize: 256 | |
| } | |
| opacity: 1 | |
| } | |
| viewer.addTiledImage { | |
| tileSource: { | |
| getTileUrl: (z, x, y) -> "https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/#{z-8}/#{y}/#{x}" | |
| height: (1<<24)*256 | |
| width: (1<<24)*256 | |
| tileSize: 256 | |
| } | |
| opacity: 0 | |
| } | |
| document.querySelector('.slider').oninput = (e) -> | |
| viewer.world.getItemAt(1).setOpacity(this.value/10) | |
| #viewer.addTiledImage { | |
| # tileSource: "https://rawgit.com/fabiovalse/Hub/master/dzi/fitz_roy/img.dzi" | |
| # opacity: 1 | |
| #} | |
| # | |
| #viewer.addSimpleImage { | |
| # url: "https://upload.wikimedia.org/wikipedia/commons/1/13/Sunset_Playas_de_Tijuana.jpg" | |
| # opacity: 0 | |
| #} |
| body, html { | |
| width: 100%; | |
| height: 100%; | |
| padding: 0; | |
| margin: 0; | |
| } | |
| #openseadragon { | |
| width: 100%; | |
| height: 100%; | |
| background: #000; | |
| } | |
| .slider { | |
| position: absolute; | |
| top: 5; | |
| left: 150; | |
| } |
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>OpenSeadragon</title> | |
| <link type="text/css" href="index.css" rel="stylesheet"/> | |
| </head> | |
| <body> | |
| <div id="openseadragon"></div> | |
| <input type="range" class="slider" step="1" min="0" max="10" value="0"> | |
| <script src="https://rawgit.com/fabiovalse/Hub/master/lib/openseadragon/openseadragon.min.js"></script> | |
| <script src="index.js"></script> | |
| </body> | |
| </html> |
| // Generated by CoffeeScript 1.10.0 | |
| (function() { | |
| var viewer; | |
| viewer = OpenSeadragon({ | |
| id: "openseadragon", | |
| prefixUrl: "https://rawgit.com/fabiovalse/Hub/master/lib/openseadragon/images/", | |
| wrapHorizontal: true, | |
| immediateRender: true | |
| }); | |
| viewer.addTiledImage({ | |
| tileSource: { | |
| getTileUrl: function(z, x, y) { | |
| return "http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/" + (z - 8) + "/" + y + "/" + x; | |
| }, | |
| height: (1 << 24) * 256, | |
| width: (1 << 24) * 256, | |
| tileSize: 256 | |
| }, | |
| opacity: 1 | |
| }); | |
| viewer.addTiledImage({ | |
| tileSource: { | |
| getTileUrl: function(z, x, y) { | |
| return "https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/" + (z - 8) + "/" + y + "/" + x; | |
| }, | |
| height: (1 << 24) * 256, | |
| width: (1 << 24) * 256, | |
| tileSize: 256 | |
| }, | |
| opacity: 0 | |
| }); | |
| document.querySelector('.slider').oninput = function(e) { | |
| return viewer.world.getItemAt(1).setOpacity(this.value / 10); | |
| }; | |
| }).call(this); |
