Creating a Photo Gallery with Django and jQuery

jQuery

Next I added the jQuery functionality. When the user selects a category, the relevant thumbnails will display.

?View Code JAVASCRIPT
$(function() {
      $('#image_categories').change(function() {
		if ($(this).selectedIndex != 0) {
			$('#thumb-container').empty();
			v = $(this).val();
			$.getJSON('/sites/headerimages/'+v, function(data) {
				$.each(data, function(i, itm) {
					$('<div></div>').addClass('thumbs').append(
						$('<a></a>').attr('id', 'header-image-'+itm.pk).data('large', media_url+itm.fields.image).append(
							$('<img />').attr('src', media_url+itm.fields.thumbnail)
						)
					).appendTo($('#thumb-container'))
				});
			});
		}
	});
});

First, I make sure that the selected index is not zero. If it is not, I empty the thumb container and use getJSON to retrieve a JSON object of thumbnail images. I load each image into an a tag. I also use jQuery’s .data to store the url of the large image. When the thumbnail is selected, the large image will be displayed in the template.

The /sites/headerimages/ is a Django method for retrieving the relevant images:

?View Code PYTHON
# /sites/views.py
def get_header_images(request, category):
    images = serializers.serialize("json", Header_image.objects.filter(category_id=category))
    return HttpResponse(images, content_type="application/json")

So if the user selected the abstract image category, The JSON object that is returned looks similar to the following:

?View Code JAVASCRIPT
[{"pk": 3, "model": "sites.header_image", "fields": 
     {"category": 1, "image": "template_images/headers/abstract/large/abstract-blogger-header.jpg", "thumbnail": "template_images/headers/abstract/thumbs/abstract-blogger-header.jpg"}
}, 
{"pk": 4, "model": "sites.header_image", "fields": 
     {"category": 1, "image": "template_images/headers/abstract/large/abstract-blog-header.jpg", "thumbnail": "template_images/headers/abstract/thumbs/abstract-blog-header.jpg"}
}, 
{"pk": 5, "model": "sites.header_image", "fields": 
     {"category": 1, "image": "template_images/headers/abstract/large/abstract-blog-header_1.jpg", "thumbnail": "template_images/headers/abstract/thumbs/abstract-blog-header_1.jpg"}
}, 
{"pk": 6, "model": "sites.header_image", "fields": 
     {"category": 1, "image": "template_images/headers/abstract/large/abstract-blue-glass-lrg.jpg", "thumbnail": "template_images/headers/abstract/thumbs/abstract-blue-glass-lrg.jpg"}
}]

Storing the User Selection

When the user selects a thumbnail image, we need to display the large image in the container. We also need to store the image id in the hidden field header_image. We can do both easily because each image was given a specific id (based upon the primary key in the header images table) We also added the thumb class to each a tag when it was created.

?View Code JAVASCRIPT
$('.thumbs a').live('click', function() {
	$('#header-image-cntnr').empty();
	var src = $(this).data('large');
	$('<img />').attr('src', src).appendTo($('#header-image-cntnr'));
	var id = $(this).attr('id');
	id = id.split('-');
	id = id[2];
	$('#id_header_image').val(id);
	$( "#header-image-gallery-dialog" ).dialog( "close" );
});

I purposely created a format for the id of each a tag. Each word in the id is separated with a dash (-). Using Javascript’s split method, I split each word into an array. I know that the primary key for the image is in the second index of the array. The primary key will be stored in the hidden field id_header_image (header_image).

That’s it. As you can see, creating a Photo Gallery with Django and jQuery is not too difficult. Enjoy.

Be Sociable, Share!

Checkout My New Site - T-shirts For Geeks