Often times when a client asks for special customizations or animations to their site, I will dig for a jQuery plugin that accomplishes my goal. However, on occasion, when the customizations become overly original, I will need to put something together on my own. At least with the help of multiple plugins.
Recently I was asked to put together a micro site for a company and in the requirements they asked for the following:
- A full screen image scroller, with proportionate images.
- Scrolling content that corresponds with each of the images.
- The ability to flip through content pages on a per slide basis.
- Image thumbnail navigation for each of the images.
- And i think thats it…. oh, and to make it compatible in IE7 and up…
I searched high and low for a simple plugin that could achieve all of these things and found many candidates. But the customizations were too vast and specific for any one plugin to accomplish. I decided to pick the project apart and find solutions for each of the tasks at hand.
Here are the plugins I used for the project:
I’ve divided this tutorial into three sections each one adding a new plugin to the page.
We’ll begin by putting together a page with the full screen slider.
Step 1 – Full Screen Image Slider
Let’s start by setting up the fullscreen slider. In the demo you’ll notice i’m using a combination of Backstretch and a simple image preloader. Without the preloader, a new visitor may not see the images before the slider transitions to the next slide. So to be safe we preload all the images before initiating the slider.
First we’ll include the scripts:
<script src="js/jquery-1.7.min.js"></script>
<script src="js/jquery.backstretch.min.js"></script>
<script src="js/preloader.js"></script>
To make things a little easier I put the preloader into its own file and called it onto the page. Download the preloader here.
And here’s how I did it:
Javascript:
$(document).ready(function(){
$(function() {
var images = [
"images/img_1.jpg",
"images/img_2.jpg",
"images/img_3.jpg",
"images/img_4.jpg"
];
var index = 0;
var transitionSpeed = 500;
var imageIntervals = 5000;
var startIntervals;
var intervalSetTime;
$.preload(images, {
init: function(loaded, total) {
$("#indicator").html("");
},
loaded_all: function(loaded, total) {
$('#indicator').fadeOut('slow', function() {
var index = 0;
$.backstretch(images[index], {speed: transitionSpeed });
startIntervals = function (){
intervalSetTime = setInterval(function() {
index = (index >= images.length - 1) ? 0 : index + 1;
$.backstretch(images[index]);
}, imageIntervals)};
startIntervals();
});
}
});
});
});
CSS:
#logo{
width:273px;
height:100px;
margin:40px 0px 0px 40px;
}
#indicator{
width:48px;
position:absolute;
left:50%;
margin:200px 0px 0px -24px;
}
HTML:
<div id="logo"><img src="images/logo.png" /></div>
<div id="indicator"></div>
Setting up the backstretch javascript is very simple. Just copy the javascript code and replace the image array paths according to the images you want pulled to the page.
Replace image paths:
var images = [
"images/img_1.jpg",
"images/img_2.jpg",
"images/img_3.jpg",
"images/img_4.jpg"
];
You can set the transition speed and pause time by changing the ‘transitionSpeed’ and ‘imageIntervals’ variables
Replace speed variable:
var transitionSpeed = 500;
And the pause time:
var imageIntervals = 5000;
That’s about it for step 1, you should now have a fully functional Full Screen Image slider… that’s a mouth full
Step 2 – Full Screen Image Slider with content
The following instructions are in addition to step 1.
Now that we have our full screen image slider up and running, we can start with the content. For this example I’m using hipster ipsum as filler text, you can only look at so much lorem ipsum before it bores you to tears. First off we need to include our ‘bxslider’ file:
<script src="js/jquery.bxSlider.min.js"></script>
Once we have that we’ll need to add 2 variables to the mix ‘slider’ and ‘contentOpen’. Here’s how they’ll look:
var slider;
var contentOpen = false;
Now we can initialize the bxslider which will contain the content relevant to the slide. You can read the documentation for the bxslider on their site. Here’s how it looks:
slider = $('#slider1').bxSlider({
mode: 'fade',
controls: false,
pause: imageIntervals
});
Next we will need to generate the thumbnails. To do this I pull the regular sized images from the ‘images’ array, size them to 75px width and append them into the ‘thumb-container’, which i placed at the bottom right of the site. Here’s how it looks:
for (i=0;i<=images.length - 1;i++){
$('#thumb-container').append('<a href="javascript:goToContent('+ i +')"><img src="'+ images[i] +'?size=thumb" alt="Image '+ i +'" /></a>');
}
Note: the '?size=thumb' needs to be added to the image name to work properly in IE. Strange? I know.
Once we have the thumbnails generated we can fade it in with the rest of the content after the preloader does its thing:
$('#thumb-container').fadeIn('slow');
This part is pretty cool, the bx slider was built with some public functions that allow us to go to the next slide, previous slider, a specified slide, and a bunch of other options. What's good about this is we can use the goToNextSlide() function to work seamlessly with our image slider intervals:
slider.goToNextSlide()
Insert that into the startIntervals function and we now have the content transitioning at the same intervals as the image slider.
Next we add our function that links our thumbnails to our slides. This function is called in our thumbnail 'For' loop:
function goToContent(slideNum){
clearInterval(intervalSetTime);
index = slideNum;
$.backstretch(images[index]);
slider.goToSlide(slideNum);
if (contentOpen == false){
startIntervals();
}
};
And last but not least, our content show and content hide functions. I added the show function to a button under the logo and the hide function to the close graphic within the content box:
function showContent(){
$('.content-bg').fadeIn('slow');
clearInterval(intervalSetTime);
contentOpen = true;
};
function closeContent(){
$('.content-bg').fadeOut('slow');
startIntervals();
contentOpen = false;
};
Here's the HTML for the page:
<div id="left-side"> <div id="logo"> <div class="close-button" onclick="closeContent()"></div> </div> </div> <div class="content-container"> <div class="content-bg"> <--! Content 2 --> <div class="close-button" onclick="closeContent()"></div> </div> </div> <div class="content-container"> <div class="content-bg"> <--! Content 3 --> <div class="close-button" onclick="closeContent()"></div> </div> </div> <div class="content-container"> <div class="content-bg"> <--! Content 4 --> <div class="close-button" onclick="closeContent()"></div> </div> </div> </div> <div id="thumb-container"></div>
And the css:
body{color:#fff; font-family:Arial, Helvetica, sans-serif;}
h1, h2, h3{padding:0px; margin:0px;}
#left-side{width:274px; height:400px; float:left; margin:40px 0px 0px 40px; display:none; z-index:10; position:relative;}
.content-button{width:273px; height:64px; float:left; margin-top:10px; background:url(images/content-button.png); outline:none;}
.content-button:hover{background-position:0px -64px;}
#slider1 .content-container{width:780px; height:540px; float:left; margin:40px 0px 0px 5px;}
.content-container h2{color: #ccc;font-weight: bold;text-transform: uppercase; font-size:30px; padding-bottom:20px;}
.content-container p{color:#ccc; font-size:12px; line-height:18px;}
.content-bg{width:700px; height:420px; float:left; background:url(images/content-bg.png); padding:40px; display:none;}
.close-button{width:20px; height:20px; float:left; background:url(images/close.png); position:absolute; cursor:pointer; top:0px; right:0px; margin:10px 15px 0px 0px;}
#thumb-container{position:absolute; bottom:0px; right:20px; background:url(images/content-bg.png); padding:15px 15px 0px 5px; margin-left:20px; display:none;}
#thumb-container img{float:left; width:75px; padding:0px 0px 15px 10px; opacity:.8; border:0px;}
#thumb-container img:hover{opacity:1;}
.bx-wrapper{float:left;}
Onto step three...
Step 3 - Full Screen Image Slider with content flipper
The following instructions are in addition to step 1 and step 2.
For the final step we're going to add a flip effect to the content box. Using ajax we'll change the content in the box while the flip animation is running.
First off lets insert the necessary scripts for the flip animation
<script src="js/jquery-ui-1.7.2.custom.min.js"></script>
<script src="js/jquery.flip.min.js"></script>
Now let's see the variables
var content = [
"content/content-1.html",
"content/content-2.html",
"content/content-3.html",
"content/content-4.html"
];
var flipSpeed = 300;
Note: Keep in mind the content number is used in the following loop to populate the initial content.
Once we have our variables set we can add in our loop. This will pull the html content from our content files into the content container... I feel like I should say content again.
for (i=1;i<=content.length;i++){
$("#content-" + i).load(content[i - 1]);
};
Now that the for loop has populated the content containers we can add our flip effect to pull alternate content on click.
Here's the script that populates the 'More' content:
function contentMore(contentNum){
$("#content-" + contentNum).flip({
direction:'rl',
color:'#000',
speed:flipSpeed,
onAnimation: function(){
$("#content-" + contentNum).load('content/content-more-'+ + contentNum +'.html');
},
onEnd: function(){
$("#content-" + contentNum).css('background-color','transparent');
},
});
};
Note: The file name structure for the 'More' content files must contain a number to coincide with the initial content.
You can read more about the flip plugin on their site.
Next we'll add a public function that allows us to return to the previous flip.
function contentBack(contentNum){
$("#content-" + contentNum).revertFlip()
};
Now we only have to add the corresponding html and css:
CSS:
.content-container a:link,
.content-container a:visited{color:#fff; font-size:12px; text-decoration:none;}
.content-container a:hover{color:#ccc;}
.content-wrap{height:400px;}
.more{width:89px; float:right; height:31px; background-image:url(images/more.png); text-indent:-9999px;}
.more:hover{background-position:0px -31px;}
.back{width:89px; float:left; height:31px; background-image:url(images/back.png); text-indent:-9999px;}
.back:hover{background-position:0px -31px;}
HTML:
<div id="left-side">
<div id="logo"><img src="images/logo.png" /></div>
<a href="javascript:showContent();" class="content-button"></a>
</div>
<div id="indicator"></div>
<div id="slider1">
<div class="content-container">
<div class="content-bg" id="content-1"></div>
</div>
<div class="content-container">
<div class="content-bg" id="content-2"></div>
</div>
<div class="content-container">
<div class="content-bg" id="content-3"></div>
</div>
<div class="content-container">
<div class="content-bg" id="content-4"></div>
</div>
</div>
<div id="thumb-container"></div>
And that's it, we have a working Full Screen Image and Content Slider. If you have any questions feel free to send me a message or post a comment.
Great solution. Pretty close to what I was looking to do for a site and with a few tweaks I think it will work perfect.
One question, is there a way to add a next button or link to navigate through the slides?
Thanks!
+1 ^
Is there a way to navigate between slides with links / images?
Hey Mark,
I go over adding image links for the slides in step 3.
Love it thanks so much for the tutorial!
Just one issue. I have set up the files and tested in Google chrome and the content.html files are not showing/loading in.
All seems fine in Firefox IE so bit stuck! any ideas would be gratefully
received.
Thanks
Hi Mat,
I’m having the same problem did you find the answer?
Thanks
great tutorial!
i was wondering is there a way to make the content appear as the slide changes and also make the entire slide clickable?
cheerio,
S.
This is so close to what I have been searching for and I’m sure with some small tweaks I can get it to work. All I need is the content for each image to be visible rather than appear after clicking a button. So each slide just has an image title that is a link to another page.
Going to have a play with it now…
thank you!!
Jon
Hello again,
would you mind pointing me in the direction of how to replace the thumbnails just with regular dots like on other slideshows? I really like the thumbnails but I have a client who wants dots.
thanks!!
Nice work! Could you please tell me how to slide in the image and the text and not fade it in. Many thanks for your help. Greetings Chris
I want to images to slide instead of fade how can I change it. Can I just ammend this portionof the code:
loaded_all: function(loaded, total) {
$(‘#indicator’).fadeOut(‘slow’, function()
Or one is required to write more codes to do just that. Thanks
Excellent examples with nice step by step tutorial.I want to know is it possible to overlay texts/content on the each image itself instead of a seperate content.If yes please advise how to do this.
thanks
Great, great work!
One issue though; the first thumbnail in the row is INACTIVE when viewed in Chrome. Can click on / toggle through all the others fine except the first one, and it’s only Chrome. Is this happening to anyone else?
A.
nevermind, figured it out!
This is exactly what I was looking for, thank you very much for this tutorial.
Hello,
It’s a realy great work. Awesome
Is there any way to change the thumbnails to buttons like a manu please ?
It’s a nice solution. A minor issue may be seen at my portfolio http://bit.ly/UODxUc where the images get somewhat “backscaled” before the next one fades in. Can you verify that?