diff options
| -rw-r--r-- | application/views/file/fragments/thumbnail.php | 3 | ||||
| -rw-r--r-- | data/css/style.css | 4 | ||||
| -rw-r--r-- | data/js/jquery.lazyload.js | 242 | ||||
| -rw-r--r-- | data/js/script.js | 3 |
4 files changed, 251 insertions, 1 deletions
diff --git a/application/views/file/fragments/thumbnail.php b/application/views/file/fragments/thumbnail.php index 61d15f325..4bdf5be80 100644 --- a/application/views/file/fragments/thumbnail.php +++ b/application/views/file/fragments/thumbnail.php @@ -1,9 +1,10 @@ <?php register_js_include("/data/js/jquery.colorbox.js"); ?> +<?php register_js_include("/data/js/jquery.lazyload.js"); ?> <!-- Comment markers background: http://stackoverflow.com/a/14776780/953022 --> <div class="container container-wide"> <div class="upload_thumbnails"><!-- <?php foreach($items as $key => $item): ?> - --><a rel="gallery" class="colorbox" data-orientation="<?php echo $item["orientation"]; ?>" href="<?php echo site_url("/".$item["id"])."/"; ?>" title="<?php echo htmlentities($item["filename"]); ?>" data-content="<?php echo htmlentities($item["tooltip"]); ?>" data-id="<?php echo $item["id"]; ?>"><img class="thumb" src="<?php echo site_url("file/thumbnail/".$item["id"]); ?>"></a><!-- + --><a rel="gallery" class="colorbox" data-orientation="<?php echo $item["orientation"]; ?>" href="<?php echo site_url("/".$item["id"])."/"; ?>" title="<?php echo htmlentities($item["filename"]); ?>" data-content="<?php echo htmlentities($item["tooltip"]); ?>" data-id="<?php echo $item["id"]; ?>"><img class="thumb lazyload" data-original="<?php echo site_url("file/thumbnail/".$item["id"]); ?>"><noscript><img class="thumb" src="<?php echo site_url("file/thumbnail/".$item["id"]); ?>"></noscript></a><!-- <?php endforeach; ?> --> </div> diff --git a/data/css/style.css b/data/css/style.css index 18a8e8bb1..4af58e9c4 100644 --- a/data/css/style.css +++ b/data/css/style.css @@ -24,6 +24,10 @@ max-width: 300px; } +.lazyload { + display: none; +} + .divider { height:50px; margin:0 9px; diff --git a/data/js/jquery.lazyload.js b/data/js/jquery.lazyload.js new file mode 100644 index 000000000..5a22d8ea8 --- /dev/null +++ b/data/js/jquery.lazyload.js @@ -0,0 +1,242 @@ +/* + * Lazy Load - jQuery plugin for lazy loading images + * + * Copyright (c) 2007-2013 Mika Tuupola + * + * Licensed under the MIT license: + * http://www.opensource.org/licenses/mit-license.php + * + * Project home: + * http://www.appelsiini.net/projects/lazyload + * + * Version: 1.9.3 + * + */ + +(function($, window, document, undefined) { + var $window = $(window); + + $.fn.lazyload = function(options) { + var elements = this; + var $container; + var settings = { + threshold : 0, + failure_limit : 0, + event : "scroll", + effect : "show", + container : window, + data_attribute : "original", + skip_invisible : true, + appear : null, + load : null, + placeholder : "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" + }; + + function update() { + var counter = 0; + + elements.each(function() { + var $this = $(this); + if (settings.skip_invisible && !$this.is(":visible")) { + return; + } + if ($.abovethetop(this, settings) || + $.leftofbegin(this, settings)) { + /* Nothing. */ + } else if (!$.belowthefold(this, settings) && + !$.rightoffold(this, settings)) { + $this.trigger("appear"); + /* if we found an image we'll load, reset the counter */ + counter = 0; + } else { + if (++counter > settings.failure_limit) { + return false; + } + } + }); + + } + + if(options) { + /* Maintain BC for a couple of versions. */ + if (undefined !== options.failurelimit) { + options.failure_limit = options.failurelimit; + delete options.failurelimit; + } + if (undefined !== options.effectspeed) { + options.effect_speed = options.effectspeed; + delete options.effectspeed; + } + + $.extend(settings, options); + } + + /* Cache container as jQuery as object. */ + $container = (settings.container === undefined || + settings.container === window) ? $window : $(settings.container); + + /* Fire one scroll event per scroll. Not one scroll event per image. */ + if (0 === settings.event.indexOf("scroll")) { + $container.bind(settings.event, function() { + return update(); + }); + } + + this.each(function() { + var self = this; + var $self = $(self); + + 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); + } + } + + /* When appear is triggered load original image. */ + $self.one("appear", function() { + if (!this.loaded) { + if (settings.appear) { + var elements_left = elements.length; + settings.appear.call(self, elements_left, settings); + } + $("<img />") + .bind("load", function() { + + var original = $self.attr("data-" + settings.data_attribute); + $self.hide(); + if ($self.is("img")) { + $self.attr("src", original); + } else { + $self.css("background-image", "url('" + original + "')"); + } + $self[settings.effect](settings.effect_speed); + + self.loaded = true; + + /* Remove image from array so it is not looped next time. */ + var temp = $.grep(elements, function(element) { + return !element.loaded; + }); + elements = $(temp); + + if (settings.load) { + var elements_left = elements.length; + settings.load.call(self, elements_left, settings); + } + }) + .attr("src", $self.attr("data-" + settings.data_attribute)); + } + }); + + /* When wanted event is triggered load original image */ + /* by triggering appear. */ + if (0 !== settings.event.indexOf("scroll")) { + $self.bind(settings.event, function() { + if (!self.loaded) { + $self.trigger("appear"); + } + }); + } + }); + + /* Check if something appears when window is resized. */ + $window.bind("resize", function() { + update(); + }); + + /* With IOS5 force loading images when navigating with back button. */ + /* Non optimal workaround. */ + if ((/(?:iphone|ipod|ipad).*os 5/gi).test(navigator.appVersion)) { + $window.bind("pageshow", function(event) { + if (event.originalEvent && event.originalEvent.persisted) { + elements.each(function() { + $(this).trigger("appear"); + }); + } + }); + } + + /* Force initial check if images should appear. */ + $(document).ready(function() { + update(); + }); + + return this; + }; + + /* Convenience methods in jQuery namespace. */ + /* Use as $.belowthefold(element, {threshold : 100, container : window}) */ + + $.belowthefold = function(element, settings) { + var fold; + + if (settings.container === undefined || settings.container === window) { + fold = (window.innerHeight ? window.innerHeight : $window.height()) + $window.scrollTop(); + } else { + fold = $(settings.container).offset().top + $(settings.container).height(); + } + + return fold <= $(element).offset().top - settings.threshold; + }; + + $.rightoffold = function(element, settings) { + var fold; + + if (settings.container === undefined || settings.container === window) { + fold = $window.width() + $window.scrollLeft(); + } else { + fold = $(settings.container).offset().left + $(settings.container).width(); + } + + return fold <= $(element).offset().left - settings.threshold; + }; + + $.abovethetop = function(element, settings) { + var fold; + + if (settings.container === undefined || settings.container === window) { + fold = $window.scrollTop(); + } else { + fold = $(settings.container).offset().top; + } + + return fold >= $(element).offset().top + settings.threshold + $(element).height(); + }; + + $.leftofbegin = function(element, settings) { + var fold; + + if (settings.container === undefined || settings.container === window) { + fold = $window.scrollLeft(); + } else { + fold = $(settings.container).offset().left; + } + + return fold >= $(element).offset().left + settings.threshold + $(element).width(); + }; + + $.inviewport = function(element, settings) { + return !$.rightoffold(element, settings) && !$.leftofbegin(element, settings) && + !$.belowthefold(element, settings) && !$.abovethetop(element, settings); + }; + + /* Custom selectors for your convenience. */ + /* Use as $("img:below-the-fold").something() or */ + /* $("img").filter(":below-the-fold").something() which is faster */ + + $.extend($.expr[":"], { + "below-the-fold" : function(a) { return $.belowthefold(a, {threshold : 0}); }, + "above-the-top" : function(a) { return !$.belowthefold(a, {threshold : 0}); }, + "right-of-screen": function(a) { return $.rightoffold(a, {threshold : 0}); }, + "left-of-screen" : function(a) { return !$.rightoffold(a, {threshold : 0}); }, + "in-viewport" : function(a) { return $.inviewport(a, {threshold : 0}); }, + /* Maintain BC for couple of versions. */ + "above-the-fold" : function(a) { return !$.belowthefold(a, {threshold : 0}); }, + "right-of-fold" : function(a) { return $.rightoffold(a, {threshold : 0}); }, + "left-of-fold" : function(a) { return !$.rightoffold(a, {threshold : 0}); } + }); + +})(jQuery, window, document); diff --git a/data/js/script.js b/data/js/script.js index 57a2b6021..ee8ba9e3c 100644 --- a/data/js/script.js +++ b/data/js/script.js @@ -264,5 +264,8 @@ function fixedEncodeURIComponent (str) { } setup_colorbox(); } + if ($("img.lazyload").length) { + $("img.lazyload").show().lazyload({treshold: 200}); + } }); })(jQuery); |