UPDATED: This tutorial was updated on 7-10-2011. I have made it so you can now add content over the slider.

Things you will need:

• Jquery Slideshow
• Jquery

The HTML

Copy the code below and I will explain.

<div id="slideshow">
    <img class="active" src="image1.jpg" alt="Slideshow Image 1" />
    <img src="image2.jpg" alt="Slideshow Image 2" />
    <img src="image3.jpg" alt="Slideshow Image 3" />
    <img src="image4.jpg" alt="Slideshow Image 4" />
    <img src="image5.jpg" alt="Slideshow Image 5" />
</div>

For our full background image slider you can use as many images as you may like but I will only use 5 images. The first image has a special class name active which will trigger our slider effect. I name the class active so I can later call on it, as of now it does nothing.

The Javascript

The main part of our full background slider is the JavaScript. Copy the JavaScript and I will explain. Insert the codes below into the head section of your html document.

<script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>

The code above gets or as you like to say calls the jquery. Change to your correct location.

<script type="text/javascript">

function slideSwitch() {
    var $active = $('#slideshow IMG.active');

    if ( $active.length == 0 ) $active = $('#slideshow IMG:last');

    // use this to pull the images in the order they appear in the markup
    var $next =  $active.next().length ? $active.next()
        : $('#slideshow IMG:first');

    // uncomment the 3 lines below to pull the images in random order

    // var $sibs  = $active.siblings();
    // var rndNum = Math.floor(Math.random() * $sibs.length );
    // var $next  = $( $sibs[ rndNum ] );

    $active.addClass('last-active');

    $next.css({opacity: 0.0})
        .addClass('active')
        .animate({opacity: 1.0}, 1000, function() {
            $active.removeClass('active last-active');
        });
}

$(function() {
    setInterval( "slideSwitch()", 5000 );
});

</script>

The code above is our jquery function or shall i say script. The script is basically telling jquery to look for an image with the class name active, which we’ve already provided in our html markup,Then it tells the JavaScript that when it finds the image with the class name active to get the images in the order they’re provided in.

The css

Copy the css code below. The css code below is the code which styles our full page slider image. It’s very simple and makes our background look nice.

#slideshow {
    position:relative;
    height:350px;
    z-index:-1;
}

#slideshow IMG {
    position:absolute;
    top:0;
    left:0;
    z-index:8;
    opacity:0.0;
}

#slideshow IMG.active {
    z-index:10;
    opacity:1.0;
}

#slideshow IMG.last-active {
    z-index:9;
}

#slideshow img {
	/* Set rules to fill background */
	min-height: 100%;
	min-width: 1024px;

	/* Set up proportionate scaling */
	width: 100%;
	height: auto;

	/* Set up positioning */
	position: fixed;
	top: 0;
	left: 0;
}

@media screen and (max-width: 1024px){
	img.bg {
	left: 50%;
	margin-left: -512px;
}
}

Source: Jonraasch

If you would like to add content over your slider image copy and paste the code below into your css document. The code below is just a content div that holds our content. I position the background and gave it a -1 z-index so it would appear below our content div below.

#content {
	width: 920px;
	margin: 0 auto;
	background: rgba(11,11,11, 0.5);
	padding: 20px;
}

That is all for this tutorial but you should now have a good understanding of how to create a multiple background sideshow for your website. I did not go over the css code that much because the best way to learn is to download and dissect the code. I hope this tutorial has helped you.

Popular Front

World of Merix

Loewy Design

Serial Cut

Best Before

Nofrks

Cpeople

Intermission Design

Wearex3

J and K

Dreamerlines

Ormanclark

Enterrodagata

Suiepaparude

Matt Zeilinger

Search Inside Video

Lucino Gene

Rachel Bloch

Peter Pearson

Morphix

Create an Image Rotator with Description (CSS/jQuery)

An image rotator is one great way to display portfolio pieces, eCommerce product images, or even as an image gallery. Although there are many great plugins already, this tutorial will help you understand how the image rotator works and helps you create your own from scratch.

jQuery Image Gallery/News Slider with Caption Tutorial

A really cool News Slider that uses two scrollers to create very slick effect. It uses scrollTo to scroll both description and image items and it comes with previous, next, play, stop and mouseover events.

Create a Slick and Accessible Slideshow Using jQuery

In this in-depth web development tutorial, you’ll learn how to create a usable and web accessible slideshow widget for your site using HTML, CSS, and JavaScript (jQuery). In the process, you’ll see the concept of Progressive Enhancement in action.

Create Beautiful jQuery slider tutorial

This tutorial explains how to develop Create Beautiful jQuery sliders tutorial with image description and name.

Supersized Full Page Image Slider

So, what exactly does Supersized do? Resizes images to fill browser while maintaining image dimension ratio, Cycles Images/backgrounds via with transitions and preloading, and Navigation controls allow for pause/play and forward/back

Jquery Coin Slider

The coin slider is a featured content slider that can be used in many different ways. It’s fancy transitions and unique effects makes this slider worth while.

Jquery Nivo Image Slider

Nivo slider is another awesome jquery plugin that allows you to create a dynamic image slider with style.

GalleryView: A jQuery Content Gallery Plugin

GalleryView aims to provide jQuery users with a flexible, attractive content gallery that is both easy to implement and a snap to customize.

Making a Slideshow with jQuery

I’m going to walk you through how to apply jQuery to an ever more common development scenario, animating a home page slide show.

slideViewerPro

slideViewerPro is a fully customizable jQuery image gallery engine which allows to create outstanding sliding image galleries for your projects and/or interactive galleries within blog posts.

Folder Structure

In the folder of your for your image gallery you should have 3 folders and 2 files.

• Css – Contains the jquery css
• Images – Contains images
• Js – Contains the javascript
• index.html
• style

The HTML Structure

For the image gallery I simply wrapped the gallery in a div and added the images. Every 4 image has two different classed assigned to them. For example the first 4 images has a class name of thumb-small and for the other 4 images they have a class name of thumb-bottom.

<a href="images/skate1.jpg" title="You can write anything in here"><img class="thumb-top" src="images/skate1.jpg" alt="skateboarder" title="skateboarder"/></a>
<a href="images/skate1.jpg" title="You can write anything in here"><img class="thumb-top" src="images/skate1.jpg" alt="skateboarder" title="skateboarder"/></a>
<a href="images/skate1.jpg" title="You can write anything in here"><img class="thumb-top" src="images/skate1.jpg" alt="skateboarder" title="skateboarder"/></a>
<a href="images/skate1.jpg" title="You can write anything in here"><img class="thumb-top" src="images/skate1.jpg" alt="skateboarder" title="skateboarder"/></a>
<a href="images/skate1.jpg" title="You can write anything in here"><img class="thumb-bottom" src="images/skate1.jpg" alt="skateboarder" title="skateboarder"/></a>
<a href="images/skate1.jpg" title="You can write anything in here"><img class="thumb-bottom" src="images/skate1.jpg" alt="skateboarder" title="skateboarder"/></a>
<a href="images/skate1.jpg" title="You can write anything in here"><img class="thumb-bottom" src="images/skate1.jpg" alt="skateboarder" title="skateboarder"/></a>
<a href="images/skate1.jpg" title="You can write anything in here"><img class="thumb-bottom" src="images/skate1.jpg" alt="skateboarder" title="skateboarder"/></a>

The Css

For the Css you might wonder what -webkit, and -moz-transform is. Webkit is a Css3 tag that targets the safari web browser and moz-transform is a Css3 tag that targets the Mozilla Firefox web browser. In the css

1. -webkit-transform: – Used to rotate the images
2. -webkit-transition: – Used to zoom/ease in on the images

.thumb-top{
	clear:none;
	padding:10px 10px 30px 10px;
	height:200px;
	width:200px;
	background:#fff;
	-moz-transform:rotate(-4deg);
	-webkit-transform:rotate(-4deg);
	-webkit-transition: -webkit-transform 0.1s ease-in; /* Tells webkit to make a transition of a transform */
	border:1px solid #ececec; /* This border merges with the colour of the shadow in supporting browsers
	but in non-supporting browsers the border acts as the edge of the image */
	margin-bottom:25px;
}

.thumb-bottom{
	clear:none;
	padding:10px 10px 30px 10px;
	height:200px;
	width:200px;
	background:#fff;
	-moz-transform:rotate(-4deg);
	-webkit-transform:rotate(-4deg);
	-webkit-transition: -webkit-transform 0.1s ease-in; /* Tells webkit to make a transition of a transform */
	border:1px solid #ececec; /* This border merges with the colour of the shadow in supporting browsers
	but in non-supporting browsers the border acts as the edge of the image */
	margin-bottom:25px;
}

.thumb-top:hover{
	z-index:100;
	position:relative; /* Make the z-index work in Safari */
	-moz-transform:rotate(-8deg) scale(1.2);
	-webkit-transform:rotate(-8deg) scale(1.2);
}

.thumb-bottom:hover{
	z-index:100;
	position:relative; /* Make the z-index work in Safari */
	-moz-transform:rotate(4deg) scale(1.2);
	-webkit-transform:rotate(4deg) scale(1.2);
}

#gallery {
	margin-top:20px;
}

Inserting and activating jquery plugins

First things first when activating a jquery plugin is to simply make sure we call in the jquery script. Insert the code below into the head section of your document. The code below calls in jquery, then the two jquery plugins, and finally the plugin Css.

<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" />
<script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>

Now we want to add the script below to the body of our HTML document right before the end of the body tag.

<script type="text/javascript">
$(document).ready(function(){
$(".thumb-top,.thumb-bottom").fadeTo("slow", 0.3);
$(".thumb-top,.thumb-bottom").hover(function(){
$(this).fadeTo("slow", 1.0);
},function(){
$(this).fadeTo("slow", 0.3);
});
});

$(function() {
    $('#gallery a').lightBox();
});
</script>

For the code below I will try to explain it the best way I can so you can better understand it. I know not everyone is good with inserting Javascript plugins or changing functions.

The first function inside of the script tag targets the light box plugin. The light box plugin is when you click on an image and the image enlarges without being taken to the direct image location.

For this $(“.thumb-top,.thumb-bottom”).fadeTo(“slow”, 0.3); function it just tells jquery to fade to anything with the class of thumb-top or thumb-bottom. So whenever your mouse is not on the image it will be darken.

For this $(“.thumb-top,.thumb-bottom”).hover(function(){ function it just tells you on hover, or whenever you move over the image with your mouse that it will highlight the image.

For the $(‘#gallery a’).lightBox(); function it just asks you what id tag would you like for it to bring up whenever you click on something with the tag of a href. For example I have the images wrapped inside of the id gallery and every image has an a href assign to it so whenever you click on it jquery knows when to call for the second lightbox function.

Note: Rotation does not work in Internet explorer browsers do to lack of support of Css3.

After that you should now have your very own css3/jquery image gallery. I am no jquery expert but I try to help you guys understand it and a easy way instead of using words that you guys are not familiar with.

Credit

Credit goes to Csswizardry for the css3 image gallery.
Credit goes to Leandrovieira for the lightbox plugin.

How does it work

Whenever you click on a certain link, the page will scroll to that specific link. For example if were to have a long portfolio page and it took forever to reach the bottom I might want to add a link at the bottom of my website that says Back to top and when visitors click on that link the page would scroll to the top.

Script

Add code below to head section or to a separate javascript file. Tells the document to scroll

$(document).ready(function(){
	$(".scroll").click(function(event){
		//prevent the default action for the click event
		event.preventDefault();

		//get the full url - like mysitecom/index.htm#home
		var full_url = this.href;

		//split the url by # and get the anchor target name - home in mysitecom/index.htm#home
		var parts = full_url.split("#");
		var trgt = parts[1];

		//get the top offset of the target anchor
		var target_offset = $("#"+trgt).offset();
		var target_top = target_offset.top;

		//goto that anchor by setting the body scroll top to anchor top
		$('html, body').animate({scrollTop:target_top}, 500);
	});
});

HTML

Add the code below after your head section. I did not include the entire html but you can download it or view the demo.

<body>
<div id="top">
<h1>Thanks for coming to the top</h1>
</div><!--end top-->

<div id="middle">
<h1>Thanks for coming to the middle</h1>
</div><!--end middle-->

<div id="bottom">
<h1>Thanks for coming to the bottom</h1>
</div><!--end bottom-->

<p><a href="#top" class="scroll">Go Top</a></p>

<style>

#top{
height:500px;
background:maroon;
margin-bottom:20px;
}

#middle{
height:500px;
background:olive;
margin-bottom:20px;
}

#bottom{
height:500px;
background:teal;
margin-bottom:20px;
}
</style>
</body>