Sliding-Gallery With JQuery and CSS By Gray Junior

Introduction

Skills Required: Basic JQuery, HTML & CSS

Difficulty: Easy

Previously, I’ve released a copy of my JQuery + CSS Slideshow for everyone to download, here. A few days later, I figured besides sharing, I could probably teach a thing or two of it. As simple as it is, if you’re able to finish up something like that, you will have no problem doing your very own slideshow in future!

What You Will Be Doing

Jquery and CSS slideshow By Gray Junior How confusing can it get? Well, if you have experience in JQuery, basic HTML and CSS, you’ve nothing to be afraid of then! Really, it requires just basic knowledge of the languages to make it work. Only problem is, figuring out the “How”. So, let’s get started shall we?

HTML & CSS

To even begin buildiing the mechanism of the slideshow, we need to visualize its layout. So go ahead and start setting up the page.

Slideshow Layout in HTML

  • Slide01 Slide #01. This is a sample text.
  • Slide02 Slide #02. This is a sample text.
  • Slide03 Slide #03. This is a sample text.
<!-- end of #slideshow -->
 
<!-- end of #main -->
 
 <!--! end of #container -->

The slides are contained in an Unordered List, with each image inside a LI element. We shall be using the container “#main” as the holder for each of the slides. In other words, the restrictor for the size. By placing the container “#slidehsow” evenly on each side using position absolute, we now form a border around the slides. Let’s set the width of each image to 100% so that it scales along with the container “#main” for flexibility. As you can see, We have 2 other links, the “Next” and “Previous” buttons, which are just set outside the Unordered List. This is so that it will be unobtrusively place itself within the container “#main” and not bother the unordered list areas. Now, let’s move on to the CSS portion, which you will get a clearer picture of the explanation above.

Slideshow Styling in CSS: CSS Reset

/*===============================================
CSS TOTAL RESET
===============================================*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}
:focus {
	outline: 0;
}

This set of codes, as the comment stated, will reset some of the default styling inconsistency between different browsers to 0 or none. In other words, standardizing them. Moving on to the element styling.

Slideshow Styling in CSS: Global Elements

/*===============================================
GLOBAL ELEMENTS
===============================================*/
body, html { /* DOCUMENT DEFAULT SETTINGS APPLIED THROUGHOUT THE PAGE */
	padding: 20px;
	font-family: Georgia, Helvetica, Verdana;
	font-size: 12px;
	background: #111;
	color: #fff;
}
 
h1 { /* STYLE FOR THE MAIN TITLE */
	font-size: 35px;
	text-align: center;
	text-shadow: 0 1px 1px #111;
}
 
img { /* DEFAULT SETTINGS FOR THE SLIDES */
	width: 100%;
	height: 100%;
}
 
a { /* DEFAULT STYLE FOR THE LNKS */
	color: #555;
	text-decoration: none;
	z-index: 10;
}
 
a:hover { /* HOVER STYLE FOR THE LINKS */
	color: #222;
}
 
p { /* STYLING AND POSITIONING OF THE SLIDES' DESCRIPTION */
	position: absolute;
	margin-top: -110px;
	padding: 10px;
	width: 100%;
	min-height: 90px;
	background: rgba(11,11,11, 0.7);
}
 
.button { /* STYLE FOR THE LINK BUTTONS */
	padding: 10px 20px;
	background: #eee;
}
 
.next { /* POSITIONING THE 'NEXT' LINK ON THE RIGHT */
	float: right;
	margin-right: 20px;
}
.prev { /* POSITIONING THE 'PREVIOUS' LINK ON THE LEFT */
	float: left;
}
 
.box-shadow-up { /* CLASS FOR SLIDE DESCRIPTION BOX SHADOW */
	-o-box-shadow: 0 -1px 5px #222;
	-moz-box-shadow: 0 -1px 5px #222;
	-webkit-box-shadow: 0 -1px 5px #222;
	box-shadow: 0 -1px 5px #222;
}
 
.box-shadow { /* DECLARED AS A CLASS FOR REUSABILITY */
	-o-box-shadow: 0 2px 5px #000;
	-moz-box-shadow: 0 2px 5px #000;
	-webkit-box-shadow: 0 2px 5px #000;
	box-shadow: 0 2px 5px #000;
}

As you can see, its pretty straight-forward. Very much what you may have learned in the school and the usuals. The only new things are the CSS3, such as box shadow and RGBA. You may notice that I had seperated each and every elements with their own class, such as box-shadow, button, etc. The reasons for such effort is to better organize your styling. IDs are generally used for javascript or php to identify an element, so it is always a good practice to separate designing and styling from positioning and defaults. In other cases, it could also be a certain same set of styling will be re-used again and again. Instead of increasing the length and size of your stylesheet, a smarter way would be to use a class to attach the same set of styles to different elements.

Slideshow Styling in CSS: Slideshow Elements

/*===============================================
SLIDESHOW ELEMENTS
===============================================*/
#container #main { /* POSITIONING THE OUTERMOST CONTAINER */
	position: relative;
	padding: 10px;
	margin: 30px auto 20px;
	width: 800px;
	height: 400px;
	background: #eee;
}
#container #main #actions { /* POSITIONING THE LINKS */
	position: absolute;
	top: 50%;
	margin-top: -25px;
	width: 100%;
	z-index: 10;
}

The “#action” ID are used for the “previous” and “next” links, that shall change the slides. In this case, I would like to position them in the center so that it would be more noticeable. In order to do that, I used a simple line of code to achieve centered positioning: “top: 50%”. If you have done that, you would notice that it isn’t exactly centered. That’s because our links have a size rather than a single line. So to offset that, we set its margin-top to -25px.

#container #main #slideshow { /* POSITIONING THE SLIDESHOW */
	position: absolute;
	top: 10px;
	bottom: 10px;
	left: 10px;
	right: 10px;
	background: #fefefe;
	list-style: none;
	overflow: hidden;
}
 
#container #main #slideshow li { /* DEFAULT SETTINGS FOR EACH SLIDES */
	width: 100%;
	height: 100%;
	overflow: hidden;
}

By setting the #slideshow’s Top, Right, Bottom, Left to 10px, not only does it create a 10px border-like, it also allows the slideshow to inherit the size of its outer container “#main”.

JQuery

Having the layout and looks setup, we are now ready to move on to developing the slideshow’s mechanism. First, Let’s declare some of the variables for easier calling later on.

Slideshow’s Mechanism

// DECLARING VARIABLES FOR EASIER CALLING
var slideshow = $('#slideshow'),
	main = $('#main'),
 
	actions = $('#actions'),
	next = $('#next'),
	previous = $('#previous'),
	desc = slideshow.find('p');

It’s pretty self-explanatory as well if you know basic JQuery. Next, we shall start declaring the function for the mechanism.

(function($) {
	$.fn.slider = function(settings) {
		//THE DEFAULT SETTINGS FOR THE SLIDESHOW
		var defaults = {
			speed: 800,
			actions: true,
			width: 800,
			height: 400
		};
 
		//EXTEND THE SETTINGS SO USER MAY CUSTOMIZE
		var settings = $.extend(defaults, settings);

What this does is basically, to declare a set of given settings with default values, and then extend it to allow users to customize it by setting their own values. The extend is an API of JQuery’s massive library, that allows the merging the contents of 2 or more objects together into the first object in its parameter.

//CHANGE THE SIZE OF THE SLIDESHOW
//TO THE SIZE USER DECLARED IN SETTINGS
main.css({
	"height": settings.height,
	"width": settings.width
});

Of course, when you allow the users to set their own values, you need to apply them to make changes. The first basic settings to apply would be its width and height. So to call on the values declared in the settings, we use “settings.width” or “settings.height”, where “settings” is the variable’s name you used.

function animation(action) {
	//IF USER CLICKS ON NEXT LINK
	if(action == "next") {
		//HIDE THE FIRST SLIDE
		$('li:first').animate({
			height: 0,
			opacity: 0
		}, settings.speed, function() {
			//SHOW IT WHEN ITS APPEND TO
			//THE BOTTOM OF THE LIST
			$(this).animate({
				height: settings.height,
				opacity: 1
			}, 'fast');
			//REMOVE SLIDE AND APPEND AT THE BOTTOM
			$(this).remove().appendTo(slideshow).show();
		});

This function handles all the animation you would see in the slideshow. The parameter passes the direction in which the slideshow should animate. If the user presses “next” then the slide that is currently showing will have its height and opacity reduced. On its second part, you notice that the height is now set back to “settings.height” and opacity 1. That’s because we would still want the slide appeared as the last of the list of slides, but hidden. As processed by the last line, this slide will be removed and then append back to “#slideshow” as the last one, and shown with “show();”. Sounds confusing? Well not really if you’re able to visualize it. I shall assist you in doing that with the snapshot examples below:

Before Clicking Next:

before-clicking-next

After Clicking Next:

after-clicking-next

} else {
	//HIDE THE LAST SLIDE
	$('li:last').css({"height":"0","opacity":"0"});
	//REMOVE THE LAST SLIDE AND PREPEND
	//AS THE FIRST SLIDE
	$('li:last').remove().prependTo(slideshow);
	//ANIMATE AND SHOW THE SLIDE
	$('li:first').animate({
		height: settings.height,
		opacity: 1
	}, settings.speed);
	}
 
}

If user clicks on “previous” link, this set of codes will be activated. What it does is basically a reversed flow of the “next” animation. It hides the slide on the last of the list, removed it and prepend it back to “#slideshow”. The key in this animation is prepend and append. The difference is prepend inserts it on the top/first in the list while append inserts it on the last/bottom of the list(Look it up on JQuery’s Documentation). Once prepended, it will then animate to the given set of height and opacity 1.

Following So Far?

Well, it wasn’t that difficult right? If you can visualize it, its pretty easy to do a simple slideshow. The major bits are done, and we are left with tweaks and the action links.

// ONCLICK EVENT FOR NEXT SLIDE LINKS
next.click(function() {
	animation('next');
	return false;
});
// ONCLICK EVENT FOR NEXT SLIDE LINKS
previous.click(function() {
	animation('previous');
	return false;
});

It’s pretty straight-forward here. We bind the click events to the action links and call the function with the parameter of the direction. Returning false will prevent the page from re-loading.

//HIDE AND SHOW THE LINKS IF ACTIONS IS TRUE
if(settings.actions) {
	actions.css({"opacity":"0"});
	// MOUSE ENTER EVENT FOR ACTIONS TO APPEAR AND DISAPPEAR
	main.mouseenter(function() {
		actions.stop().animate({
			opacity: 1
		}, 'fast');
	}).mouseleave(function() {
		actions.stop().animate({
			opacity: 0
		}, 'fast');
	});
	}
}
})(jQuery);

Here, we check to see if user allows the “action” setting to be “true”. If so, we will hide the links on initial loading, and only appears when the mouse hovers over the “#main” container. Simple as that!

Conclusion

This is a simple tutorial to explain how a basic slideshow is done. With the newly introduced CSS3, many new creative slideshows are appearing, such as rotation, scaling, etc. Slideshow is very common nowadays and is used for many different purposes. Its generally pleasing to see with minimal effects, and helps to feature some of the content a website or blog has for their users. Do you enjoy this tutorial I compiled for you? If you do, I would really appreciate if you share it with others through the social media below! Thank you!

Related Post

  1. JQuery & CSS3 Slideshow on 28 Dec 2010.
  2. Step By Step: Automated JQuery Slideshow on 25 Jan 2011.