Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

Add the ability to add markup within backstretch #158

Closed
wants to merge 5 commits into from

2 participants

@davidcasey

This feature is particularly useful if you would like to add a repeating texture on top of the stretched background image. This works with the slideshow feature as well.

david

@srobbin
Owner

Hi David,

Thanks for providing this pull request. I don't think I'll be adding it to the repo at this time, but I will definitely keep it in consideration for a future version of Backstretch. And, I know that the others will appreciate having this an example.

Cheers,
Scott

@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.
View
87 examples/addlmarkup-slideshow.html
@@ -0,0 +1,87 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <style>
+ body { font-family: Helvetica, Arial, sans-serif; line-height: 1.3em; -webkit-font-smoothing: antialiased; }
+ .container {
+ width: 90%;
+ margin: 60px auto;
+ background-color: #FFF;
+ padding: 20px;
+ }
+
+ pre, code {
+ font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
+ font-size: 12px;
+ color: #333;
+ -webkit-border-radius: 3px;
+ -moz-border-radius: 3px;
+ border-radius: 3px;
+ }
+ pre { border: 1px solid #CCC; background-color: #EEE; color: #333; padding: 10px; overflow: scroll; }
+ code { padding: 2px 4px; background-color: #F7F7F9; border: 1px solid #E1E1E8; color: #D14; }
+
+
+ .backstretch > div {
+ background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAGCAYAAAAG5SQMAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNS4xIE1hY2ludG9zaCIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo0M0UzQ0NDMzM1OTkxMUUxODUyMkY1ODNBMEVFOTU3RCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo0M0UzQ0NDNDM1OTkxMUUxODUyMkY1ODNBMEVFOTU3RCI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjQzRTNDQ0MxMzU5OTExRTE4NTIyRjU4M0EwRUU5NTdEIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjQzRTNDQ0MyMzU5OTExRTE4NTIyRjU4M0EwRUU5NTdEIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+20+oVgAAABhJREFUeNpiYIAAQwZ0BjIwZCBOGUCAAQArXwEnkh+BIQAAAABJRU5ErkJggg==") repeat scroll 0 0 transparent;
+ }
+ .backstretch h1 {
+ color: red;
+ }
+ </style>
+</head>
+<body>
+ <div class="container">
+ <h1>Slideshow With Additional Markup</h1>
+ <p>This demonstrates how to use additional markup in a backstretch slideshow. Just pass in an array of addlMarkup in the options.</p>
+ <p>Something to note: if you do not supply a <code>div</code> surrounding the addlMarkup, it will be added for you. This is a convenience to prevent the generated styles from conflicting with your additional markup.</p>
+ <pre>&lt;style&gt;
+ .backstretch &gt; div {
+ background: url(&quot;bg-pattern.png&quot;) repeat scroll 0 0 transparent;
+ }
+ .backstretch h1 {
+ color: red;
+ }
+&lt;/style&gt;
+
+&lt;script src=&quot;//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js&quot;&gt;&lt;/script&gt;
+&lt;script src=&quot;jquery.backstretch.min.js&quot;&gt;&lt;/script&gt;
+&lt;script&gt;
+ $.backstretch([
+ &quot;pot-holder.jpg&quot;,
+ &quot;coffee.jpg&quot;,
+ &quot;dome.jpg&quot;
+ ], {
+ fade: 750,
+ duration: 4000,
+ addlMarkup: [
+ '&lt;h1&gt;Pot Holder&lt;/h1&gt;',
+ '&lt;h1&gt;Coffee&lt;/h1&gt;',
+ '&lt;h1&gt;Dome&lt;/h1&gt;'
+ ]
+ });
+&lt;/script&gt;</pre>
+ </div>
+
+ <script src="../libs/jquery/jquery.js"></script>
+ <script src="../jquery.backstretch.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>
+
+</body>
+</html>
View
75 examples/addlmarkup.html
@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <style>
+ body { font-family: Helvetica, Arial, sans-serif; line-height: 1.3em; -webkit-font-smoothing: antialiased; }
+ .container {
+ width: 90%;
+ margin: 20px auto;
+ background-color: #FFF;
+ padding: 20px;
+ }
+
+ pre, code {
+ font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
+ font-size: 12px;
+ color: #333;
+ -webkit-border-radius: 3px;
+ -moz-border-radius: 3px;
+ border-radius: 3px;
+ }
+ pre { border: 1px solid #CCC; background-color: #EEE; color: #333; padding: 10px; overflow: scroll; }
+ code { padding: 2px 4px; background-color: #F7F7F9; border: 1px solid #E1E1E8; color: #D14; }
+ .other { height: 300px; color: #FFF; }
+ .other div {
+ position: absolute;
+ bottom: 0;
+ width: 100%;
+ background: #000;
+ background: rgba(0,0,0,0.7);
+ }
+ .other div p { padding: 10px; }
+
+ .backstretch > div {
+ background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAGCAYAAAAG5SQMAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNS4xIE1hY2ludG9zaCIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo0M0UzQ0NDMzM1OTkxMUUxODUyMkY1ODNBMEVFOTU3RCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo0M0UzQ0NDNDM1OTkxMUUxODUyMkY1ODNBMEVFOTU3RCI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjQzRTNDQ0MxMzU5OTExRTE4NTIyRjU4M0EwRUU5NTdEIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjQzRTNDQ0MyMzU5OTExRTE4NTIyRjU4M0EwRUU5NTdEIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+20+oVgAAABhJREFUeNpiYIAAQwZ0BjIwZCBOGUCAAQArXwEnkh+BIQAAAABJRU5ErkJggg==") repeat scroll 0 0 transparent;
+ }
+ </style>
+</head>
+<body>
+ <div class="container">
+ <h1>Additional Markup</h1>
+ <p>This demonstrates how to use additional markup in backstretch. Specifically, this example shows how to use a pattern overlay on top of Backstretch.</p>
+ <pre>&lt;style&gt;
+ .backstretch &gt; div {
+ background: url(&quot;bg-pattern.png&quot;) repeat scroll 0 0 transparent;
+ }
+&lt;/style&gt;
+
+&lt;script src=&quot;//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js&quot;&gt;&lt;/script&gt;
+&lt;script src=&quot;jquery.backstretch.min.js&quot;&gt;&lt;/script&gt;
+&lt;script&gt;
+ $.backstretch(&quot;pot-holder.jpg&quot;, { addlMarkup: &quot;&lt;div /&gt;&quot; });
+&lt;/script&gt;</pre>
+ <h2>Other Elements</h2>
+ <p>Or, if you'd like, you can also attach Backstretch to another block level element on the page.</p>
+ <div class="other">
+ <div><p>The background image on this element was set using Backstretch with addlMarkup to provide the texture overlay.</p></div>
+ </div>
+ <pre>&lt;script src=&quot;//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js&quot;&gt;&lt;/script&gt;
+&lt;script src=&quot;jquery.backstretch.min.js&quot;&gt;&lt;/script&gt;
+&lt;script&gt;
+ $(&quot;.other&quot;).backstretch(&quot;coffee.jpg&quot;, { addlMarkup: &quot;&lt;div /&gt;&quot; });
+&lt;/script&gt;</pre>
+ </div>
+
+ <script src="../libs/jquery/jquery.js"></script>
+ <script src="../jquery.backstretch.js"></script>
+
+ <script>
+ $.backstretch("pot-holder.jpg", { addlMarkup: "<div />" });
+ $(".other").backstretch("coffee.jpg", { addlMarkup: "<div />" });
+ </script>
+
+</body>
+</html>
View
92 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] = '<div>' + el +'</div>';
+ });
// Preload images
$.each(this.images, function () {
$('<img />')[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 = $('<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 = $('<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)
);
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(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]="<div>"+n+"</div>"});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 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("<img />");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.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(){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(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)
View
102 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] = '<div>' + el +'</div>';
+ });
// Preload images
$.each(this.images, function () {
$('<img />')[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 = $('<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 = $('<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)
);
Something went wrong with that request. Please try again.