Question

I want to make thumbnail images display in large format on the same template when user click on them. I found out that this can be done by implenting javascript rollover in django template. How can I make thumbnail images display in large images on the same template using javascript rollover?

Template:

{% block content %}

 <p><strong><center> {{ post.title }} </center></strong> </p>
 <p><center><a href="{{ MEDIA_URL }}/{{post.main_view}}"><img src="{{post.thumbnail_1.url}}" width="83" height="78"></a> <a href="{{ MEDIA_URL }}/     {{post.side_view}}"><img src="{{post.thumbnail_2.url}}" width="83" height="78"> </a>
 {% endblock %}

Answer 1

Try using this:
http://superdit.com/2011/06/11/hover-image-zoom-with-jquery/

Here’s the end result:
http://demo.superdit.com/jquery/zoom_hover/