Netflix like image slideshow using jQuery

Today, we will look at creating Netflix like thumbnail show and slider using jQuery.

Screenshot:

 

Click button below to see live demo:

In order to accomplish this we will do following:

  1. Include reference of jQuery latest version (I have used 1.6.2 here)
  2. Include reference jQuery easing plugin so we can expand our selection of easing
  3. Define parent div and restrict its width to 600px and hide overflow using CSS
  4. Define child div inside parent div and add all images inside that the child div
  5. Doing 4 and 5 we are only showing area that is visible in parent div
  6. We will just decrease left property of child div to the width of image
  7. Add jQuery script to decrease, increase left css property of child to show new images

Code:

<!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>

<title>Demo: Netflix like slide show using jQuery</title>

<script src="scripts/jquery-1.6.2.js" type="text/javascript"></script>

<script src="scripts/jquery.easing.1.2.js" type="text/javascript"></script>

<script type="text/javascript">

$(document).ready(function () {

// calculating width of parent for the placement of navigation div

var rightParentWid = parseInt($('#rightButton').parent().outerWidth());

var rightWid = parseInt($('#rightButton').outerWidth()) / 1.2;

// positioning right navigation div

$('#rightButton').css({ 'left': rightParentWid - rightWid + 'px' });

// Code to run on mouse hover on parent div

$('#ParentDiv').hover(function () {

$('#leftButton,#rightButton').animate({ 'opacity': '0.5' }, { duration: 500, queue: true });

}, function () {

$('#leftButton,#rightButton').animate({ 'opacity': '0' }, { duration: 500, queue: true });

});

// variables to hold id of set Interval so we can call clear Interval for those IDs

var rightVar, leftVar;

// setting interval for starting animation again on while mouse is over right div

$('#rightButton').stop(true, true).hover(function () {

rightVar = setInterval(rightHover, 1000);

}, function () {

clearInterval(rightVar);

});

// setting interval for starting animation again on while mouse is over left div

$('#leftButton').stop(true, true).hover(function () {

leftVar = setInterval(leftHover, 1000);

}, function () {

clearInterval(leftVar);

});

// function for right div mouse hover

function rightHover() {

// here we are checking the left of child so we can run our animation until it reaches to last image

// if two gets equal then this will reverse the image back to start position so animation can run from beginning

if (parseInt($('#ChildDiv').css('left')) != ($('#ChildDiv').parent().width() - $('#ChildDiv').width())) {

// to move images to left we will set left property of child div to negative direction

$('#ChildDiv').stop(true).animate({ 'left': '-=' + $('#ChildDiv img').width() }, 500, 'easeOutBounce');

} else {

$('#ChildDiv').stop(true).animate({ 'left': 0 }, 500, 'easeOutBounce');

}

}

 

function leftHover() {

if ((parseInt($('#ChildDiv').css('left')) != 0) && ($('#ChildDiv').css('left') != 'auto')) {

// to move images to right we will set left property of child div to positive direction

$('#ChildDiv').stop(true).animate({ 'left': '+=' + $('#ChildDiv img').width() }, 500, 'easeOutBounce');

}

else {

$('#ChildDiv').stop(true).animate({ 'left': $('#ChildDiv').parent().width() - $('#ChildDiv').width() }, 500, 'easeOutBounce');

}

}

});

</script>

<style type="text/css">

#ParentDiv #ChildDiv img

{

width:150px;

height:150px;

float:left;

}

#ParentDiv

{

overflow:hidden;

width:600px;

height:150px;

}

#ChildDiv

{

height:150px;

width:2250px;

overflow:hidden;

position:relative;

}

#leftButton,#rightButton

{

width:50px;

height:150px;

position:absolute;

background-color:Black;

z-index:1000;

opacity:0;

filter:alpha(opacity=0);

 

}

#rightButton

{

z-index:1000;

position:absolute;

float:right;

background-color:Black;

}

#leftButton img,#rightButton img

{

margin-top:55px;

}

</style>

</head>

<body>

<div id="ParentDiv">

<div id="leftButton"><img src="images/gtk_media_forward_rtl.png" /></div>

<div id="rightButton"><img src="images/gtk_media_forward_ltr.png" /></div>

<div id="ChildDiv">

<img id="1" src="images/blogpics/UCIMG2.png" alt="1" />

<img id="2" src="images/blogpics/UCIMG1.png" alt="1" />

<img id="3" src="images/blogpics/Translate.png" alt="1" />

<img id="4" src="images/blogpics/pieChar2.png" alt="1" />

<img id="5" src="images/blogpics/pieChar1.png" alt="1" />

<img id="6" src="images/blogpics/images.jpg" alt="1" />

<img id="7" src="images/blogpics/Form.png" alt="1" />

<img id="8" src="images/blogpics/ExplodedSlice.png" alt="1" />

<img id="9" src="images/blogpics/CustomValidation.png" alt="1" />

<img id="10" src="images/blogpics/CustomPalette.png" alt="1" />

<img id="11" src="images/blogpics/ContactUsSContr2.png" alt="1" />

<img id="12" src="images/blogpics/ContactUsSContr1.png" alt="1" />

<img id="13" src="images/blogpics/clickSlice.png" alt="1" />

<img id="14" src="images/blogpics/chart314.png" alt="1" />

<img id="15" src="images/blogpics/chart3.png" alt="1" />

</div>

 

</div>

</body>

</html>

 

Tags: ,

ASP.NET | jQuery