<!-- the full contents of this file are included in the head block of your page -->
<!-- note to work we must start with the js/ directory, then the name of the folder -->



<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/imgpreview/imgpreview.full.jquery.js"></script>

<!-- Use: <a style="opacity: 1;" href="https://www.google.com/images/srpr/logo11w.png">Google</a> -->

<!-- Credit: http://james.padolsey.com/demos/imgPreview/full/ -->

<script type="text/javascript">

$( document ).ready(function() {
	
	
	$('.form-output-div a').imgPreview({
		containerID: 'imgPreviewWithStyles',
		imgCSS: {
			// Limit preview size:
			height: 200
		},
		// When container is shown:
		onShow: function(link){
			// Animate link:
			$(link).stop().animate({opacity:0.4});
			// Reset image:
			$('img', this).stop().css({opacity:0});
		},
		// When image has loaded:
		onLoad: function(){
			// Animate image
			$(this).animate({opacity:1}, 300);
		},
		// When container hides: 
		onHide: function(link){
			// Animate link:
			$(link).stop().animate({opacity:1});
		}
	});
	
});

</script>

<style type="text/css">
#imgPreviewWithStyles {
    background: #222;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    padding: 15px;
    z-index: 999;
    border: none;
}
<style>