featured

John Lennon Tribute – Amazing slideshow

Today is the 31th anniversary of John Lennon’s death. Despite he was dead long before I was born, I feel that he really changed my life (same thing with Paul, George and why not say, Ringo). OK, but this isn’t a music-related website so what we’ll do is to use this great event to do a small tribute to him, and in the meantime learn a little about jQuery.

What we’ll be doing here is what I called “Weekly app”. Once a week we’ll do a good looking effect that is more than a simple plugin, and you can use to built great interfaces to you clients. At the beginning our goal was to do something similar to qwiki (via HTML) but due to time restrictions we’ll do a magazine slide show effect, that is pretty cool also, and quite remembers a few of qwiki effects.

So, let’s rock!

Demo & Download

As usual, let’s start from the end. You can download source files and see our live demo. This is how it should looks like:

 

BootStrap, CSS & Images

Again we’ll use bootstrap to help us with basic styling. Actually I’ve never used even 1% of its potential and feel bad about it. But it’s always a really good start point for lazy people like me :)

Then we’ll search for pretty background patterns on subtlepatterns.

Images are a critical point since our slideshow must have really good pictures (otherwise you wouldn’t even be reading this). So I searched via flickr (with creative commons, of course) and have found quite a few cool images. I definitely recommend you doing so.

So our basic HTML will be:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

	<title>John Lennon Tribute - Amazing slideshow</title>
	<meta name="description" content="Amazing slideshow effect with animations, masonry & much more" />
	<meta name="author" content="Rochester Oliveira - RockingCode.com" />
	<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">

	<!-- CSS: implied media="all" -->
	<link rel="stylesheet" href="css/style.css?v=2" />
	<link rel="stylesheet" href="css/bootstrap.min.css" />
</head>
<body>
  <div id="container" class="content">
	<h1>John Lennon</h1>
	<div id="masonry">
		<div class="item">
			<img src="img/john.jpg" alt="John Lennon - Source: http://en.wikipedia.org/wiki/File:JohnLennonpeace.jpg" />
			<div class="caption">John Winston Lennon, MBE (9 October 1940 – 8 December 1980) was an English musician and singer-songwriter who rose to worldwide fame as one of the founding members of The Beatles.</div>
		</div>
		<div class="item">
			<img src="img/john2.jpg" alt="John Lennon - Source: http://www.flickr.com/photos/tarale/6343336051/" />
			<div class="caption">Born and raised in Liverpool, Lennon became involved as a teenager in the skiffle craze; his first band, The Quarrymen, evolved into The Beatles in 1960.</div>
		</div>
		<div class="item">
			<img src="img/john3.jpg" alt="John Lennon - Source: http://www.flickr.com/photos/garciaon/4113490022/" />
			<div class="caption">As the group disintegrated towards the end of the decade, Lennon embarked on a solo career that produced the critically acclaimed albums John Lennon/Plastic Ono Band and Imagine, and iconic songs such as "Give Peace a Chance" and "Imagine".</div>
		</div>
		<div class="item">
			<img src="img/john4.jpg" alt="John Lennon - Source: http://www.flickr.com/photos/heardsy/2006642839/" />
			<div class="caption">After his marriage to Yoko Ono in 1969, he changed his name to John Ono Lennon. Lennon disengaged himself from the music business in 1975 to devote time to his infant son Sean, but re-emerged in 1980 with a new album, Double Fantasy. He was murdered three weeks after its release.</div>
		</div>
		<div class="item">
			<img src="img/john5.jpg" alt="John Lennon - Source: http://www.flickr.com/photos/asterix611/5245032593/" />
			<div class="caption">Lennon revealed a rebellious nature and acerbic wit in his music, his writing, his drawings, on film, and in interviews, becoming controversial through his political and peace activism.</div>
		</div>
		<div class="item">
			<img src="img/john6.jpg" alt="John Lennon - Source: http://www.flickr.com/photos/liits/5797367674/" />
			<div class="caption">He moved to New York City in 1971, where his criticism of the Vietnam War resulted in a lengthy attempt by Richard Nixon's administration to deport him, while his songs were adopted as anthems by the anti-war movement.</div>
		</div>
		<div class="item">
			<img src="img/john.png" alt="John Lennon - Source: http://en.wikipedia.org/wiki/File:John_Lennon_1964_001_cropped.png" />
			<div class="caption">As of 2010, Lennon's solo album sales in the United States exceed 14 million units, and as writer, co-writer or performer, he is responsible for 25 number-one singles on the US Hot 100 chart.</div>
		</div>
		<div class="item">
			<img src="img/war.jpg" alt="John Lennon - Source: http://marijuana.sk/en/poster-john-lennon-war-over-p-7217.html" />
			<div class="caption">In 2002, a BBC poll on the 100 Greatest Britons voted him eighth, and in 2008, Rolling Stone ranked him the fifth-greatest singer of all-time. He was posthumously inducted into the Songwriters Hall of Fame in 1987 and into the Rock and Roll Hall of Fame in 1994.</div>
		</div>
	</div>
  </div>
  <!--! end of #container -->

  <!-- JavaScript at the bottom for fast page loading -->

  <!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if necessary -->
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
  <script>window.jQuery || document.write("<script src='js/libs/jquery-1.7.1.min.js'>\x3C/script>")</script>

  <!-- scripts-->
	<script src="js/jquery.images.loaded.js"></script>
	<script src="js/jquery.masonry.min.js"></script>
	<script type="text/javascript">
	</script>
  <!-- end scripts-->

</body>
</html>

And our basic CSS will be:

body {
	background: url("../img/bg.png") repeat;
}
#container {
	position: relative;
	width: 770px;
	margin: 15px auto 0;
	padding: 10px 20px;
	background: #fff;
	-moz-box-shadow: 0 0 10px #B8B8B8; /* Firefox */
	-webkit-box-shadow: 0 0 10px #B8B8B8; /* Safari, Chrome */
	box-shadow: 0 0 10px #B8B8B8; /* CSS3 */
}
	.item {
		padding: 0;
		width: 220px;
		margin: 10px;
		float: left;
		background: #000;
	}
		.item img {
			width: 100%;
			cursor: pointer;
		}
		.item .caption {
			padding: 20px;
			font-size: 10px;
			color: #ffffff;
		}
	.selected {
		border: 2px solid #fff;
		-moz-box-shadow: 0 0 3px #000
	}

Masonry & effects

As you may notice we have included a few masonry scripts in our HTML. Masonry is an awesome script that allows you to do things that are just impossible with floats.

Our shadows are done via CSS, so when something is “selected” it’ll be with a nice effect. Our image opacity will be done via JQuery, because it’ll be easier to smooth it with animate:

var $container = $('#masonry'), $items = $container.find(".item"), count = $items.length, current = 0, lowOpacity = 0.3, highOpacity = 1;

$items.find("img").each(function(index){
	$(this)
		.animate( { opacity: lowOpacity } )
		.hover(
			function(){
				$(this).animate( { opacity: highOpacity } );
			}, function() {
				if(index != current) { // prevent current > img go lowOpacity
					$(this).animate( { opacity: lowOpacity } );
				}
			}
		);
});

Box expanding effect

If you take a look at masonry’s generated HTML (and CSS) you’ll see that once it’s applied don’t matter what you do with box sizes, they won’t rearrange themselves automatically. So our tweak will be animate box width and then reload masonry. This part can be done as function so it automatically discovers wich is the current active box, makes it small, changes next box to big and saves this status. Like this:

//this is what makes our current box bigger and the ones before it smaller
function expand(item) {
	var curItem = $(".selected"), $img = "";
	if(curItem) {
		curItem.animate({"width": "210px"}, function(){
			$img = $(this).find("img");
			imgOff($img);
		}).removeClass("selected");
	}
	$( $items[item] ).animate( {"width": "455px"}, function(){
		$img = $(this).find("img");
		imgOn($img);
		$(this).addClass("selected");
		$container.masonry( 'reload' );
	} );
	current = item;
}

Yeah, imgOff and imgOn functions are called here so let’s implement them:

//let's make our current imag look better
function imgOn(img) {
	img.each(function(){
		$(this).animate( { opacity: highOpacity } );
	});
}
//let's turn off these images
function imgOff(img) {
	img.each(function(){
		$(this).animate( { opacity: lowOpacity } );
	});
}

As you see they just get an element (or set of elements) and turn it on / off by changing its opacity.

Now with this step we can expand, boxes, let’s see how to do this automatically

Running automatically, initializing and binding clicks

Now we’ll use setInterval() to run “next” function each 5 seconds. Next function expands the next valid element, so if we haven’t reached the end of our items, it’ll go to next, when we are in the end it starts over again.

window.setInterval( "next()", 5000);
// let's go on with next item if we didn't reach end of our set of items
function next() {
	if ( (current ++) < count) {
		expand(current++);
	} else {
		expand(0);
	}
}

But we want also to bind clicks from images so clicked block will expand. We can adjust that hover binding function and wrap them all togheter, like this:

//runs qwiki function for fisrt item so we'll start loop
function init() {
	//let's set all images to dark and bind their hover
	$items.find("img").each(function(index){
		$(this)
			.animate( { opacity: lowOpacity } )
			.hover(
				function(){
					$(this).animate( { opacity: highOpacity } );
				}, function() {
					if(index != current) {
						$(this).animate( { opacity: lowOpacity } );
					}
				}
			)
			.click(
				function() {
					expand(index);
				}
			);
	});
	expand(0);
	window.setInterval( "next()", 5000);
}

Final Code

So our master piece will be:

var $container = $('#masonry'), $items = $container.find(".item"), count = $items.length, current = 0, lowOpacity = 0.3, highOpacity = 1;

$container.imagesLoaded(function(){
	$container.masonry({
		itemSelector : '.item',
		columnWidth : 240,
		isAnimated: true
	});

	init();
});
//runs function for first item so we'll start loop
function init() {
	//let's set all images to dark and bind their hover
	$items.find("img").each(function(index){
		$(this)
			.animate( { opacity: lowOpacity } )
			.hover(
				function(){
					$(this).animate( { opacity: highOpacity } );
				}, function() {
					if(index != current) {
						$(this).animate( { opacity: lowOpacity } );
					}
				}
			)
			.click(
				function() {
					expand(index);
				}
			);
	});
	expand(0);
	window.setInterval( "next()", 5000);
}
// let's go on with next item if we didn't reach end of our set of items
function next() {
	if ( (current ++) < count) {
		expand(current++);
	} else {
		expand(0);
	}
}
//let's make our current imag look better
function imgOn(img) {
	img.each(function(){
		$(this).animate( { opacity: highOpacity } );
	});
}
//let's turn off these images
function imgOff(img) {
	img.each(function(){
		$(this).animate( { opacity: lowOpacity } );
	});
}
//this is what makes our current box bigger and the ones before it smaller
function expand(item) {
	var curItem = $(".selected"), $img = "";
	if(curItem) {
		curItem.animate({"width": "210px"}, function(){
			$img = $(this).find("img");
			imgOff($img);
		}).removeClass("selected");
	}
	$( $items[item] ).animate( {"width": "455px"}, function(){
		$img = $(this).find("img");
		imgOn($img);
		$(this).addClass("selected");
		$container.masonry( 'reload' );
	} );
	current = item;
}

That’s all folks!

Hope you enjoyed reading. See you soon!

6 Comments

  1. I truly enjoy looking through on this web site , it has got wonderful articles . “Those who complain most are most to be complained of.” by Matthew Henry.

    • Rochester Oliveira (Author)

      Hi Markus!

      Thanks a lot, and keep coming we have much more great content to publish :)

      []‘s

  2. Some genuinely nice and useful info on this website, also I think the layout holds superb features.

    • Rochester Oliveira (Author)

      Hi Drew,
      Thanks!

      Gridlocked is amazing, isn’t it? And we’ll improve it a lot yet, keep coming and you’ll see :)

      []‘s

Trackbacks for this post

  1. Creative Christmas Gift For Geek Lovers - Web & Mobile App
  2. Creative Christmas Gift For Geek Lovers Web & Mobile App | HowDoDesign

Leave a Comment