Difference between revisions of "Widget:ImageLoader"
(updated image loader) |
m (Image on-error link success! Restoring original demo image) |
||
| (9 intermediate revisions by the same user not shown) | |||
| Line 14: | Line 14: | ||
}}</nowiki> | }}</nowiki> | ||
| − | This will give the following result: | + | This will give the following result:<br/> |
{{#widget:{{PAGENAME}} | {{#widget:{{PAGENAME}} | ||
|url=https://upload.wikimedia.org/wikipedia/commons/b/b8/Trojan_Room_coffee_pot_xcoffee.png | |url=https://upload.wikimedia.org/wikipedia/commons/b/b8/Trojan_Room_coffee_pot_xcoffee.png | ||
| − | |width= | + | |width=156 |
| − | |height= | + | |height=175 |
| − | }} | + | }}<br/> |
| − | Note that '''url''' is mandatory, the | + | Note that '''url''' is mandatory, the rest is optional (leave out interval to make the image static) |
| Line 26: | Line 26: | ||
To use this widget on your site, just install [http://www.mediawiki.org/wiki/Extension:Widgets MediaWiki Widgets extension] and copy [{{fullurl:{{FULLPAGENAME}}|action=edit}} full source code] of this page to your wiki as '''{{FULLPAGENAME}}''' article. | To use this widget on your site, just install [http://www.mediawiki.org/wiki/Extension:Widgets MediaWiki Widgets extension] and copy [{{fullurl:{{FULLPAGENAME}}|action=edit}} full source code] of this page to your wiki as '''{{FULLPAGENAME}}''' article. | ||
</noinclude><includeonly><script type="text/javascript"> | </noinclude><includeonly><script type="text/javascript"> | ||
| − | <!--{$url|validate:url}-->", "id" : null, "imgBuf" : null, "loading" : false }; | + | (function( ) |
| + | { | ||
| + | "use strict"; | ||
| + | var imageObj = { "src" : "<!--{$url|validate:url}-->", "id" : null, "imgBuf" : null, "loading" : false }; | ||
function setFilter( _img, _filter ) | function setFilter( _img, _filter ) | ||
| Line 51: | Line 54: | ||
setFilter( this.img, "grayscale(100%) sepia(100%)" ); | setFilter( this.img, "grayscale(100%) sepia(100%)" ); | ||
this.loading = false; | this.loading = false; | ||
| + | if ( !this.link ) | ||
| + | { | ||
| + | this.link = this.img.parentNode.insertBefore( document.createElement( "a" ), this.img ); | ||
| + | this.link.target = "_blank"; | ||
| + | this.link.href = this.src; | ||
| + | this.link.textContent = "Open image"; | ||
| + | } | ||
} | } | ||
| Line 69: | Line 79: | ||
this.imgBuf.onerror = imgFail.bind( this ); | this.imgBuf.onerror = imgFail.bind( this ); | ||
this.imgBuf.onload = imgSuccess.bind( this ); | this.imgBuf.onload = imgSuccess.bind( this ); | ||
| + | this.img.onerror = null; | ||
| + | this.img.onload = null; | ||
} | } | ||
| Line 86: | Line 98: | ||
imageObj.id = setInterval( updateImage.bind( imageObj ), interval ); | imageObj.id = setInterval( updateImage.bind( imageObj ), interval ); | ||
document.write( '<img width="<!--{$width|escape:html|default:auto}-->" height="<!--{$height|escape:html|default:auto}-->" src="' + imageObj.src + "?" + ( Math.random() * 100000 | 0 ) + '" id="imgLoad' + imageObj.id + '"/>' ); | document.write( '<img width="<!--{$width|escape:html|default:auto}-->" height="<!--{$height|escape:html|default:auto}-->" src="' + imageObj.src + "?" + ( Math.random() * 100000 | 0 ) + '" id="imgLoad' + imageObj.id + '"/>' ); | ||
| + | imageObj.img = document.getElementById( "imgLoad" + imageObj.id ); | ||
| + | imageObj.img.onerror = imgFail.bind( imageObj); | ||
}( )); | }( )); | ||
</script> | </script> | ||
</includeonly> | </includeonly> | ||
Latest revision as of 13:10, 17 October 2016
This widget allows you to embed images from non-https sources on your wiki page.
Created by Xopr
Using this widget
To insert this widget, use the following code:
{{#widget:ImageLoader
|url=https://upload.wikimedia.org/wikipedia/commons/b/b8/Trojan_Room_coffee_pot_xcoffee.png
|width=300
|height=250
|interval=60
}}
This will give the following result:
Note that url is mandatory, the rest is optional (leave out interval to make the image static)
Copy to your site
To use this widget on your site, just install MediaWiki Widgets extension and copy full source code of this page to your wiki as Widget:ImageLoader article.
