complete front-end view for media galleries

This commit is contained in:
Sanj 2013-01-03 22:27:42 +05:30
parent 5dbd867bdb
commit 5317e8243e
6 changed files with 102 additions and 15 deletions

View File

@ -22,6 +22,9 @@ class GalleryAlbum(ItfModel):
def get_edit_url(self):
return '/mediagallery/edit/%d' % self.id
def get_absolute_url(self):
return '/mediagallery/view/%d' % self.id
def thumbnail(self):
if Photo.objects.filter(album=self).count() == 0:
return None
@ -29,6 +32,8 @@ class GalleryAlbum(ItfModel):
def get_dict(self):
return {
'id': self.id,
'title': self.title,
'photos': Photo.objects.filter(album=self),
'videos': YoutubeVideo.objects.filter(album=self),
'links': GalleryLink.objects.filter(album=self)

View File

@ -1,6 +1,7 @@
from django.conf.urls.defaults import *
urlpatterns = patterns('mediagallery.views',
(r'^view/(?P<id>\d+)', 'view'),
(r'^add/(?P<ctype_id>\d+)/(?P<object_id>\d+)', 'add'),
(r'^edit/(?P<id>\d+)', 'edit'),
(r'^edit_title/(?P<id>\d+)', 'edit_title'),

View File

@ -38,6 +38,11 @@ def edit(request, id):
return render_to_response("mediagallery/upload.html", context)
def view(request, id):
gallery = get_object_or_404(GalleryAlbum, pk=id)
return render_to_response("mediagallery/view.html", gallery.get_dict())
def edit_title(request, id):
gallery = get_object_or_404(GalleryAlbum, pk=id)
title = request.GET.get("title", "")

View File

@ -92,26 +92,36 @@ $('.lightboxPrev').live("click", function(e) {
$('.thumbsDetails').live("click", function(e) {
// alert($(this).attr("data-bigimage"));
e.preventDefault();
var $that = $(this);
var totalImages = $(this).parent().find(".thumbsDetails").length;
var thisIndex = $(this).index();
var totalImages = $('.thumbsDetails').length;
// var totalImages = $(this).parent().find(".thumbsDetails").length;
var thisIndex = $(this).index('.thumbsDetails');
if (thisIndex < (totalImages - 1)) {
var hasNext = true;
var nextImage = $(this).parent().find(".thumbsDetails").eq(thisIndex + 1);
var nextImage = $(".thumbsDetails").eq(thisIndex + 1);
if (nextImage.hasAttr("data-bigimage")) {
var preloadImage = new Image();
preloadImage.src = nextImage.attr("data-bigimage");
}
}
if (thisIndex > 0 && totalImages > 1) {
var hasPrev = true;
var prevImage = $(this).parent().find(".thumbsDetails").eq(thisIndex - 1);
var prevImage = $(".thumbsDetails").eq(thisIndex - 1);
}
var $lbox = $('#lightboxPanel');
var $cont = $('<div />').addClass("lightboxContainer");
if ($(this).hasAttr("data-bigimage")) {
var bigImage = $(this).attr("data-bigimage");
var $img = $('<img />').attr("src", bigImage).addClass("lightboxImg");
$img.appendTo($cont);
}
if ($(this).hasAttr("data-iframe")) {
var iframe = $(this).attr("data-iframe");
$cont.append(iframe);
}
var imgWidth = parseInt($that.attr("data-width"));
var imgHeight = parseInt($that.attr("data-height"));
var lightboxWidth = imgWidth + 40;

View File

@ -0,0 +1,64 @@
{% extends 'noel/staticpage.html' %}
{% load thumbnail %}
{% block extra_head %}
{{ block.super }}
<script src="/static/js/render_object.js"></script>
<link rel="stylesheet" href="/static/css/noel/inner-details.css" />
{% endblock %}
{% block main_content %}
<div id="lightboxPanel">
<div id="lightboxContent">
</div>
<div id="lightboxClose">
<img src="/static/images/noel/close.jpg" width="12" height="16" id="closeImg" alt="close" /></div>
</div>
<div id="lightbox"></div>
<h1>{{ title }}</h1>
{% if photos %}
<div id="imagesContainer">
<h3>Photos</h3>
{% for p in photos %}
{% thumbnail p.image "640" as bigimage %}
{% thumbnail p.image "164x114" crop="center" as thumb %}
<img src="{{ thumb.url }}" title="{{ p.title }}" class="thumbsDetails" data-bigimage="{{ bigimage.url }}" data-width="{{ bigimage.width }}" data-height="{{ bigimage.height }}" />
{% endthumbnail %}
{% endthumbnail %}
{% endfor %}
</div>
{% endif %}
{% if videos %}
<div id="videosContainer">
<h3>Videos</h3>
{% for v in videos %}
<img src="{{ v.thumbnail }}" class="youtubeLink thumbsDetails" title="{{ v.title }}" data-iframe='{{ v.iframe }}' />
{% endfor %}
</div>
{% endif %}
{% if links %}
<div id="linksContainer">
<h3>Links</h3>
<ul id="linksList">
{% for l in links %}
<li>
<a href="{{ l.url }}" target="_blank">{{ l.title }}</a>
</li>
{% endfor %}
</ul>
</div>
{% endif %}
<a href="Javascript:window.close()">Close</a>
{% endblock %}

View File

@ -251,10 +251,12 @@ $(function() {
<div id="gallery" class="tab_content">
<div class="imgVideoBlock">
<h3 class="orange">Photos</h3>
<h3 class="orange">Albums</h3>
{% for g in obj.galleries.all %}
{% thumbnail g.thumbnail "160x120" crop="center" as thumb %}
<a href="{{ g.get_absolute_url }}" target="_blank">
<img src="{{ thumb.url }}" width="160" height="120" alt="{{ g.title }}" />
</a>
{% endthumbnail %}
{% endfor %}
@ -267,9 +269,9 @@ $(function() {
<div class="imgVideoBlock">
<h3 class="orange">Videos</h3>
{% for v in obj.get_videos %}
<a href="http://youtu.be/{{ v.youtube_id }}" class="youtubeLink" target="_blank">
<img src="{{ v.thumbnail }}" />
</a>
<img src="{{ v.thumbnail }}" class="youtubeLink thumbsDetails" data-iframe='{{ v.iframe }}' />
{% endfor %}
{% endif %}
<!-- <a href="" class="moreLink">More&raquo;</a> -->