Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

Add images at a later time #152

Closed
wants to merge 8 commits into from

2 participants

@stefanhayden

Adding a function that lets images be added at an arbitrary time after slideshow is initiated. I added this so I could load images after pageload.

@srobbin
Owner

Hi Stefan,

Thanks for the pull request. I hadn't documented this before, but you can always access the images array through your instance. I've updated the documentation to make this more apparent.

$('.foo').backstretch([
  'path/to/image.jpg',
  'path/to/image2.jpg',
  'path/to/image3.jpg'
]);

// Access the instance
var instance = $('.foo').data('backstretch');

// Then, you can manipulate the images array directly
instance.images.push('path/to/image4.jpg')
@srobbin srobbin closed this
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
This page is out of date. Refresh to see the latest.
Showing with 135 additions and 11 deletions.
  1. +28 −0 README.md
  2. +106 −10 jquery.backstretch.js
  3. +1 −1  jquery.backstretch.min.js
View
28 README.md
@@ -38,6 +38,14 @@ The ratio of the width/height of the image doesn't always jive with the width/he
This parameter controls whether or not we center the image on the Y axis to account for the aforementioned discrepancy. (type=Boolean, default=true)
+### default_height
+
+set a default height to be used to resize image before image loads and we check for real image size. (type=Number, default=undefined)
+
+### default_width
+
+set a default width to be used to resize image before image loads and we check for real image size. (type=number, default=undefined)
+
### fade
This is the speed at which the image will fade in. Integers in milliseconds are accepted, as well as standard jQuery speed strings (slow, normal, fast). (type=Integer or String, default=0)
@@ -46,6 +54,18 @@ This is the speed at which the image will fade in. Integers in milliseconds are
The amount of time in between slides, when using Backstretch as a slideshow, expressed as the number of milliseconds. (type=Integer, default=5000)
+### pause
+
+the default state of the slide show is to start playing but this will turn it off (type=Bool, default=false)
+
+### lazyload
+
+default loads all images at start. Or you can load an image by command or as next slide is requested (type=Bool, default=false)
+
+### start
+
+the slide index you want to show first (type=Integer, default=0)
+
## Slideshow API
Once you've instantiated Backstretch, you can access its instance via that element's data attribute. There are many actions that you can perform on an instance, though most of them are only applicable if you've created a slideshow:
@@ -85,6 +105,14 @@ Pause the slideshow.
Resume a paused slideshow.
+### cacheNext()
+
+Force the next image to be loaded. Useful for when lazyload option is true.
+
+### cachePrev()
+
+Force the previous image to be loaded. Useful for when lazyload option is true.
+
### destroy(preserveBackground)
Destroy the Backstretch instance. Optionally, you can pass in a Boolean parameter, preserveBackground, to determine whether or not you'd like to keep the current image stretched as the background image.
View
116 jquery.backstretch.js
@@ -14,6 +14,10 @@
$.error("No images were supplied for Backstretch");
}
+ if (images === undefined) {
+ $.error("No images were supplied for Backstretch");
+ }
+
/*
* Scroll the page one pixel to get the right window height on iOS
* Pretty harmless for everyone else
@@ -61,6 +65,9 @@
, centeredY: true // Should we center the image on the Y axis?
, duration: 5000 // Amount of time in between slides (if slideshow)
, fade: 0 // Speed of fade transition between slides
+ , paused: false // the default is the slideshow will advance to next slide
+ , lazyload: false // load all the images be default
+ , start: 0 // start on the first image passed
};
/* STYLES
@@ -98,16 +105,25 @@
var Backstretch = function (container, images, options) {
this.options = $.extend({}, $.fn.backstretch.defaults, options || {});
+ //let slideshow start paused
+ if(this.options.paused) {
+ this.paused = true;
+ }
+
/* In its simplest form, we allow Backstretch to be called on an image path.
* e.g. $.backstretch('/path/to/image.jpg')
* So, we need to turn this back into an array.
*/
this.images = $.isArray(images) ? images : [images];
- // Preload images
- $.each(this.images, function () {
- $('<img />')[0].src = this;
- });
+ if(options.lazyload && this.images[options.start]) {
+ $('<img />')[0].src = this.images[options.start];
+ } else {
+ // Preload images
+ $.each(this.images, function () {
+ $('<img />')[0].src = this;
+ });
+ }
// Convenience reference to know if the container is body.
this.isBody = container === document.body;
@@ -145,7 +161,7 @@
});
// Set the first image
- this.index = 0;
+ this.index = options.start;
this.show(this.index);
// Listen for resize
@@ -207,10 +223,10 @@
// Vars
var self = this
- , oldImage = self.$wrap.find('img').addClass('deleteable')
- , evt = $.Event('backstretch.show', {
+ this.evt = $.Event('backstretch.show', {
relatedTarget: self.$container[0]
});
+ this.oldImage = self.$wrap.find('img').addClass('deleteable')
// Pause the slideshow
clearInterval(self.interval);
@@ -219,6 +235,11 @@
self.$img = $('<img />')
.css(styles.img)
.bind('load', function (e) {
+
+ self.draw(e, this);
+
+ return;
+
var imgWidth = this.width || $(e.target).width()
, imgHeight = this.height || $(e.target).height();
@@ -228,10 +249,18 @@
// Resize
self.resize();
+ var fade = self.options.fade;
+
+ //if first slide then do not fade
+ if(!self.has_drawn_first_slide) {
+ fade = 0;
+ self.has_drawn_first_slide = true;
+ }
+
// Show the image, then delete the old one
// "speed" option has been deprecated, but we want backwards compatibilty
- $(this).fadeIn(self.options.speed || self.options.fade, function () {
- oldImage.remove();
+ $(this).fadeIn(fade, function () {
+ self.oldImage.remove();
// Resume the slideshow
if (!self.paused) {
@@ -239,21 +268,74 @@
}
// Trigger the event
- self.$container.trigger(evt);
+ self.$container.trigger(self.evt);
});
+
})
.appendTo(self.$wrap);
+ if(!self.has_drawn_first_slide) {
+ //draw the first slide befor it loads
+ self.draw({}, self.$img[0]);
+ }
+
// Hack for IE img onload event
self.$img.attr('src', self.images[index]);
return self;
}
+ , draw: function(e, _this) {
+
+ var imgWidth = _this.width || $(e.target).width() || this.options.default_width
+ , imgHeight = _this.height || $(e.target).height() || this.options.default_height
+ , self = this;
+
+ // Save the ratio
+ $(_this).data('ratio', imgWidth / imgHeight);
+
+ // Resize
+ self.resize();
+
+ var fade = self.options.fade;
+
+ //if first slide then do not fade
+ if(!self.has_drawn_first_slide) {
+ fade = 0;
+ self.has_drawn_first_slide = true;
+ }
+
+ // Show the image, then delete the old one
+ // "speed" option has been deprecated, but we want backwards compatibilty
+ $(_this).fadeIn(fade, function () {
+ self.oldImage.remove();
+
+ // Resume the slideshow
+ if (!self.paused) {
+ self.cycle();
+ }
+
+ // Trigger the event
+ self.$container.trigger(self.evt);
+ });
+ }
+
+ , cacheNext: function () {
+ // Cache Next slide
+ var index = (this.index < this.images.length - 1 ? this.index + 1 : 0);
+ $('<img />')[0].src = this.images[index];
+ }
+
, next: function () {
// Next slide
return this.show(this.index < this.images.length - 1 ? this.index + 1 : 0);
}
+ , cachePrev: function () {
+ // Cache Previous slide
+ var index = (this.index === 0 ? this.images.length - 1 : this.index - 1);
+ $('<img />')[0].src = this.images[index];
+ }
+
, prev: function () {
// Previous slide
return this.show(this.index === 0 ? this.images.length - 1 : this.index - 1);
@@ -301,6 +383,20 @@
}
this.$container.removeData('backstretch');
}
+ , addImages: function(images) {
+ var self = this
+ this.images_to_add = $.isArray(images) ? images : [images];
+
+ // Preload images
+ $.each(this.images_to_add, function () {
+ if(!self.options.lazyload) {
+ $('<img />')[0].src = this;
+ }
+ self.images.push(this);
+ });
+
+ return this;
+ }
};
/* SUPPORTS FIXED POSITION?
View
2  jquery.backstretch.min.js
@@ -1,4 +1,4 @@
/*! Backstretch - v2.0.1 - 2012-10-01
* http://srobbin.com/jquery-plugins/backstretch/
* Copyright (c) 2012 Scott Robbin; Licensed MIT */
-(function(e,t,n){"use strict";e.fn.backstretch=function(r,s){return(r===n||r.length===0)&&e.error("No images were supplied for Backstretch"),e(t).scrollTop()===0&&t.scrollTo(0,0),this.each(function(){var t=e(this),n=t.data("backstretch");n&&(s=e.extend(n.options,s),n.destroy(!0)),n=new i(this,r,s),t.data("backstretch",n)})},e.backstretch=function(t,n){return e("body").backstretch(t,n).data("backstretch")},e.expr[":"].backstretch=function(t){return e(t).data("backstretch")!==n},e.fn.backstretch.defaults={centeredX:!0,centeredY:!0,duration:5e3,fade:0};var r={wrap:{left:0,top:0,overflow:"hidden",margin:0,padding:0,height:"100%",width:"100%",zIndex:-999999},img:{position:"absolute",display:"none",margin:0,padding:0,border:"none",width:"auto",height:"auto",maxWidth:"none",zIndex:-999999}},i=function(n,i,o){this.options=e.extend({},e.fn.backstretch.defaults,o||{}),this.images=e.isArray(i)?i:[i],e.each(this.images,function(){e("<img />")[0].src=this}),this.isBody=n===document.body,this.$container=e(n),this.$wrap=e('<div class="backstretch"></div>').css(r.wrap).appendTo(this.$container),this.$root=this.isBody?s?e(t):e(document):this.$container;if(!this.isBody){var u=this.$container.css("position"),a=this.$container.css("zIndex");this.$container.css({position:u==="static"?"relative":u,zIndex:a==="auto"?0:a,background:"none"}),this.$wrap.css({zIndex:-999998})}this.$wrap.css({position:this.isBody&&s?"fixed":"absolute"}),this.index=0,this.show(this.index),e(t).on("resize.backstretch",e.proxy(this.resize,this)).on("orientationchange.backstretch",e.proxy(function(){this.isBody&&t.pageYOffset===0&&(t.scrollTo(0,1),this.resize())},this))};i.prototype={resize:function(){try{var e={left:0,top:0},n=this.isBody?this.$root.width():this.$root.innerWidth(),r=n,i=this.isBody?t.innerHeight?t.innerHeight:this.$root.height():this.$root.innerHeight(),s=r/this.$img.data("ratio"),o;s>=i?(o=(s-i)/2,this.options.centeredY&&(e.top="-"+o+"px")):(s=i,r=s*this.$img.data("ratio"),o=(r-n)/2,this.options.centeredX&&(e.left="-"+o+"px")),this.$wrap.css({width:n,height:i}).find("img:not(.deleteable)").css({width:r,height:s}).css(e)}catch(u){}return this},show:function(t){if(Math.abs(t)>this.images.length-1)return;this.index=t;var n=this,i=n.$wrap.find("img").addClass("deleteable"),s=e.Event("backstretch.show",{relatedTarget:n.$container[0]});return clearInterval(n.interval),n.$img=e("<img />").css(r.img).bind("load",function(t){var r=this.width||e(t.target).width(),o=this.height||e(t.target).height();e(this).data("ratio",r/o),n.resize(),e(this).fadeIn(n.options.speed||n.options.fade,function(){i.remove(),n.paused||n.cycle(),n.$container.trigger(s)})}).appendTo(n.$wrap),n.$img.attr("src",n.images[t]),n},next:function(){return this.show(this.index<this.images.length-1?this.index+1:0)},prev:function(){return this.show(this.index===0?this.images.length-1:this.index-1)},pause:function(){return this.paused=!0,this},resume:function(){return this.paused=!1,this.next(),this},cycle:function(){return this.images.length>1&&(clearInterval(this.interval),this.interval=setInterval(e.proxy(function(){this.paused||this.next()},this),this.options.duration)),this},destroy:function(n){e(t).off("resize.backstretch orientationchange.backstretch"),clearInterval(this.interval),n||this.$wrap.remove(),this.$container.removeData("backstretch")}};var s=function(){var e=navigator.userAgent,n=navigator.platform,r=e.match(/AppleWebKit\/([0-9]+)/),i=!!r&&r[1],s=e.match(/Fennec\/([0-9]+)/),o=!!s&&s[1],u=e.match(/Opera Mobi\/([0-9]+)/),a=!!u&&u[1],f=e.match(/MSIE ([0-9]+)/),l=!!f&&f[1];return!((n.indexOf("iPhone")>-1||n.indexOf("iPad")>-1||n.indexOf("iPod")>-1)&&i&&i<534||t.operamini&&{}.toString.call(t.operamini)==="[object OperaMini]"||u&&a<7458||e.indexOf("Android")>-1&&i&&i<533||o&&o<6||"palmGetResource"in t&&i&&i<534||e.indexOf("MeeGo")>-1&&e.indexOf("NokiaBrowser/8.5.0")>-1||l&&l<=6)}()})(jQuery,window);
+;(function(a,b,c){"use strict";a.fn.backstretch=function(d,f){if(d===c||d.length===0){a.error("No images were supplied for Backstretch")}if(d===c){a.error("No images were supplied for Backstretch")}if(a(b).scrollTop()===0){b.scrollTo(0,0)}return this.each(function(){var b=a(this),c=b.data("backstretch");if(c){f=a.extend(c.options,f);c.destroy(true)}c=new e(this,d,f);b.data("backstretch",c)})};a.backstretch=function(b,c){return a("body").backstretch(b,c).data("backstretch")};a.expr[":"].backstretch=function(b){return a(b).data("backstretch")!==c};a.fn.backstretch.defaults={centeredX:true,centeredY:true,duration:5e3,fade:0,paused:false,lazyload:false,start:0};var d={wrap:{left:0,top:0,overflow:"hidden",margin:0,padding:0,height:"100%",width:"100%",zIndex:-999999},img:{position:"absolute",display:"none",margin:0,padding:0,border:"none",width:"auto",height:"auto",maxWidth:"none",zIndex:-999999}};var e=function(c,e,g){this.options=a.extend({},a.fn.backstretch.defaults,g||{});if(this.options.paused){this.paused=true}this.images=a.isArray(e)?e:[e];if(g.lazyload&&this.images[g.start]){a("<img />")[0].src=this.images[g.start]}else{a.each(this.images,function(){a("<img />")[0].src=this})}this.isBody=c===document.body;this.$container=a(c);this.$wrap=a('<div class="backstretch"></div>').css(d.wrap).appendTo(this.$container);this.$root=this.isBody?f?a(b):a(document):this.$container;if(!this.isBody){var h=this.$container.css("position"),i=this.$container.css("zIndex");this.$container.css({position:h==="static"?"relative":h,zIndex:i==="auto"?0:i,background:"none"});this.$wrap.css({zIndex:-999998})}this.$wrap.css({position:this.isBody&&f?"fixed":"absolute"});this.index=g.start;this.show(this.index);a(b).on("resize.backstretch",a.proxy(this.resize,this)).on("orientationchange.backstretch",a.proxy(function(){if(this.isBody&&b.pageYOffset===0){b.scrollTo(0,1);this.resize()}},this))};e.prototype={resize:function(){try{var a={left:0,top:0},c=this.isBody?this.$root.width():this.$root.innerWidth(),d=c,e=this.isBody?b.innerHeight?b.innerHeight:this.$root.height():this.$root.innerHeight(),f=d/this.$img.data("ratio"),g;if(f>=e){g=(f-e)/2;if(this.options.centeredY){a.top="-"+g+"px"}}else{f=e;d=f*this.$img.data("ratio");g=(d-c)/2;if(this.options.centeredX){a.left="-"+g+"px"}}this.$wrap.css({width:c,height:e}).find("img:not(.deleteable)").css({width:d,height:f}).css(a)}catch(h){}return this},show:function(b){if(Math.abs(b)>this.images.length-1){return}else{this.index=b}var c=this;this.evt=a.Event("backstretch.show",{relatedTarget:c.$container[0]});this.oldImage=c.$wrap.find("img").addClass("deleteable");clearInterval(c.interval);c.$img=a("<img />").css(d.img).bind("load",function(b){c.draw(b,this);return;var d=this.width||a(b.target).width(),e=this.height||a(b.target).height();a(this).data("ratio",d/e);c.resize();var f=c.options.fade;if(!c.has_drawn_first_slide){f=0;c.has_drawn_first_slide=true}a(this).fadeIn(f,function(){c.oldImage.remove();if(!c.paused){c.cycle()}c.$container.trigger(c.evt)})}).appendTo(c.$wrap);if(!c.has_drawn_first_slide){c.draw({},c.$img[0])}c.$img.attr("src",c.images[b]);return c},draw:function(b,c){var d=c.width||a(b.target).width()||this.options.default_width,e=c.height||a(b.target).height()||this.options.default_height,f=this;a(c).data("ratio",d/e);f.resize();var g=f.options.fade;if(!f.has_drawn_first_slide){g=0;f.has_drawn_first_slide=true}a(c).fadeIn(g,function(){f.oldImage.remove();if(!f.paused){f.cycle()}f.$container.trigger(f.evt)})},cacheNext:function(){var b=this.index<this.images.length-1?this.index+1:0;a("<img />")[0].src=this.images[b]},next:function(){return this.show(this.index<this.images.length-1?this.index+1:0)},cachePrev:function(){var b=this.index===0?this.images.length-1:this.index-1;a("<img />")[0].src=this.images[b]},prev:function(){return this.show(this.index===0?this.images.length-1:this.index-1)},pause:function(){this.paused=true;return this},resume:function(){this.paused=false;this.next();return this},cycle:function(){if(this.images.length>1){clearInterval(this.interval);this.interval=setInterval(a.proxy(function(){if(!this.paused){this.next()}},this),this.options.duration)}return this},destroy:function(c){a(b).off("resize.backstretch orientationchange.backstretch");clearInterval(this.interval);if(!c){this.$wrap.remove()}this.$container.removeData("backstretch")},addImages:function(b){var c=this;this.images_to_add=a.isArray(b)?b:[b];a.each(this.images_to_add,function(){if(!c.options.lazyload){a("<img />")[0].src=this}c.images.push(this)});return this}};var f=function(){var a=navigator.userAgent,c=navigator.platform,d=a.match(/AppleWebKit\/([0-9]+)/),e=!!d&&d[1],f=a.match(/Fennec\/([0-9]+)/),g=!!f&&f[1],h=a.match(/Opera Mobi\/([0-9]+)/),i=!!h&&h[1],j=a.match(/MSIE ([0-9]+)/),k=!!j&&j[1];return!((c.indexOf("iPhone")>-1||c.indexOf("iPad")>-1||c.indexOf("iPod")>-1)&&e&&e<534||b.operamini&&{}.toString.call(b.operamini)==="[object OperaMini]"||h&&i<7458||a.indexOf("Android")>-1&&e&&e<533||g&&g<6||"palmGetResource"in b&&e&&e<534||a.indexOf("MeeGo")>-1&&a.indexOf("NokiaBrowser/8.5.0")>-1||k&&k<=6)}()})(jQuery,window)
Something went wrong with that request. Please try again.