Background slide show

Some websites can gain depth and interest by displaying a set of background images that dissolve from one to the next. This can easily be achieved by a variety of javascript plugins. Note that the background images should relate to the content of the site in some way but not be so vivid as to distract from it.

This example adds dynamically-resized, slideshow-capable background images using a javascript plugin written by Scott Robbin called Backstretch. It runs on Drupal's jQuery core.

I. Add the javascript plugin.

  1. Navigate to Configuration > JS Injector.
  2. Add a new rule called "background slideshow script" or something that is meaningful to you.
  3. In the panel "JS code," paste in the code snippet shown below. You do not need the usual <script> ... </script> tags as these are supplied by Drupal.
  4. Below, under Placement Options - position of the javascript, select "Footer."
  5. Under Preprocess Javascript, select the checkbox.
  6. Under Add Tracking to specific pages, leave the checkbox selected for "Every page except the listed pages."
  7. Scroll down and slect Save.
  8. You'll need to add another javascript to link the images. Scroll down below the code snippet below to finish the configuration and activiate the plugin.

Paste the code below into the JS Code panel:

(function(a,d,p){a.fn.backstretch=function(c,b){(c===p||0===c.length)&&a.error("No images were supplied for Backstretch");0===a(d).scrollTop()&&d.scrollTo(0,0);return this.each(function(){var d=a(this),g=d.data("backstretch");if(g){if("string"==typeof c&&"function"==typeof g[c]){g[c](b);return}b=a.extend(g.options,b);g.destroy(!0)}g=new q(this,c,b);d.data("backstretch",g)})};a.backstretch=function(c,b){return a("body").backstretch(c,b).data("backstretch")};a.expr[":"].backstretch=function(c){return a(c).data("backstretch")!==p};a.fn.backstretch.defaults={centeredX:!0,centeredY:!0,duration:5E3,fade:0};var r={left:0,top:0,overflow:"hidden",margin:0,padding:0,height:"100%",width:"100%",zIndex:-999999},s={position:"absolute",display:"none",margin:0,padding:0,border:"none",width:"auto",height:"auto",maxHeight:"none",maxWidth:"none",zIndex:-999999},q=function(c,b,e){this.options=a.extend({},a.fn.backstretch.defaults,e||{});this.images=a.isArray(b)?b:[b];a.each(this.images,function(){a("<img />")[0].src=this});this.isBody=c===document.body;this.$container=a(c);this.$root=this.isBody?l?a(d):a(document):this.$container;c=this.$container.children(".backstretch").first();this.$wrap=c.length?c:a('<div class="backstretch"></div>').css(r).appendTo(this.$container);this.isBody||(c=this.$container.css("position"),b=this.$container.css("zIndex"),this.$container.css({position:"static"===c?"relative":c,zIndex:"auto"===b?0:b,background:"none"}),this.$wrap.css({zIndex:-999998}));this.$wrap.css({position:this.isBody&&l?"fixed":"absolute"});this.index=0;this.show(this.index);a(d).on("resize.backstretch",a.proxy(this.resize,this)).on("orientationchange.backstretch",a.proxy(function(){this.isBody&&0===d.pageYOffset&&(d.scrollTo(0,1),this.resize())},this))};q.prototype={resize:function(){try{var a={left:0,top:0},b=this.isBody?this.$root.width():this.$root.innerWidth(),e=b,g=this.isBody?d.innerHeight?d.innerHeight:this.$root.height():this.$root.innerHeight(),j=e/this.$img.data("ratio"),f;j>=g?(f=(j-g)/2,this.options.centeredY&&(a.top="-"+f+"px")):(j=g,e=j*this.$img.data("ratio"),f=(e-b)/2,this.options.centeredX&&(a.left="-"+f+"px"));this.$wrap.css({width:b,height:g}).find("img:not(.deleteable)").css({width:e,height:j}).css(a)}catch(h){}return this},show:function(c){if(!(Math.abs(c)>this.images.length-1)){var b=this,e=b.$wrap.find("img").addClass("deleteable"),d={relatedTarget:b.$container[0]};b.$container.trigger(a.Event("backstretch.before",d),[b,c]);this.index=c;clearInterval(b.interval);b.$img=a("<img />").css(s).bind("load",function(f){var h=this.width||a(f.target).width();f=this.height||a(f.target).height();a(this).data("ratio",h/f);a(this).fadeIn(b.options.speed||b.options.fade,function(){e.remove();b.paused||b.cycle();a(["after","show"]).each(function(){b.$container.trigger(a.Event("backstretch."+this,d),[b,c])})});b.resize()}).appendTo(b.$wrap);b.$img.attr("src",b.images[c]);return b}},next:function(){return this.show(this.index<this.images.length-1?this.index+1:0)},prev:function(){return this.show(0===this.index?this.images.length-1:this.index-1)},pause:function(){this.paused=!0;return this},resume:function(){this.paused=!1;this.next();return this},cycle:function(){1<this.images.length&&(clearInterval(this.interval),this.interval=setInterval(a.proxy(function(){this.paused||this.next()},this),this.options.duration));return this},destroy:function(c){a(d).off("resize.backstretch orientationchange.backstretch");clearInterval(this.interval);c||this.$wrap.remove();this.$container.removeData("backstretch")}};var l,f=navigator.userAgent,m=navigator.platform,e=f.match(/AppleWebKit\/([0-9]+)/),e=!!e&&e[1],h=f.match(/Fennec\/([0-9]+)/),h=!!h&&h[1],n=f.match(/Opera Mobi\/([0-9]+)/),t=!!n&&n[1],k=f.match(/MSIE ([0-9]+)/),k=!!k&&k[1];l=!((-1<m.indexOf("iPhone")||-1<m.indexOf("iPad")||-1<m.indexOf("iPod"))&&e&&534>e||d.operamini&&"[object OperaMini]"==={}.toString.call(d.operamini)||n&&7458>t||-1<f.indexOf("Android")&&e&&533>e||h&&6>h||"palmGetResource"in d&&e&&534>e||-1<f.indexOf("MeeGo")&&-1<f.indexOf("NokiaBrowser/8.5.0")||k&&6>=k)})(jQuery,window);

II. Upload your images.

  1. Navigate to Configuration > CSS Injector
  2. Edit one of your existing CSS rules such as your "core css style" rule. Below the code panel, click on Uploaded Images to expand the image uplaod function.
  3. Select Browse and navigate to the folder that contains your background images. Select images and uplaod them, noting the path URL of the images. It will read smothing like "https://mysite.mit.edu/sites/default/files/css_injector_images_image/myimage-1.jpg."
  4. Scroll down and Save.

III. Configure the images.

  1. Navigate to Configuration > JS Injector.
  2. Add a new rule called "background images" or something that is meaningful to you.
  3. In the panel "JS code," paste in the code snippet shown below. You do not need the usual <script> ... </script> tags as these are supplied by Drupal.
  4. Use the correct paths for your images that were determined under II above.
  5. Below, under Placement Options - position of the javascript, select "Footer."
  6. Under Preprocess Javascript, select the checkbox.
  7. Under Add Tracking to specific pages, leave the checkbox selected for "Every page except the listed pages."
  8. Scroll down and slect Save.

Paste the code below into this last rule's JS Code panel, editing the URL paths as noted above.

jQuery(function($){
  $.backstretch([
"https://yoursite.mit.edu/sites/default/files/css_injector_images_image/~~.jpg",
"https://yoursite.mit.edu/sites/default/files/css_injector_images_image/~~.jpg",
"https://yoursite.mit.edu/sites/default/files/css_injector_images_image/~~.jpg",
"https://yoursite.mit.edu/sites/default/files/css_injector_images_image/~~.jpg"
  ],
{duration: 6000, fade: 3000});
        });

Edit the path name of the images to reflect your own site. You do not need the usual <script> ... </script> tags as these are supplied by Drupal.

There may be a delay in loading the first image. An easy solution is to use the first image in the slide show as the default background image which will display momentraily until the slide show begins displaying.

  1. Navigate to Configuration > User Interface > Dynamic background.
  2. In on of the blanck panels, select Browse, choose the image you wish to be displayed first and upload it.
  3. Select Use as background image and Save.