Mercurial > public > sg101

changeset 643:081a88b3bfc8

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Improve forum images resize script. Issue #32.
author Brian Neal <bgneal@gmail.com>
date Sun, 10 Mar 2013 12:47:21 -0500
parents cb61b53472d2
children d63c8ccc29a7
files forums/static/js/forums.js sg101/settings/base.py sg101/templates/forums/topic.html static/js/jquery.imagesloaded.min.js
diffstat 4 files changed, 15 insertions(+), 4 deletions(-) [+]
line wrap: on
line diff
--- a/forums/static/js/forums.js	Sat Mar 09 18:24:46 2013 -0600
+++ b/forums/static/js/forums.js	Sun Mar 10 12:47:21 2013 -0500
@@ -288,10 +288,13 @@
 
    initAttachments();
 
-   $('div.forum-post-body img').fadeIn('fast', function() {
-         var pic = $(this);
-         if (pic.width() > 720) {
-            pic.css('width', '720px');
+   $('div.forum-post-body img').imagesLoaded(function($images, $proper, $broken) {
+      $proper.each(function(index) {
+         var $pic = $(this);
+         if ($pic.width() > 660) {
+            $pic.css('width', '660px');
+            $pic.wrap($('<a/>').attr('href', $pic.attr('src')).attr('title', 'Click to view full size'));
          }
+      });
    });
 });
--- a/sg101/settings/base.py	Sat Mar 09 18:24:46 2013 -0600
+++ b/sg101/settings/base.py	Sun Mar 10 12:47:21 2013 -0500
@@ -313,6 +313,9 @@
 # These dictionaries are used by core/templatetags/script_tags, and
 # should also be used by developers when creating form media classes.
 GPP_THIRD_PARTY_JS = {
+    'imagesloaded': [
+        'js/jquery.imagesloaded.min.js',
+    ],
     'jquery': [
         'http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js',
     ],
--- a/sg101/templates/forums/topic.html	Sat Mar 09 18:24:46 2013 -0600
+++ b/sg101/templates/forums/topic.html	Sun Mar 10 12:47:21 2013 -0500
@@ -2,11 +2,13 @@
 {% load url from future %}
 {% load forum_tags %}
 {% load core_tags %}
+{% load script_tags %}
 {% block title %}Forums: {{ topic.name }}{% endblock %}
 {% block custom_meta %}
    {% open_graph_meta_tags topic %}
 {% endblock %}
 {% block custom_js %}
+   {% script_tags 'imagesloaded' %}
    {{ form.media }}
    {% include "forums/jump_box.js" %}
 {% endblock %}
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/static/js/jquery.imagesloaded.min.js	Sun Mar 10 12:47:21 2013 -0500
@@ -0,0 +1,3 @@
+(function(c,q){var m="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";c.fn.imagesLoaded=function(f){function n(){var b=c(j),a=c(h);d&&(h.length?d.reject(e,b,a):d.resolve(e));c.isFunction(f)&&f.call(g,e,b,a)}function p(b){k(b.target,"error"===b.type)}function k(b,a){b.src===m||-1!==c.inArray(b,l)||(l.push(b),a?h.push(b):j.push(b),c.data(b,"imagesLoaded",{isBroken:a,src:b.src}),r&&d.notifyWith(c(b),[a,e,c(j),c(h)]),e.length===l.length&&(setTimeout(n),e.unbind(".imagesLoaded",
+p)))}var g=this,d=c.isFunction(c.Deferred)?c.Deferred():0,r=c.isFunction(d.notify),e=g.find("img").add(g.filter("img")),l=[],j=[],h=[];c.isPlainObject(f)&&c.each(f,function(b,a){if("callback"===b)f=a;else if(d)d[b](a)});e.length?e.bind("load.imagesLoaded error.imagesLoaded",p).each(function(b,a){var d=a.src,e=c.data(a,"imagesLoaded");if(e&&e.src===d)k(a,e.isBroken);else if(a.complete&&a.naturalWidth!==q)k(a,0===a.naturalWidth||0===a.naturalHeight);else if(a.readyState||a.complete)a.src=m,a.src=d}):
+n();return d?d.promise(g):g}})(jQuery);