Full page background slideshows are something that are getting pretty common these days for various websites. These websites include various portfolio websites for Artists or Photographers. They like to show off their skills straight on their home page by showcasing their work as a slideshow on the background of the page.
I had to do a full page background slideshow for one of my client’s website and that’s when I thought of sharing it with everyone out there. Performing this task can be done in two ways, one is to create it using CSS and write the entire code yourself or the other one is to use a jQuery plugin out there to make your work easier.
DEMO | DOWNLOAD
In today’s tutorial, I am going to teach you how to create one using an already available jQuery plugin. This plugin is called Backstretch and is a pretty good plugin created by Scott Robbin. In this tutorial, I would focus more on how to create a background slideshow and then how to create a translucent box in the centre of the page to display any text that you may want to display on the homepage.
Before we begin with the tutorial, I would ask you to download the jQuery plugin from the original website and extract the contents to a folder where you would be working. Make sure there is a folder named “js” in your working folder and then that js folder has the following files in there:
– jquery.backstretch.min.js
– jquery.min.js (Latest version downloaded from the jQuery website)
Let’s begin with the tutorial. In the tutorial, we have 2 parts. The HTML part (in which we define the layout of the page and the necessary JavaScript) and the CSS part (for the styling of our translucent box).
HTML Part:
1. Start by creating a new page and copy-pasting the layout below. I have included a style sheet by the name of “style.css” in the following code, which we will create in the next part.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" href="style.css" /> <title>jQuery Background Slideshow</title> </head> <body> </body> </html>
2. In the body tag, create a new div element that will be our box in the centre of the page, with a class name “blackbox”.
<div> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id ligula in urna varius porttitor nec non felis. In posuere massa posuere egestas convallis. Nullam congue velit non euismod pulvinar. Vivamus lacinia scelerisque nunc. Praesent a egestas purus, quis bibendum felis. Vestibulum gravida sapien odio, pellentesque posuere magna rutrum a. Ut vitae augue vel justo bibendum iaculis non at justo. Curabitur id nisl sit amet mi cursus tristique. Vivamus adipiscing vestibulum lectus ac semper. Ut bibendum erat nunc, et mollis felis dictum quis. Morbi dapibus luctus augue non rutrum. Ut sit amet rutrum lorem.</p> </div>
3. Next, include the necessary JavaScript files by including the following lines of code just before closing your body tag.
<script src="js/jquery.min.js" type="text/javascript"> </script> <script src="js/jquery.backstretch.min.js" type="text/javascript"></script>
4. Now, specify the images that you want to use as your slideshow images by providing the following lines of code just before closing your body tag and after the previously imported JavaScript files. In this code, the images that I have used are named as “home1.jpg”, “home2.jpg” and “home3.jpg”, and are placed in the folder named “images” in the working folder.
<script>
$.backstretch([
"images/home1.jpg",
"images/home2.jpg",
"images/home3.jpg",
"images/home4.jpg",
"images/home5.jpg",
"images/home6.jpg"
], {
fade: 1500,
duration: 3000
});
</script>
5. That’s it for the HTML part. Here is the code for the entire HTML page.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="style.css" />
<title>jQuery Background Slideshow</title>
</head>
<body>
<div class="blackbox">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id ligula in urna varius porttitor nec non felis. In posuere massa posuere egestas convallis. Nullam congue velit non euismod pulvinar. Vivamus lacinia scelerisque nunc. Praesent a egestas purus, quis bibendum felis. Vestibulum gravida sapien odio, pellentesque posuere magna rutrum a. Ut vitae augue vel justo bibendum iaculis non at justo. Curabitur id nisl sit amet mi cursus tristique. Vivamus adipiscing vestibulum lectus ac semper. Ut bibendum erat nunc, et mollis felis dictum quis. Morbi dapibus luctus augue non rutrum. Ut sit amet rutrum lorem.</p>
</div>
<script src="js/jquery.min.js" type="text/javascript"> </script>
<script src="js/jquery.backstretch.min.js" type="text/javascript"></script>
<script>
$.backstretch([
"images/home1.jpg",
"images/home2.jpg",
"images/home3.jpg",
"images/home4.jpg",
"images/home5.jpg",
"images/home6.jpg"
], {
fade: 1500,
duration: 3000
});
</script>
</body>
</html>
CSS Part
1. Create the styling for the blackbox div class by the following lines of code.
.blackbox{
display:block;
width:300px;
margin:60px auto;
background:rgba(0,0,0,0.5);
color:#FFFFFF;
padding:10px;
border-radius:30px;
font-weight:bold;
}
2. Well, that should be it for the CSS part now. You can do additional styling for your webpage or the entire website within this style file.
Interesting Note for displaying smaller Slideshow:
If you want to display this slideshow within some specific area, create a div element positioned to that area, and in the scripting of the page, change the following code line of code ” $.backstretch ” to ” $(“#slidediv”).backstretch “, where slidediv is the ID of the div tag where you need the slideshow to play.
DOWNLOAD SOURCE CODE
Well, that’s all I have for you today. I will surely have something more for you pretty soon. Be sure to check back on the blog very soon for some new content. Also, don’t forget to subscribe to Slash Coding for latest post updates via RSS Feeds, Facebook, Google+ or Twitter.
It is a really great plugin, thank you for posting. Do you have an idea how to implement a code that it could pull different image files from a folder?
Hey Gladys,
I’m glad you liked it. Do you mean like automatically fetch all files from the folder?
Hey Aneesh, exactly! It would then randomly select which one to display, so you wouldn’t have to change the code each time to have different pictures in your slideshow, only simply upload it 😉
I’m afraid I don’t know of any such code but I will surely try to find it or create it for you! Stay subscribed to the blog so that you don’t miss that post! 🙂
Very cool, thank you! Surely I’ll stay subscribed!
Hey Aneesh, somebody found a great solution, when I asked in a forum, would you like me to send you the link?
Oh sure! You may share the link in the comments section. I would appreciate it! 🙂
Here is the link to how my above question was solved!
http://stackoverflow.com/q/23999136/3700041
Thanks for sharing this with everyone! 🙂