Blogger Tips

Create a Background Slideshow for Blogger

In the previous post we saw how to make the blog's background fill the screen regardless of the resolution of the monitor. The method that we'll use now with jQuery is a plugin called BackStretch which also has the option of creating a slideshow of pictures as a blog wallpaper without losing the property of adjusting to the width and height of the screen.

What we will do in this entry is just this, try to make the blog's background to have some images that are changing, all with fade effect between each transition.
You can see an example in this demo blog.

To put this slideshow in the blog's background, just go to Template - Edit HTML and before </head> add the following code:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>
<script>
//<![CDATA[
/*
* jQuery Backstretch
* Version 1.2.8
* http://srobbin.com/jquery-plugins/jquery-backstretch/
* Add a dynamically-resized background image to the page
* Copyright (c) 2012 Scott Robbin (srobbin.com)
* Licensed under the MIT license
* https://raw.github.com/srobbin/jquery-backstretch/master/LICENSE.txt
*/
;(function(a){a.backstretch=function(p,b,l){function s(){if(p){var b;0==c.length?c=a("<div />").attr("id","backstretch").css({left:0,top:0,position:m?"fixed":"absolute",overflow:"hidden",zIndex:-999999,margin:0,padding:0,height:"100%",width:"100%"}):c.find("img").addClass("deleteable");b=a("<img />").css({position:"absolute",display:"none",margin:0,padding:0,border:"none",zIndex:-999999,maxWidth:"none"}).bind("load",function(d){var b=a(this),e;b.css({width:"auto",height:"auto"});e=this.width||a(d.target).width();d=this.height||a(d.target).height();n=e/d;q();b.fadeIn(g.speed,function(){c.find(".deleteable").remove();"function"==typeof l&&l()})}).appendTo(c);0==a("body #backstretch").length&&(0===a(window).scrollTop()&&window.scrollTo(0,0),a("body").append(c));c.data("settings",g);b.attr("src",p);a(window).unbind("resize.backstretch").bind("resize.backstretch",function(){"onorientationchange"in window&&window.pageYOffset===0&&window.scrollTo(0,1);q()})}}function q(){try{j={left:0,top:0},roott={centeredX:!0,centeredY:!0,speed:0},c=a("#backstretch"),g=c.data("settings")||t;c.data("settings");var o,m,r,n,h,f,k,j;b&&"object"==typeof b&&a.extend(g,b);b&&"function"==typeof b&&(l=b);a(document).ready(function(){var b=window,d=navigator.userAgent,c=navigator.platform,e=d.match(/AppleWebKit\/([0-9]+)/),e=!!e&&e[1],f=d.match(/Fennec\/([0-9]+)/),f=!!f&&f[1],g=d.match(/Opera Mobi\/([0-9]+)/),h=!!g&&g[1],i=d.match(/MSIE ([0-9]+)/),i=!!i&&i[1];o=(m=!((-1<c.indexOf("iPhone")||-1<c.indexOf("iPad")||-1<c.indexOf("iPod"))&&e&&534>e||b.operamini&&"[object OperaMini]"==={}.toString.call(b.operamini)||g&&7458>h||-1<d.indexOf("Android")&&e&&533>e||f&&6>f||"palmGetResource"in window&&e&&534>e||-1<d.indexOf("MeeGo")&&-1<d.indexOf("NokiaBrowser/8.5.0")||i&&6>=i))?a(window):a(document);r=m&&window.innerHeight;s()});return this}})(jQuery);
//]]>
</script>

<script>
//<![CDATA[
var images = [
"Image URL",
"Image URL",
"Image URL",
"Image URL",
"Image URL",
];

$(images).each(function(){
$('<img/>')[0].src = this;
});
var index = 0;
$.backstretch(images[index], {speed: 1000});
var slideshow = setInterval(function() {
index = (index >= images.length - 1) ? 0 : index + 1;
$.backstretch(images[index]);
}, 5000);
//]]>
</script>

Here add the URLs of the images that will be the background of your blog.
If you would like to add more pictures, just add after the var images = [ another line like this:

"Image URL",

The images will be changing in the order you have added them, if you want these to appear in a random order, then change the second part of the code with this:

<script>
//<![CDATA[
var images=new Array();
images[ 1 ]="Image URL";
images[ 2 ]="Image URL";
images[ 3 ]="Image URL";
images[ 4 ]="Image URL";
images[ 5 ]="Image URL";

Array.prototype.shuffle = function() {
var len = this.length;
var i = len;
while (i--) {
var p = parseInt(Math.random()*len);
var t = this[i];
this[i] = this[p];
this[p] = t;
}
};

images.shuffle();
$(images).each(function(){
$('<img/>')[0].src = this;
});
var index = 0;
$.backstretch(images[index], {speed: 1000});
var slideshow = setInterval(function() {
index = (index >= images.length - 1) ? 0 : index + 1;
$.backstretch(images[index]);
}, 5000);
//]]>
</script>

You can also add more pictures by adding a line like this:

images[ 6 ]="Image URL";

But you will see that in this case there are some consecutive numbers in blue, so if you add another such as 6, then the next one should be 7, etc..

In both cases you can change the duration of each image which is in the 5000 value that is at the end of the script.
The advantage of this slideshow in the blog's background is that images are automatically resized to the size of the monitor, so that, no matter of the resolution, it should look good.

It is worth remembering that if you are using Scriptaculous, you have to make some changes, and if you already use jQuery, should leave only one version.

Author page | Backstretch

- Display Blogger Posts In Grid View With Thumbnails
Grid View with Thumbnails is a script for self-hosted Blogger blogs which will display blog posts as a thumbnail grid of images in homepage and archive pages. Instead of sending your blog visitors to a page that displays all the posts in full length with...

- How To Add A Tiny Jquery Circleslider To Blogger
Tiny Circleslider is a small jQuery plugin generating a circular carousel of images that we can slide infinitely (circular). When clicking on the red dot, the main picture moves to the left and another set of images will slide out. There is nothing complicated...

- Before/after Photo Effect With Jquery
If you have a design or makeup blog, or if you are using before and after image comparison, this script will surely be very useful for you. In this tutorial, you will see how to add the Before/After plugin, a script that works with jQuery to display two...

- Spacegallery: Image Gallery/slideshow Made With Jquery
There are many types of galleries for images that can be found on the internet, but we rarely find one displaying images so differently like this one. Those using Mac OS X will surely notice a lot of similarity with Time Machine and those who don't,...

- Possibly The Most Simple Jquery Slider
Do you have jQuery in your site or blog and space to insert 10 lines of code? If the answer is yes, and you want to have an automatic slideshow, this is the simplest code I've seen so far. So, having a succession of images added inside a box with...

Blogger Tips