complete front-end view for media galleries

itf/mediagallery/models.py

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

itf/mediagallery/urls.py

@@ -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'),

itf/mediagallery/views.py

@@ -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", "")

itf/static/js/render_object.js

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

itf/templates/mediagallery/view.html

@@ -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 %}

itf/templates/modules/scriptbank/script.html

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