Django template snippet creating sortable thumbnails list instead of inlines.

gistfile1.js

{% block extrahead %}{{ block.super }}
{% url 'admin:jsi18n' as jsi18nurl %}
<script type="text/javascript" src="{{ jsi18nurl|default:"../../../jsi18n/" }}"></script>
{{ media }}
<script src="{{STATIC_URL}}js/jquery-ui-1.8.17.custom.min.js"></script>
<script>
	function jqVersion() {
		alert(jQuery.fn.jquery);
	}
	$(function(){
		$panels = $("fieldset.module.aligned");
		$photos = $("#stpproductsphotos_set-group");
		$photos.remove();
		$($panels[($panels.length-1)-1]).after($photos);
		x = 0;
		$photos_container = $("<div id='photos_container'>")
		$photos.find("fieldset").append($photos_container);
		var photos_array = [];
		$photos.find("tbody tr").each(function(){
			$hiddens = $(this).find("input[type=hidden]");
			$file = $(this).find("input[type=file]");
			$order = $(this).find("input[type=text]");
			$delete = $(this).find("input[type=checkbox]");
			$img = $(this).find("a:has(img)");
			if ($file.length) {
				$handle = $("<div class='photo_item_handle'>");
				$photo = $("<div class='photo_item'>");
				if ($img.length) {
					$photo.addClass("loaded");
					var $label = $("<label>").text("Удалить").append($("<br>"));
					$delete = $label.append($delete);
				}
				$order.css("display", "none");
				$photo.append($img);
				$photo.append($file);
				$photo.append($delete);
				$photo.append($order);
				$photo.append($hiddens);
			}
			photos_array.push($photo);
		});
		$(photos_array).sort(function(a,b){
			var compA = $(a).find("input[type=text]").val();
			var compB = $(b).find("input[type=text]").val();
			return (compA < compB) ? -1 : (compA > compB) ? 1 : 0;
		}).each(function(){
			$photos_container.append(this);
		});
		var $empties = $("div.photo_item:has(input[value=0])");
		$photos_container.append($("<div>").addClass("clear"));
		$photos_container.append($empties);
		$("div.photo_item:last").css("display", "none");
		var $addlink = $("<a href='#'>").addClass("add").text("Добавить еще одно фото");
		$photos_container.append($("<div>").append($addlink));
		
		$addlink.click(function(){
			var $template_object = $("div.photo_item:last")
			var new_photo_html = $template_object.html();
			var new_photo_index = $("div.photo_item").length-1;
			new_photo_html = new_photo_html.replace(/__prefix__/, new_photo_index);
			var $new_photo_object = $("<div>").addClass("photo_item").append($(new_photo_html));
			$template_object.before($new_photo_object);
			return false;
		});
		
		$("fieldset table").remove();
		
		$("#photos_container").sortable({ 
			/* order of events: change, update, stop. 
			change occures every time position of a sortable is changed.
			update and stop only at the end of the sorting, when sortable is dropped in new place.
			*/
			items: 'div.loaded',
			tolerance: 'pointer',
			placeholder: 'placeholder',
			containment: 'parent',
			stop: function(ui, ev) {
				$("div.loaded input:text").each(function(index, element) {
					$(element).val((index + 1).toString());
				});
			},
		});
	});
</script>
<style>
	#photos_container {}
		#photos_container div:last-child { border-top: 1px solid lightblue; background-color: white; padding: 3px;}
		#photos_container .photo_item { border-top: 1px solid lightblue; background-color: white; clear: both; }
			#photos_container .photo_item.loaded, #photos_container div.placeholder {float: left; clear: none; width: 220px; height: 240px; text-align: center; margin: 20px 10px 20px 10px; border: 1px solid lightblue; background-color: white;}
				#photos_container div.placeholder {background: #b6ddef; visibility: visible;}
				#photos_container .photo_item.loaded img {display: block; margin: 20px 10px 20px 10px; max-height: 110px; max-width: 200px;}
				#photos_container .photo_item.loaded label {display: block; margin: 15px 0 0 0; color: #cc3434;}
		#photos_container a.add {background: url(/static/admin/img/admin/icon_addlink.gif) 0 50% no-repeat; padding-left: 14px; font-size: 11px; outline: 0; color: #5B80B2; text-decoration: none;}
		#photos_container a.add:hover {color: #036; }
		#photos_container .clear {clear: both;}
</style>
{% endblock %}