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:

1. A full screen image scroller, with proportionate images.
2. Scrolling content that corresponds with each of the images.
3. The ability to flip through content pages on a per slide basis.
4. Image thumbnail navigation for each of the images.
5. 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:

1. Srobbins Jquery Backstretch
2. BX Slider
3. Flip.js

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

DemoDownload

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

DemoDownload

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

DemoDownload

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.