I am experiencing some trouble using Openseadragon:
This is my code for the viewer:
<div id="viewer"></div>
<script>
var viewer = OpenSeadragon({
preserveViewport: true,
visibilityRatio: 1,
defaultZoomLevel: 0,
id: "viewer",
sequenceMode: true,
tileSources: {
type:'image',
url:"https://api.digitale-sammlungen.de/iiif/presentation/v2/bsb10200197/canvas/1/view"},
showFullPageControl: false,
showHomeControl: false,
prefixUrl: "https://cdn.jsdelivr.net/npm/openseadragon#2.4/build/openseadragon/images/"
});
</script>
As you can see, I have a tileSource from the bayerische Staatsbibliothek in Germany.
Whenever I access the url directly in the browser, the image opens as intended, however, when I'm in my viewer in receive the error
Unable to open [object Object]: Error loading image at https://api.digitale-sammlungen.de/iiif/presentation/v2/bsb10200197/canvas/1/view
Can anyone tell me what I'm doing wrong?
all the best and thanks in advance
Are you looking to use the IIIF tilesources here? If so you will need to use the IIIF Image Information url for the tileSource and not the canvas. I would also remove type: 'image'.
<div id="viewer"></div>
<script>
var viewer = OpenSeadragon({
preserveViewport: true,
visibilityRatio: 1,
defaultZoomLevel: 0,
id: "viewer",
sequenceMode: true,
tileSources: {
url:"https://api.digitale-sammlungen.de/iiif/image/v2/bsb10200197_00001/info.json"},
showFullPageControl: false,
showHomeControl: false,
prefixUrl: "https://cdn.jsdelivr.net/npm/openseadragon#2.4/build/openseadragon/images/"
});
</script>
Related
I have the following simple code for showing a sequence of svgs:
<!DOCTYPE html>
<html>
<body>
<div id="openseadragon1" style="width: 1500px; height: 1000px;"></div>
<script src="openseadragon.min.js"></script>
<script type="text/javascript">
var viewer = OpenSeadragon({
id: "openseadragon1",
prefixUrl: "./images/",
tileSources: [
{type: 'image', url: "./img/pc_000.svg", buildPyramid: false},
{type: 'image', url: "./img/pc_001.svg", buildPyramid: false},
{type: 'image', url: "./img/pc_002.svg", buildPyramid: false},
],
sequenceMode: true,
preserveViewport: true,
});
</script>
</body>
</html>
The svg dimensions are 332ptx20000pt (short, but extremely wide). When the images are displayed they are cropped horizontally (at about 12000pt approx.), but when I load the images directly in a browser, the browser (Chrome, Edge) shows it in their entirety.
Is there a way to display these wide images uncropped in openseadragon?
Sample image and code
problem descritpion
i try to use the search function of docsifyk, but it seems not working.
steps to reproduce
so i do these steps:
(following the official docsify documentation)
i run 'docsify init' in a directory, so it generate a 'index.html' and a 'README.md'.
i add the code into 'index.html‘.
<script src="//unpkg.com/docsify/lib/plugins/search.min.js"></script>
current behavior
the page shows the search button, but whatever i type, it returns 'no result'.
other information
i have tried it on different computers(mac/ubuntu 16), both not working
Did Anybody Ever Have The Same Question?
I encounter the same issue. I Found i was doing few things wrong
Firstly This Link is Worth checking out
Make Sure You have a _sidebar.md File and or a file for side bar Adding a side bar after this just add this script tag
<script>
window.$docsify = {
loadSidebar: true,
subMaxLevel: 6,
search: {
maxAge: 86400000, // Expiration time, the default one day
paths: 'auto',
placeholder: 'Type to search',
noData: 'No Results!',
depth: 6,
hideOtherSidebarContent: true, // whether or not to hide other sidebar content
}
}
</script>
this implementation works for me:
<script>
window.$docsify = {
loadSidebar: true,
subMaxLevel: 3,
name: '',
repo: '',
search: 'auto', // default
// complete configuration parameters
search: {
maxAge: 86400000, // Expiration time, the default one day
paths: 'auto',
placeholder: 'Type to search',
noData: 'No Results!',
// Headline depth, 1 - 6
depth: 6,
hideOtherSidebarContent: false, // whether or not to hide other sidebar content
}
}
</script>
<script src="//unpkg.com/docsify/lib/docsify.min.js"></script>
<script src="//unpkg.com/docsify/lib/plugins/search.min.js"></script>
check this plugin if you prefer algolia
https://www.npmjs.com/package/docsify-algolia-search-plugin
I'm trying to do a simple POC using the Azure Media Player in my application using Alternative Setup for dynamically loaded HTML using JavaScript from this blog post. I'm getting an error when trying to load via javascript as described below.
If I simply include the javascript files and follow the example "Step 2: Add the HTML video tag to your page" it works:
<video id="azuremediaplayer" class="azuremediaplayer amp-default-skin amp-big-play-centered" controls autoplay width="640" height="400" poster="" data-setup='{"nativeControlsForTouch": false}' tabindex="0">
<source src="http://amssamples.streaming.mediaservices.windows.net/91492735-c523-432b-ba01-faba6c2206a2/AzureMediaServicesPromo.ism/manifest" type="application/vnd.ms-sstr+xml" />
<p class="amp-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video</p>
</video>
But I try to load it dynamically via javascript as described in "Alternative Setup for dynamically loaded HTML using JavaScript" I get an error
Uncaught Error: Error: TypeError: URL.createObjectURL is not a function azuremediaplayer.min.js:2
What I'm trying:
To keep it real simple I'm just trying to get it to load a video in response to a button click.
I have this code in place which is just a direct copy of the example provided.
HTML:
<video id="azuremediaplayer" class="azuremediaplayer amp-default-skin amp-big-play-centered">
</video>
<button id="amsbutton" type="button">Load</button>
Javascript:
$("#amsbutton").on("click", function () {
AMSVideo();
});
function AMSVideo() {
var myOptions = {
"nativeControlsForTouch": false,
autoplay: true,
controls: true,
width: "640",
height: "400",
poster: ""
};
var myPlayer = amp("azuremediaplayer", myOptions);
myPlayer.src([
{ src: "http://amssamples.streaming.mediaservices.windows.net/91492735-c523-432b-ba01-faba6c2206a2/AzureMediaServicesPromo.ism/manifest", type: "application/vnd.ms-sstr+xml" },
]);
}
I tried your code with one minor tweak to not use jQuery and it seems to work fine. Also, if you are ever having trouble, please check out our samples page which has several working examples of loading Azure Media Player using the <video> tag method or dynamically loading using JavaScript
in the <head> of the HTML page, add the Azure Media Player scripts:
<script src="//amp.azure.net/libs/amp/1.1.0/azuremediaplayer.min.js"></script>
<link href="//amp.azure.net/libs/amp/1.1.0/skins/amp-default/azuremediaplayer.min.css" rel="stylesheet">
<!-- Set the location of the fallback techs -->
<script>
amp.options.flashSS.swf = "//amp.azure.net/libs/amp/1.1.0/techs/StrobeMediaPlayback.2.0.swf"
amp.options.flashSS.plugin = "//amp.azure.net/libs/amp/1.1.0/techs/MSAdaptiveStreamingPlugin-osmf2.0.swf"
amp.options.silverlightSS.xap = "//amp.azure.net/libs/amp/1.1.0/techs/SmoothStreamingPlayer.xap"
</script>
In the <body> of the HTML Page:
<video id="azuremediaplayer" class="azuremediaplayer amp-default-skin amp-big-play-centered"></video>
<button id="amsbutton" type="button" onclick="AMSVideo()">Load</button>
JavaScript:
function AMSVideo() {
var myOptions = {
"nativeControlsForTouch": false,
autoplay: true,
controls: true,
width: "640",
height: "400",
poster: ""
};
var myPlayer = amp("azuremediaplayer", myOptions);
myPlayer.src([
{ src: "http://amssamples.streaming.mediaservices.windows.net/91492735-c523-432b-ba01-faba6c2206a2/AzureMediaServicesPromo.ism/manifest", type: "application/vnd.ms-sstr+xml" },
]);
}
If you are still having difficulty, please reach out to ampinfo#microsoft.com for more assistance.
I never found out exactly what the conflict was, but this turned out to be an incompatibility with CKEDITOR 4.3.1. When I commented out my ckeditor code:
CKEDITOR.replace('text-content', {
toolbar: 'Basic',
uiColor: '#9AB8F3',
});
the problem went away. Fortunately, whatever it was is addressed in later version of ckeditor. I dropped in ckeditor from their cdn //cdn.ckeditor.com/4.4.7/standard/ckeditor.js" and the problem seems to be gone. Since this points to the "standard" version of ckeditor, I will update this if it turns out to be more specific like a particular ckeditor plugin for instance.
I am using nouislider anad it works fine except when I try to link it to a span.
Then I get an error: this.LinkConfirm is not a function. I am doing it like this:
$(function(){
$('#slider').noUiSlider({
start: [ 0, 100 ],
connect: true,
step:20,
range: {
'min': 0,
'max': 100
},
format: wNumb({
decimals: 0,
})
});
$("#slider").Link('lower').to($('#lower-value'));
$('#slider').on('set', onSlide);
Then I have a function:
function onSlide(){
len=$("#slider").val();
len1=len[0];
len2=len[1];
};
In the html I have:
<div id="slider" style="width: 300px"></div>
<br>
<span id="lower-value">Value:</span>
<br>
Thanks in advance
Hildigunnur
You are building your slider on document ready, ($(function()), but you are attempting to Link before that happens.
Move the linking up into the $(function(){ ... }); and it'll work.
I'm trying to get a Chrome extension to pop up a "popup" or a "panel" in the front of the currently focused window. It seems like the focused boolean for chrome.windows.create isn't working.
It always opens behind the current window, no matter what I've tried.
// popup.html
<html>
<head>
</head>
<body>
</body>
<script src="loader.js"></script>
</html>
// loader.js
function load() {
var popupId;
chrome.windows.create({
type: 'popup',
url: 'http://xxx/bookmarks',
height: 500,
width: 800,
focused: true
}, function(popup) {
popupId = popup.id;
});
chrome.windows.update(popupId, {focused: true});
}
document.getElementsByTagName('body')[0].onload = function() { load(); };
Any ideas would be appreciated. Thanks!
Since you don't really need the popup page, I would suggest you remove it and instead move your code to open a new window in the javascript file for your background page. You can act on a click on your extension icon by using:
chrome.browserAction.onClicked.addListener(function callback)
and supplying your logic in a callback.