Easy way to Slide Images with Overlay Caption Using CSS and jquery

Easy way to Slide Images with Overlay Caption Using CSS and jquery

On 01.27.10, In CSS, HTML, jquery, by Steve

Today i found an article on Images with Overlay caption while reading feed of queness. Moreover , I previosly did one article on Lightest content slider ever which was really cool. Now , today i tried mixing these two tutorials and made one. That means I found the easy and light image slider. Pretty interesting, isnt it? So without wasting much time , lets start.

Here is the DEMO

The trick is simple , I just filled div mystuff with content inside div wrapper and tweaked little CSS of mystuff class.
Here is the html place it inside your body tag of your web page:

^?View Code HTML

	<div id="button">
		 <a class="button1 active" rel="1" href="#"></a>
		 <a class="button2" rel="2" href="#"></a>
		 <a class="button3" rel="3" href="#"></a>
	</div> <!-- end of div button-->
 
	<div class="clear"></div>
 
	<div id="myslide">
		<div class="cover">
 
			<div class="mystuff">
				<img src='wolf.jpg' />
				<div class='description'>
					<p class='description_content'>This is image one. The pack, the basic unit of wolf social life, is usually a family group. It is made up of animals related to each other by blood and family ties of affection and mutual aid. </p>
				</div>
			</div>
 
			<div class="mystuff">
				<img src='wolf1.jpg' />
				<div class='description'>
					<p class='description_content'>This is image two. The basic unit of wolf social life, is usually a family group. It is made up of animals related to each other by blood and family ties of affection and mutual aid. </p>
				</div>
			</div>
 
			<div class="mystuff">
				<img src='wolf2.jpg' />
				<div class='description'>
					<p class='description_content'>This is image three. The basic unit of wolf social life, is usually a family group. It is made up of animals related to each other by blood and family ties of affection and mutual aid. </p>
				</div>
			</div>
 
		</div> <!-- end of div cover -->
	</div>  <!-- end of div myslide -->

Here is the CSS (little tweaked) , Place it inside your stylesheet:

^?View Code CSS

#myslide {width:425px;overflow:hidden;position: relative;height:276px;margin-bottom:20px}
#myslide .cover{
		width:1275px; /*------- class mystuff width * number of mystuff divs (425 * 3 = 480)---------- */
		position: absolute;
		height:276px;
	}
 
	#myslide .mystuff {width:425px;float:left;padding:20px 0;}
 
	.button1,.button2,.button3{background:#999;padding:6px;display:block;float:left;margin-right:5px;}
	.active{background:#111;padding:6px;display:block;float:left;outline:none;}
	.clear{clear:both;}
 
	div.description{
	position:absolute; /* absolute position (so we can position it where we want)*/
	bottom:0px; /* position will be on bottom */
	width:425px;
	/* styling bellow */
	background-color:black;
	font-family: 'tahoma';
	font-size:15px;
	color:white;
	opacity:0.6; /* transparency */
	filter:alpha(opacity=60); /* IE transparency */
	}
 
	p.description_content{padding:10px;margin:0px;}

And here is the script part. Palace it inside script tag:

^?View Code JAVASCRIPT

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/JavaScript">
$(document).ready(function(){$('#button a').click(function(){var integer=$(this).attr('rel');$('#myslide .cover').animate({left:-425*(parseInt(integer)-1)})
$('#button a').each(function(){$(this).removeClass('active');if($(this).hasClass('button'+integer)){$(this).addClass('active')}});});});
</script>

Check out the DEMO how it comes.
All Done!
Cheers!

Like It? Share it.

Loading...

Comments

James

01.27.10

I haven’t worked with CSS and JQuery much. I am wondering if the caption could fade out after a set time and leave a “show caption” link to display text again when clicked.

Watch Movies

01.27.10

Like this post!Found this website on google.I will be coming back here for sure

Scottie Casco

01.27.10

Hullo, how are you doing? I truly like your blog! I wonder if you can help me (im sure some other readers might also be curious). I want to get into creating a blog as well and I at the moment use a blog with wordpress, but it is quite difficult for me to make and I would like to try to find some good training guides or courses (preferably ones that are free) that can hopefully assist me in making use of word press correctly. As a wordpress web master yourself, do u perhaps know were i can learn tutorials to do this? Thank you