diff --git a/examples/addlmarkup-slideshow.html b/examples/addlmarkup-slideshow.html
new file mode 100755
index 0000000..5164c1d
--- /dev/null
+++ b/examples/addlmarkup-slideshow.html
@@ -0,0 +1,87 @@
+
+
+
+
+
+
+
+
+
Slideshow With Additional Markup
+
This demonstrates how to use additional markup in a backstretch slideshow. Just pass in an array of addlMarkup in the options.
+
Something to note: if you do not supply a div
surrounding the addlMarkup, it will be added for you. This is a convenience to prevent the generated styles from conflicting with your additional markup.
+
<style>
+ .backstretch > div {
+ background: url("bg-pattern.png") repeat scroll 0 0 transparent;
+ }
+ .backstretch h1 {
+ color: red;
+ }
+</style>
+
+<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
+<script src="jquery.backstretch.min.js"></script>
+<script>
+ $.backstretch([
+ "pot-holder.jpg",
+ "coffee.jpg",
+ "dome.jpg"
+ ], {
+ fade: 750,
+ duration: 4000,
+ addlMarkup: [
+ '<h1>Pot Holder</h1>',
+ '<h1>Coffee</h1>',
+ '<h1>Dome</h1>'
+ ]
+ });
+</script>
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/examples/addlmarkup.html b/examples/addlmarkup.html
new file mode 100755
index 0000000..e0a9e87
--- /dev/null
+++ b/examples/addlmarkup.html
@@ -0,0 +1,75 @@
+
+
+
+
+
+
+
+
+
Additional Markup
+
This demonstrates how to use additional markup in backstretch. Specifically, this example shows how to use a pattern overlay on top of Backstretch.
+
<style>
+ .backstretch > div {
+ background: url("bg-pattern.png") repeat scroll 0 0 transparent;
+ }
+</style>
+
+<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
+<script src="jquery.backstretch.min.js"></script>
+<script>
+ $.backstretch("pot-holder.jpg", { addlMarkup: "<div />" });
+</script>
+
Other Elements
+
Or, if you'd like, you can also attach Backstretch to another block level element on the page.
+
+
The background image on this element was set using Backstretch with addlMarkup to provide the texture overlay.
+
+
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
+<script src="jquery.backstretch.min.js"></script>
+<script>
+ $(".other").backstretch("coffee.jpg", { addlMarkup: "<div />" });
+</script>
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/jquery.backstretch.js b/jquery.backstretch.js
index f63941a..790a0b8 100644
--- a/jquery.backstretch.js
+++ b/jquery.backstretch.js
@@ -61,10 +61,11 @@
, 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
+ , addlMarkup: [] // Any additional markup
};
/* STYLES
- *
+ *
* Baked-in styles that we'll apply to our elements.
* In an effort to keep the plugin simple, these are not exposed as options.
* That said, anyone can override these in their own stylesheet.
@@ -103,11 +104,18 @@
* So, we need to turn this back into an array.
*/
this.images = $.isArray(images) ? images : [images];
+ this.options.addlMarkup = $.isArray(this.options.addlMarkup) ? this.options.addlMarkup : [this.options.addlMarkup];
+
+ // This is just being nice. Make sure we have a div wrapping addlMarkup
+ var temp = this.options.addlMarkup;
+ $.each(this.options.addlMarkup, function (i, el) {
+ if ($(this).get(0).tagName != 'DIV') temp[i] = '' + el +'
';
+ });
// Preload images
$.each(this.images, function () {
$('')[0].src = this;
- });
+ });
// Convenience reference to know if the container is body.
this.isBody = container === document.body;
@@ -134,7 +142,7 @@
, zIndex: zIndex === 'auto' ? 0 : zIndex
, background: 'none'
});
-
+
// Needs a higher z-index
this.$wrap.css({zIndex: -999998});
}
@@ -207,7 +215,7 @@
// Vars
var self = this
- , oldImage = self.$wrap.find('img').addClass('deleteable')
+ , oldImage = self.$wrap.find('>*').addClass('deleteable')
, evt = $.Event('backstretch.show', {
relatedTarget: self.$container[0]
});
@@ -215,34 +223,42 @@
// Pause the slideshow
clearInterval(self.interval);
+ // New addlMarkup
+ self.$addlMarkup = $( self.options.addlMarkup[index] || self.options.addlMarkup[0])
+ .css(styles.wrap)
+ .css({'position' : 'absolute'});
+
// New image
- self.$img = $('')
- .css(styles.img)
- .bind('load', function (e) {
- var imgWidth = this.width || $(e.target).width()
- , imgHeight = this.height || $(e.target).height();
-
- // Save the ratio
- $(this).data('ratio', imgWidth / imgHeight);
-
- // Resize
- self.resize();
-
- // 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();
-
- // Resume the slideshow
- if (!self.paused) {
- self.cycle();
- }
-
- // Trigger the event
- self.$container.trigger(evt);
- });
- })
- .appendTo(self.$wrap);
+ self.$img = $('');
+
+ self.$img.css(styles.img)
+ .bind('load', function (e) {
+ var imgWidth = this.width || $(e.target).width()
+ , imgHeight = this.height || $(e.target).height();
+
+ // Save the ratio
+ $(this).data('ratio', imgWidth / imgHeight);
+
+ // Resize
+ self.resize();
+
+ // Show the image, then delete the old one
+ // "speed" option has been deprecated, but we want backwards compatibilty
+ $(self.$addlMarkup).fadeIn(self.options.speed || self.options.fade);
+ $(this).fadeIn(self.options.speed || self.options.fade, function () {
+ oldImage.remove();
+
+ // Resume the slideshow
+ if (!self.paused) {
+ self.cycle();
+ }
+
+ // Trigger the event
+ self.$container.trigger(evt);
+ });
+ })
+ .add(self.$addlMarkup)
+ .appendTo(self.$wrap);
// Hack for IE img onload event
self.$img.attr('src', self.images[index]);
@@ -297,7 +313,7 @@
// Remove Backstretch
if(!preserveBackground) {
- this.$wrap.remove();
+ this.$wrap.remove();
}
this.$container.removeData('backstretch');
}
@@ -332,23 +348,23 @@
return !(
// iOS 4.3 and older : Platform is iPhone/Pad/Touch and Webkit version is less than 534 (ios5)
((platform.indexOf( "iPhone" ) > -1 || platform.indexOf( "iPad" ) > -1 || platform.indexOf( "iPod" ) > -1 ) && wkversion && wkversion < 534) ||
-
+
// Opera Mini
(window.operamini && ({}).toString.call( window.operamini ) === "[object OperaMini]") ||
(operammobilematch && omversion < 7458) ||
-
+
//Android lte 2.1: Platform is Android and Webkit version is less than 533 (Android 2.2)
(ua.indexOf( "Android" ) > -1 && wkversion && wkversion < 533) ||
-
+
// Firefox Mobile before 6.0 -
(ffversion && ffversion < 6) ||
-
+
// WebOS less than 3
("palmGetResource" in window && wkversion && wkversion < 534) ||
-
+
// MeeGo
(ua.indexOf( "MeeGo" ) > -1 && ua.indexOf( "NokiaBrowser/8.5.0" ) > -1) ||
-
+
// IE6
(ieversion && ieversion <= 6)
);
diff --git a/jquery.backstretch.min.js b/jquery.backstretch.min.js
index 115e52a..496d081 100644
--- a/jquery.backstretch.min.js
+++ b/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("")[0].src=this}),this.isBody=n===document.body,this.$container=e(n),this.$wrap=e('').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("").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.index1&&(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);
\ No newline at end of file
+(function(e,t,n){"use strict";e.fn.backstretch=function(r,s){if(r===n||r.length===0){e.error("No images were supplied for Backstretch")}if(e(t).scrollTop()===0){t.scrollTo(0,0)}return this.each(function(){var t=e(this),n=t.data("backstretch");if(n){s=e.extend(n.options,s);n.destroy(true)}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:true,centeredY:true,duration:5e3,fade:0,addlMarkup:[]};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}};var i=function(n,i,o){this.options=e.extend({},e.fn.backstretch.defaults,o||{});this.images=e.isArray(i)?i:[i];this.options.addlMarkup=e.isArray(this.options.addlMarkup)?this.options.addlMarkup:[this.options.addlMarkup];var u=this.options.addlMarkup;e.each(this.options.addlMarkup,function(t,n){if(e(this).get(0).tagName!="DIV")u[t]=""+n+"
"});e.each(this.images,function(){e("")[0].src=this});this.isBody=n===document.body;this.$container=e(n);this.$wrap=e('').css(r.wrap).appendTo(this.$container);this.$root=this.isBody?s?e(t):e(document):this.$container;if(!this.isBody){var a=this.$container.css("position"),f=this.$container.css("zIndex");this.$container.css({position:a==="static"?"relative":a,zIndex:f==="auto"?0:f,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(){if(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;if(s>=i){o=(s-i)/2;if(this.options.centeredY){e.top="-"+o+"px"}}else{s=i;r=s*this.$img.data("ratio");o=(r-n)/2;if(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}else{this.index=t}var n=this,i=n.$wrap.find(">*").addClass("deleteable"),s=e.Event("backstretch.show",{relatedTarget:n.$container[0]});clearInterval(n.interval);n.$addlMarkup=e(n.options.addlMarkup[t]||n.options.addlMarkup[0]).css(r.wrap).css({position:"absolute"});n.$img=e("");n.$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(n.$addlMarkup).fadeIn(n.options.speed||n.options.fade);e(this).fadeIn(n.options.speed||n.options.fade,function(){i.remove();if(!n.paused){n.cycle()}n.$container.trigger(s)})}).add(n.$addlMarkup).appendTo(n.$wrap);n.$img.attr("src",n.images[t]);return n},next:function(){return this.show(this.index1){clearInterval(this.interval);this.interval=setInterval(e.proxy(function(){if(!this.paused){this.next()}},this),this.options.duration)}return this},destroy:function(n){e(t).off("resize.backstretch orientationchange.backstretch");clearInterval(this.interval);if(!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)
\ No newline at end of file
diff --git a/src/jquery.backstretch.js b/src/jquery.backstretch.js
index 3aa3ed4..790a0b8 100644
--- a/src/jquery.backstretch.js
+++ b/src/jquery.backstretch.js
@@ -1,10 +1,6 @@
-/*
- * Backstretch
- * http://srobbin.com/jquery-plugins/backstretch/
- *
- * Copyright (c) 2012 Scott Robbin
- * Licensed under the MIT license.
- */
+/*! Backstretch - v2.0.1 - 2012-10-01
+* http://srobbin.com/jquery-plugins/backstretch/
+* Copyright (c) 2012 Scott Robbin; Licensed MIT */
;(function ($, window, undefined) {
'use strict';
@@ -65,10 +61,11 @@
, 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
+ , addlMarkup: [] // Any additional markup
};
/* STYLES
- *
+ *
* Baked-in styles that we'll apply to our elements.
* In an effort to keep the plugin simple, these are not exposed as options.
* That said, anyone can override these in their own stylesheet.
@@ -107,11 +104,18 @@
* So, we need to turn this back into an array.
*/
this.images = $.isArray(images) ? images : [images];
+ this.options.addlMarkup = $.isArray(this.options.addlMarkup) ? this.options.addlMarkup : [this.options.addlMarkup];
+
+ // This is just being nice. Make sure we have a div wrapping addlMarkup
+ var temp = this.options.addlMarkup;
+ $.each(this.options.addlMarkup, function (i, el) {
+ if ($(this).get(0).tagName != 'DIV') temp[i] = '' + el +'
';
+ });
// Preload images
$.each(this.images, function () {
$('')[0].src = this;
- });
+ });
// Convenience reference to know if the container is body.
this.isBody = container === document.body;
@@ -138,7 +142,7 @@
, zIndex: zIndex === 'auto' ? 0 : zIndex
, background: 'none'
});
-
+
// Needs a higher z-index
this.$wrap.css({zIndex: -999998});
}
@@ -211,7 +215,7 @@
// Vars
var self = this
- , oldImage = self.$wrap.find('img').addClass('deleteable')
+ , oldImage = self.$wrap.find('>*').addClass('deleteable')
, evt = $.Event('backstretch.show', {
relatedTarget: self.$container[0]
});
@@ -219,34 +223,42 @@
// Pause the slideshow
clearInterval(self.interval);
+ // New addlMarkup
+ self.$addlMarkup = $( self.options.addlMarkup[index] || self.options.addlMarkup[0])
+ .css(styles.wrap)
+ .css({'position' : 'absolute'});
+
// New image
- self.$img = $('')
- .css(styles.img)
- .bind('load', function (e) {
- var imgWidth = this.width || $(e.target).width()
- , imgHeight = this.height || $(e.target).height();
-
- // Save the ratio
- $(this).data('ratio', imgWidth / imgHeight);
-
- // Resize
- self.resize();
-
- // 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();
-
- // Resume the slideshow
- if (!self.paused) {
- self.cycle();
- }
-
- // Trigger the event
- self.$container.trigger(evt);
- });
- })
- .appendTo(self.$wrap);
+ self.$img = $('');
+
+ self.$img.css(styles.img)
+ .bind('load', function (e) {
+ var imgWidth = this.width || $(e.target).width()
+ , imgHeight = this.height || $(e.target).height();
+
+ // Save the ratio
+ $(this).data('ratio', imgWidth / imgHeight);
+
+ // Resize
+ self.resize();
+
+ // Show the image, then delete the old one
+ // "speed" option has been deprecated, but we want backwards compatibilty
+ $(self.$addlMarkup).fadeIn(self.options.speed || self.options.fade);
+ $(this).fadeIn(self.options.speed || self.options.fade, function () {
+ oldImage.remove();
+
+ // Resume the slideshow
+ if (!self.paused) {
+ self.cycle();
+ }
+
+ // Trigger the event
+ self.$container.trigger(evt);
+ });
+ })
+ .add(self.$addlMarkup)
+ .appendTo(self.$wrap);
// Hack for IE img onload event
self.$img.attr('src', self.images[index]);
@@ -301,7 +313,7 @@
// Remove Backstretch
if(!preserveBackground) {
- this.$wrap.remove();
+ this.$wrap.remove();
}
this.$container.removeData('backstretch');
}
@@ -336,23 +348,23 @@
return !(
// iOS 4.3 and older : Platform is iPhone/Pad/Touch and Webkit version is less than 534 (ios5)
((platform.indexOf( "iPhone" ) > -1 || platform.indexOf( "iPad" ) > -1 || platform.indexOf( "iPod" ) > -1 ) && wkversion && wkversion < 534) ||
-
+
// Opera Mini
(window.operamini && ({}).toString.call( window.operamini ) === "[object OperaMini]") ||
(operammobilematch && omversion < 7458) ||
-
+
//Android lte 2.1: Platform is Android and Webkit version is less than 533 (Android 2.2)
(ua.indexOf( "Android" ) > -1 && wkversion && wkversion < 533) ||
-
+
// Firefox Mobile before 6.0 -
(ffversion && ffversion < 6) ||
-
+
// WebOS less than 3
("palmGetResource" in window && wkversion && wkversion < 534) ||
-
+
// MeeGo
(ua.indexOf( "MeeGo" ) > -1 && ua.indexOf( "NokiaBrowser/8.5.0" ) > -1) ||
-
+
// IE6
(ieversion && ieversion <= 6)
);