How to Make a Slideshow

JQuery SlideshowCharlie wrote and asked for me to make a slideshow or gallery from scratch. So, today I will show you how to make a slide show.

All of the HTML, CSS, JavaScript and JQuery code required will be provided and explained. Here is the code in a zipped archive JQuery Slideshow Code.

First, I’ll go over all of the HTML and CSS. Then in the next part of the tutorial I’ll cover all of the JavaScript and JQuery required.

This is the fourth tutorial in my From Scratch series of tutorials. In this series I’m making video tutorials on subjects that haven’t been provided in detail anywhere else on the internet (As Far As I Know). Here are the previous tutorials:

All of the code follows the video. It is licensed under the GNU license which basically means you can do what ever you’d like with it.

Code From the Video

LIGHTBOX_TEST.HTML

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

<html xmlns=”http://www.w3.org/1999/xhtml” lang=”en” xml:lang=”en”>

<head>

<meta http-equiv=”Content-Type” content=”text/html;charset=UTF-8″ />

<title>New Think Tank Lightbox</title>

<link rel=”StyleSheet” href=”lightbox_style.css” />

 

</style>

<script type=”text/javascript” src=”https://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js”></script>

 

<script type=”text/javascript” src=”./js/lightbox_js_code.js”></script>

 

</head>

<body>

<a class=”open_lightbox” href=”#”>Open Lightbox</a>

 

<div class=”lightbox-panel”>

 

<img src=”./images/ape.jpg” class=”ntt_media_file” alt=”Ape” />

<img src=”./images/shakinghands.jpg” style=”display:none;” class=”ntt_media_file” alt=”Shaking Hands” />

<img src=”./images/elephant.jpg” style=”display:none;” class=”ntt_media_file” alt=”Elephant” />

<img src=”./images/veggies.jpg” style=”display:none;” class=”ntt_media_file” alt=”Veggies” />

<img src=”./images/penguin.jpg” style=”display:none;” class=”ntt_media_file” alt=”Penguin” />

<img src=”./images/money2.png” style=”display:none;” class=”ntt_media_file” alt=”Money Puzzle” />

<img src=”./images/Frame3.jpg” style=”display:none;” class=”ntt_media_file” alt=”Hurt Back” />

 

<iframe width=”560″ height=”349″ src=”http://www.youtube.com/embed/8z7YPx96G6U” style=”display:none;” class=”ntt_media_file” frameborder=”0″ allowfullscreen></iframe>

 

<div class=”ntt_prev_button”>

<img src=”./images/fc_left_arrow.png” id=”ntt_prev_media” alt=”Get Previous Media Item” />

</div>

 

<div class=”ntt_next_button”>

<img src=”./images/fc_right_arrow.png” id=”ntt_next_media” alt=”Get Next Media Item” />

</div>

 

<!– Contains the button that closes the lightbox –>

<div class=”ntt_close_button”>

<img src=”./images/ntt_close_button.png” id=”close-panel” alt=”Close Lightbox” />

</div>

</div><!– /lightbox-panel –>

 

<div id=”lightbox_background”> </div><!– lightbox background dimmer–>

 

</body>

</html>

LIGHTBOX_STYLE.CSS

#lightbox_background {
display:none;
background:#000;
opacity:0.9;
position:absolute;
top:0px;
left:0px;
min-width:100%;
min-height:100%;
z-index:1001;
}

.lightbox-panel {
display:none;
position:absolute;
top:22%;
left:22%;
width:425px;
background:#FFFFFF;
padding:15px;
padding-bottom: 50px;
border:2px solid #000;
z-index:1002;
text-align: center;
max-height: 500px;
max-width: 800px;
overflow: hidden;
}

.ntt_close_button {
display:none;
position:absolute;
bottom: 10px;
right: 15px;
}

.ntt_next_button{
display:none;
position:absolute;
bottom: 10px;
left: 50px;
}

.ntt_prev_button{
display:none;
position:absolute;
bottom: 10px;
left: 15px;
}

LIGHTBOX_JS_CODE.JS

$(document).ready(function(){

// When a link of class open_lightbox is clicked this function is triggered

$(“a.open_lightbox”).click(function(){

 

// Sets the opacity for the background shadow to 85%

$(“#lightbox_background”).css({opacity: 0.85});

 

// Makes all of the hidden parts of the lightbox appear

$(“#lightbox_background, .lightbox-panel, .ntt_close_button, .ntt_next_button, .ntt_prev_button”).fadeIn(300);

 

// Gets the height and width of the first media type displayed

// Media type is a reference to any images or movies

ntt_img_height = $(‘.ntt_media_file:first’).css(‘height’);

ntt_img_width = $(‘.ntt_media_file:first’).css(‘width’);

 

// Changes the size of the parent div that surrounds the media on screen

// Animate will make the changes slowly for dramtic effect

$(‘.ntt_media_file:first’).parent().animate({

height: ntt_img_height+100,

width: ntt_img_width

}, “slow”);

 

});

 

// If an img is clicked on with the id of close-panel run this function

$(“img#close-panel”).click(function(){

 

// Make all the lightbox elements disappear

$(“#lightbox_background, .lightbox-panel, .ntt_close_button, .ntt_next_button, .ntt_prev_button”).fadeOut(300);

})

 

// When the next button is clicked it triggers a click event on

// the current image visible on the screen

$(“img#ntt_next_media”).click(function(){

$(“.ntt_media_file:visible”).trigger(‘click’);

});

 

// Closes the lightbox if the escape key is pressed

$(document).keypress(function(e) {

// If the key pressed was escape close the lightbox

if(e.keyCode == 27)

{

$(“#lightbox_background, .lightbox-panel”).fadeOut(300);

}

 

});

 

// This event is triggered any time the user clicks on anything with a

// class of ntt_media_file.

// It cycles through the different media types from first to last

$(“.ntt_media_file”).click(function(){

 

if( $(this).next(‘.ntt_media_file’).length == 0)

{

// Make all visible media disappear in the lightbox

$(“.ntt_media_file:visible”).toggle();

 

// Display the first media in the lightbox

$(“.ntt_media_file:first”).toggle();

 

// Call this to resize the div that surrounds the media

// based on the size of the media displayed

ntt_resize_div_container();

 

 

} else {

 

// Make all visible media disappear in the lightbox

$(“.ntt_media_file:visible”).toggle();

 

// this is a reference to the element that was clicked to trigger

// this function. This statement is causing the next media

// with the class ntt_media_file to appear

$(this).next(‘.ntt_media_file’).toggle();

 

// Call this to resize the div that surrounds the media

// based on the size of the media displayed

ntt_resize_div_container();

 

}

 

});

 

// This event is triggered any time the user clicks on the previous

// button.

// It cycles backwards through the different media types

$(“.ntt_prev_button”).click(function(){

 

// This checks to see if a media file is available to display

if( $(“.ntt_media_file:visible”).prev(‘.ntt_media_file’).length == 0)

{

// Make all visible media disappear in the lightbox

$(“.ntt_media_file:visible”).toggle();

 

// Display the first media in the lightbox

$(“.ntt_media_file:last”).toggle();

 

// Call this to resize the div that surrounds the media

// based on the size of the media displayed

ntt_resize_div_container();

 

} else {

 

// Get the current index value for the media shown

var ntt_current_media_shown = $(“.ntt_media_file:visible”).index();

 

// Get the index for the media that proceeds the current image

var ntt_prev_item_to_show = ntt_current_media_shown – 1;

 

// Toggle off all visible media in the lightbox

$(“.ntt_media_file:visible”).toggle();

 

// Toggle on the media previous to the last shown

$(“.ntt_media_file”).eq(ntt_prev_item_to_show).toggle();

 

// Call this function to resize the div based on dimensions

// of the media shown in the lightbox

ntt_resize_div_container();

 

}

 

});

 

});

 

// Call this function to resize the div based on dimensions

// of the media shown in the lightbox

function ntt_resize_div_container()

{

// Get the current height and width of the visible media in lightbox

ntt_img_height = $(“.ntt_media_file:visible”).css(‘height’);

ntt_img_width = $(“.ntt_media_file:visible”).css(‘width’);

 

// Define the margins based on the size of the image

ntt_img_margin_top = (ntt_img_height / 4);

ntt_img_margin_left = (ntt_img_width / 4);

 

// Target the div that surrounds the visible media (it’s a div)

// Adjust the size of the parent div based on the dimensions

// of the media it contains

$(“.ntt_media_file:visible”).parent().animate({

height: ntt_img_height+100,

width: ntt_img_width

}, “fast”);

 

 

$(“.ntt_media_file:visible”).parent().css({

‘position’: ‘fixed’,

‘top’: ‘22%’,

‘left’: ‘22%’,

‘min-width’: ‘530px’,

‘margin-top’: ntt_img_margin_top,

‘margin-left’: ntt_img_margin_left

});

 

}

Leave a Reply

Your email address will not be published.

Google+