Tips and Extensions | Simple Javascript Image Viewer

September 4, 2010

Graceful Degradation

Code:

<a href="picture.jpg">
	<img src="images/picture.jpg" style="width:400px;" onLoad="new viewer({
		image: this,
		replace: this.parentNode,
		frame: ['400px','250px']
	});" />
</a>

September 4, 2010

Toolbar extension

Add the following to the head tag (after including simple viewer):

<script type="text/javascript" src="js/toolbar-ext.js"></script>
<link rel="stylesheet" type="text/css" href="css/toolbar-ext.css" />

Then use the following on the body tag:

<img src="sunset.jpg" style="width:400px;" onLoad="viewer.toolbar(new viewer({
	image: this,
	frame: ['400px','250px']
}));" />

If you want all viewers to be created with a toolbar, then use the following javascript within the head tag, before creating any viewers:

<script type="text/javascript">
	viewer.onload =  viewer.toolbar;
</script>

September 4, 2010

Credits

Thanks to:

led24.de for the icons that I used on the toolbar extension.