Simple & Draggable Image Popups Using jQuery

The following code shows how to implement simple draggable image popups using jQuery:

<img src="" width="200" onclick="show_image_popup(, 150, 150); return false;" id="thumb1" style="cursor: pointer;" />
<img src="" width="200" onclick="show_image_popup(, 250, 250); return false;" id="thumb2" style="cursor: pointer;" />

<script src=""></script>
<script src=""></script>

<script type="text/javascript">
	function show_image_popup(image_id, image_left, image_top) {
		jQuery('#the_popup').css('left', image_left);
		jQuery('#the_popup').css('top', image_top);
		jQuery('#the_image').attr('src', jQuery('#'+image_id).attr('src'));

<div id="the_popup" style="display: none; top: 100px; left: 100px; position: fixed; background-color: #ffffff; border: 1px solid #dddddd; cursor: move; z-index: 1000000;">
	<span style="float: right; font-family: Arial; font-size: 26px; cursor: pointer;" onclick="jQuery('#the_popup').hide(); return false;">x&nbsp;</span><br />
	<img id="the_image" style="max-width: 700px;" />