Simple & Draggable Image Popups Using jQuery

October 17, 2017 6:07 pm by ATS Staff

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

<img src="http://via.placeholder.com/350x150?text=Smile=Peace" width="200" onclick="show_image_popup(this.id, 150, 150); return false;" id="thumb1" style="cursor: pointer;" />
<img src="http://via.placeholder.com/350x150?text=Peace=Smile" width="200" onclick="show_image_popup(this.id, 250, 250); return false;" id="thumb2" style="cursor: pointer;" />

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<script type="text/javascript">
	jQuery(document).ready(function(){
		jQuery('#the_popup').draggable();		
	});
	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_popup').show();
		jQuery('#the_image').attr('src', jQuery('#'+image_id).attr('src'));
	}
</script>

<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;" />
</div>