From f1a75ceffe1c3a473480e5761337f584894dcdc5 Mon Sep 17 00:00:00 2001 From: David Casey Date: Thu, 8 Nov 2012 14:56:00 -0700 Subject: [PATCH 1/5] Created, example for simple additional markup within Backstretch. --- examples/addlmarkup.html | 75 ++++++++++++++++++++++++++++++++++++++++ 1 file changed, 75 insertions(+) create mode 100755 examples/addlmarkup.html 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 From c452ef10a2a03f3eae138215aed6af3bbda2f077 Mon Sep 17 00:00:00 2001 From: David Casey Date: Thu, 8 Nov 2012 14:56:32 -0700 Subject: [PATCH 2/5] Created, example for simple additional markup within a Backstretch slideshow. --- examples/addlmarkup-slideshow.html | 87 ++++++++++++++++++++++++++++++ 1 file changed, 87 insertions(+) create mode 100755 examples/addlmarkup-slideshow.html 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 From 13866b84457c67fc306cc7a68af0a3a37a7ee963 Mon Sep 17 00:00:00 2001 From: David Casey Date: Thu, 8 Nov 2012 14:57:49 -0700 Subject: [PATCH 3/5] added the ability to make additional markup within Backstretch --- jquery.backstretch.js | 92 +++++++++++++++++++++++++------------------ 1 file changed, 54 insertions(+), 38 deletions(-) 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) ); From f31aee0094e68acf3f26364f9837af7bfec1babe Mon Sep 17 00:00:00 2001 From: David Casey Date: Thu, 8 Nov 2012 15:01:03 -0700 Subject: [PATCH 4/5] updated minified file to reflect addlMarkup changes. --- jquery.backstretch.min.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 From 5973f40de7c4e78d96131fb921ae834414d1d38a Mon Sep 17 00:00:00 2001 From: David Casey Date: Thu, 8 Nov 2012 15:03:44 -0700 Subject: [PATCH 5/5] added the ability to make additional markup within Backstretch --- src/jquery.backstretch.js | 102 +++++++++++++++++++++----------------- 1 file changed, 57 insertions(+), 45 deletions(-) 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) );