diff options
| author | Florian Pritz <bluewind@xinu.at> | 2015-08-09 21:27:59 +0200 |
|---|---|---|
| committer | Florian Pritz <bluewind@xinu.at> | 2015-08-09 21:33:02 +0200 |
| commit | deb442de494680114fcbafa824689b00b5e2b2e0 (patch) | |
| tree | 07fe8ba02d3cae808c702644268082587fb3f035 | |
| parent | 76f8f4826e8fab2118ae1b8c39d67da398ca892d (diff) | |
Move thumbnail placeholder and container width to css
If the thumbnail placeholders are properly positioned via css we can
display them early.
We can also take some work off lazyload by setting a placeholder color
in css thus making rendering for lots of thumbnails faster.
Signed-off-by: Florian Pritz <bluewind@xinu.at>
| -rw-r--r-- | public_html/data/css/style.css | 39 | ||||
| -rw-r--r-- | public_html/data/js/application.js | 2 | ||||
| -rw-r--r-- | public_html/data/js/vendor/jquery.lazyload.js | 10 |
3 files changed, 44 insertions, 7 deletions
diff --git a/public_html/data/css/style.css b/public_html/data/css/style.css index 06ab6bcd1..6af673a26 100644 --- a/public_html/data/css/style.css +++ b/public_html/data/css/style.css @@ -25,7 +25,7 @@ } .lazyload { - display: none; + background: #C3C3C3; } .divider { @@ -301,8 +301,45 @@ body { .upload_thumbnails { margin: 0 auto; + width: 152px; } +/* min-width and width increase by 152px each step (one more image per line) + * Take care to align to bootstrap's viewport breakpoints */ +@media (min-width: 389px) { + .upload_thumbnails { + width: 304px; + } +} + +@media (min-width: 541px) { + .upload_thumbnails { + width: 456px; + } +} + +@media (min-width: 693px) { + .upload_thumbnails { + width: 608px; + } +} + +/* bootstrap viewport breakpoint @768px */ +/* bootstrap viewport breakpoint @992px */ +@media (min-width: 992px) { + .upload_thumbnails { + width: 760px; + } +} + +/* bootstrap viewport breakpoint @1220px */ +@media (min-width: 1200px) { + .upload_thumbnails { + width: 1064px; + } +} + +/* XXX: change values above if img width chanegs */ .upload_thumbnails img.thumb, .upload_thumbnails a { width: 150px; diff --git a/public_html/data/js/application.js b/public_html/data/js/application.js index 374ae56fe..71aac8328 100644 --- a/public_html/data/js/application.js +++ b/public_html/data/js/application.js @@ -88,7 +88,7 @@ define( setupLazyLoadingImages: function () { if ($(ui.lazyLoadingImages).length > 0) { - $(ui.lazyLoadingImages).show().lazyload({treshold: 200}); + $(ui.lazyLoadingImages).lazyload({treshold: 200}); } } }; diff --git a/public_html/data/js/vendor/jquery.lazyload.js b/public_html/data/js/vendor/jquery.lazyload.js index 5a22d8ea8..0b1b86e00 100644 --- a/public_html/data/js/vendor/jquery.lazyload.js +++ b/public_html/data/js/vendor/jquery.lazyload.js @@ -89,11 +89,11 @@ self.loaded = false; /* If no src attribute given use data:uri. */ - if ($self.attr("src") === undefined || $self.attr("src") === false) { - if ($self.is("img")) { - $self.attr("src", settings.placeholder); - } - } + //if ($self.attr("src") === undefined || $self.attr("src") === false) { + //if ($self.is("img")) { + //$self.attr("src", settings.placeholder); + //} + //} /* When appear is triggered load original image. */ $self.one("appear", function() { |