Javascript Image Hollover In Django

42 views
Skip to first unread message

coded kid

unread,
Aug 31, 2012, 7:13:28 AM8/31/12
to Django users
When a user place his mouse or click on any image thumbnails, I want
the particular thumbnail image to display in large size above the set
of thumbnails images on the same page in my django template. I tried
the below Javascript code but it's not working. I'm a noob in
javascript. If there's any way I can do it in jquery please let me
know.

{% block content %}
<script type="text/javascript">
$(function() {
$('.slideshow').hover(
function() { $('.slides').cycle('resume'); },
function() { $('.slides').cycle('pause'); }
);

$('.slides').cycle({
fx: 'fade',
speed: .3,
timeout: 280,
next: '#next',
prev: '#prev'
}).cycle("pause");
});
</script>



<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>


<a href="{{ MEDIA_URL }}/{{post.sitting_view}}"><img
src="{{post.thumbnail_3.url}}" width="83" height="78"></a>

<a href="{{ MEDIA_URL }}/{{post.rook_view}}"><img
src="{{post.thumbnail_4.url}}" width="83" height="78"></a>

{% if Meekme.thumbnail_5 %} <a href="{{ MEDIA_URL }}/
{{post.rook_2_view}}"><img src="{{post.thumbnail_5.url}}" width="83"
height="78"></a>{% endif %}

{% if Meekme.thumbnail_6 %}<a href="{{ MEDIA_URL }}/
{{post.rook_3_view}}"><img src="{{post.thumbnail_6.url}}" width="83"
height="78"></a>{% endif %}
</center></p>

{% endblock %}

Amyth Arora

unread,
Aug 31, 2012, 10:40:36 AM8/31/12
to django...@googlegroups.com
Hey,

dun think this is really Django related, but still i created a jquery example for you, check it http://jsfiddle.net/TjUtq/

--
Thanks & Regards
----------------------------

Amyth [Admin - Techstricks]
Email - aroras....@gmail.com, ad...@techstricks.com
Twitter - @a_myth_________
http://techstricks.com/

coded kid

unread,
Aug 31, 2012, 5:55:11 PM8/31/12
to django...@googlegroups.com
When I followed your tutorial, the images were reshaped only and when I place my mouse on any of the thumbnail images it won't display the large image.  How can I go about it?

Amyth Arora

unread,
Sep 4, 2012, 5:02:23 AM9/4/12
to django...@googlegroups.com
Here i created a step by step tutorial with explanations for you.

--
You received this message because you are subscribed to the Google Groups "Django users" group.
To view this discussion on the web visit https://groups.google.com/d/msg/django-users/-/5IGvhvxkSUsJ.
To post to this group, send email to django...@googlegroups.com.
To unsubscribe from this group, send email to django-users...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/django-users?hl=en.
Reply all
Reply to author
Forward
0 new messages