jquery-ui/demos/functional/templates/ui.magnifier.html

<script type="text/javascript">

	var model = {
		
		renderAt: '#containerDemo',

		title: 'Magnifier Demos',
		
		demos: [

			{
				title: 'Simple Magnifier',
				desc: 'With few lines of code you could build a magnifier. You can try more options on the fly!',
				html: '<div id="magnifier"><img src="images/clock.png" width="64" height="64" alt="demo image" /><img src="images/clock.png" width="64" height="64" alt="demo image" /><img src="images/clock.png" width="64" height="64" alt="demo image" /><img src="images/clock.png" width="64" height="64" alt="demo image" /><img src="images/clock.png" width="64" height="64" alt="demo image" /><img src="images/clock.png" width="64" height="64" alt="demo image" /></div>',
				destroy: '$("#magnifier").magnifier("destroy");',
				options: [
					{ desc: 'Attach a magnifier', source: '$("#magnifier").magnifier();' },
					{ desc: 'Small magnification', source: '$("#magnifier").magnifier({magnification:1.5});' },
					{ desc: 'Disable the magnifier', source: '$("#magnifier").magnifier("disable");' }
				]
			},

			{
				title: 'Opacity Magnifier',
				desc: 'With few lines of code you could build a magnifier. You can try more options on the fly!',
				html: '<div id="magnifier2"><img src="images/clock.png" width="64" height="64" alt="demo image" /><img src="images/clock.png" width="64" height="64" alt="demo image" /><img src="images/clock.png" width="64" height="64" alt="demo image" /><img src="images/clock.png" width="64" height="64" alt="demo image" /><img src="images/clock.png" width="64" height="64" alt="demo image" /><img src="images/clock.png" width="64" height="64" alt="demo image" /></div>',
				destroy: '$("#magnifier2").magnifier("destroy");',
				options: [
					{ desc: 'Opacity option', source: '$("#magnifier2").magnifier({opacity:{min:0.4,max:1.0}});' }
				]
			},

			{
				title: 'Overlap Magnifier',
				desc: 'With few lines of code you could build a magnifier. You can try more options on the fly!',
				html: '<div style="height:16px;">&nbsp;</div><div id="magnifier3"><img src="images/clock.png" width="64" height="64" alt="demo image" /><img src="images/clock.png" width="64" height="64" alt="demo image" /><img src="images/clock.png" width="64" height="64" alt="demo image" /><img src="images/clock.png" width="64" height="64" alt="demo image" /><img src="images/clock.png" width="64" height="64" alt="demo image" /><img src="images/clock.png" width="64" height="64" alt="demo image" /></div><div style="height:84px;">&nbsp;</div>',
				destroy: '$("#magnifier3").magnifier("destroy");',
				options: [
					{ desc: 'Overlap option', source: '$("#magnifier3").magnifier({overlap:true});' }
				]
			}

		]
	};

	$(function(){

		uiRenderDemo(model);

	});

</script>