Interesting javascript slideshow - easily accomplished?

Hi There,

I've come across this interesting web page - to see what I'm talking about, just hover over each image:
http://poptech.org/speakers?utm_sour...m_medium=email

Could this sort of thing be accomplished fairly easily with an existing javascript library/script? A jquery script would be ideal if such a thing exists.

Thanks,
Dan

dantheman50_98

Newbie Poster

20 posts since Aug 2008

Reputation Points: 10

Solved Threads: 0

8 Months Ago

It's quite simple with JQuery.

The boring part is to make the css.

Check this simple example:

<html>

	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
	
	<script>
		//document ready
		$(function()
		{
			$(".item").hover(function()
			{
				$(this).css("z-index", 999); // Set item to be on top of everybody else
				$(this).children(".label").slideUp(); // Hide label on mouse over
				$(this).children(".description").slideDown(); // Show description on mouse over
			},
			function()
			{
				$(this).css("z-index", 10); // Restore z-index
				$(this).children(".label").slideDown(); // Show label on mouse out
				$(this).children(".description").slideUp(); // Hide description on mouse out
			});
		});
	
	</script>
	
	<style text="text/css">
		.item
		{
			width: 200px;
			height: 200px;
			position: relative;
		}
		
		.item .image
		{
			position: absolute; top: 0; left: 0;
			z-index: 10;
		}
		
		.item .label
		{
			position: absolute; bottom: 0; left: 0;
			width: 200px;
			height: 30px;
			background: #800;
			color: #fff;
			z-index: 20;
		}
		
		.item .description
		{
			position: absolute; top: 0; right: -200px;
			width: 200px;
			height: 200px;
			background: #008;
			color: #fff;
			display: none;
			z-index: 30;
		}
	</style>
	
	<body>
	
		
		<div id="itens">
			<span class="item">
				<img class="image" src="http://cjsmedium.web.officelive.com/images/pink-floyd-backs-5000178.jpg" width="200" height="200" />
				<span class="label">label here</span>
				<span class="description">
					hdusauhd suahdhusa uhuhdsa uhdusahd huashud ashudu hauhdu hashud huauhd huashud aushduh auhduhasuh daushuhd auhsuhd auhduhasudhasuh
				</span>
			</span>
			<span class="item">
				<img class="image" src="http://i871.photobucket.com/albums/ab278/CrimsonBlade7/Dark_Side_of_the_Moon_by_megamanexe.png" width="200" height="200" />
				<span class="label">label here</span>
				<span class="description">
					hdusauhd suahdhusa uhuhdsa uhdusahd huashud ashudu hauhdu hashud huauhd huashud aushduh auhduhasuh daushuhd auhsuhd auhduhasudhasuh
				</span>
			</span>
			<span class="item">
				<img class="image" src="http://www.wallpaperbase.com/wallpapers/music/pinkfloyd/pink_floyd_8.jpg" width="200" height="200" />
				<span class="label">label here</span>
				<span class="description">
					hdusauhd suahdhusa uhuhdsa uhdusahd huashud ashudu hauhdu hashud huauhd huashud aushduh auhduhasuh daushuhd auhsuhd auhduhasudhasuh
				</span>
			</span>
			<span class="item">
				<img class="image" src="http://www.progarchives.com/progressive_rock_discography_covers/364/cover_20612192009.jpg" width="200" height="200" />
				<span class="label">label here</span>
				<span class="description">
					hdusauhd suahdhusa uhuhdsa uhdusahd huashud ashudu hauhdu hashud huauhd huashud aushduh auhduhasuh daushuhd auhsuhd auhduhasudhasuh
				</span>
			</span>
		</div>
	
	
	</body>
	
</html>

Hope it helps.

AleMonteiro

Junior Poster

164 posts since Aug 2010

Reputation Points: 15

Solved Threads: 30

Interesting javascript slideshow - easily accomplished?

This article has been dead for over three months