Difference between revisions of "Widget:ImageLoader"

From Hackerspace ACKspace
Jump to: navigation, search
m (added debug info)
m (test inline onerror)
Line 43: Line 43:
 
     function imgSuccess()
 
     function imgSuccess()
 
     {
 
     {
console.log( "success", arguments );
 
 
         // Transfer image and clear filters
 
         // Transfer image and clear filters
 
         this.img.src = this.imgBuf.src;
 
         this.img.src = this.imgBuf.src;
Line 52: Line 51:
 
     function imgFail()
 
     function imgFail()
 
     {
 
     {
console.log( "FAIL", arguments );
+
console.log( "FAIL", this, arguments[0] );
 
         // Try and make 'old' image sepia on error
 
         // Try and make 'old' image sepia on error
 
         setFilter( this.img, "grayscale(100%) sepia(100%)" );
 
         setFilter( this.img, "grayscale(100%) sepia(100%)" );
Line 74: Line 73:
 
             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 90: Line 91:
 
     if ( interval > 0 )
 
     if ( interval > 0 )
 
         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}-->" onerror="imgFail" src="' + imageObj.src + "?" + ( Math.random() * 100000 | 0 ) + '" id="imgLoad' + imageObj.id + '"/>' );
 
}( ));
 
}( ));
 
</script>
 
</script>
 
</includeonly>
 
</includeonly>

Revision as of 11:43, 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.