Albert Bruno Photography - Web Design

This was a fun project of mine. I worked with a friend of mine to create his photography website. The most exciting thing that I got to do in this project was write an entire jQuery plugin from scratch, which I'm always interested in doing. My original plan for the site looked a bit different, but that's how you work with clients, amirite? I was pretty excited to do this site because I know Albert personally, and I'm familiar with his work, so when I got the opportunity to do his site, I jumped right on it, and he seems pretty amazed.

How It Started: Albert called me over to his home in Piermont, New York, and said that he needed a website to show potential clients his portfolio. He said that this site was intended to be a showcase, and not something that you could just stumble upon in google and check out. Of course, you could do that, in which case you may be a little confused at the homepage there. After we discussed the site a bit, I drew up a quick sketch of the big plans I had for this project. 4 categories displayed in a jQuery UI, a navigation at the top, a new logo design, and two paragraphs under the plugin. So I went home, worked on it a bit. After that night I had a pretty good example of the final site, and he liked it. His one issue really was the 'double paragraph' thing I had going on under the plugin, so I took them out. Afterwards, I added the gallery, and then the image pages. Finally, we got a server set up, a domain name, and now the site works! So, before I conclude this project, I will show you how I designed that jQuery plugin that you can find at Albert Bruno Photography

So I started on this jQuery Plugin. The idea was to make an image in black and white slowly fade to full color on mouseover. So, to start off, I set up a basic jQuery hover script to set the 'span' tag to have the same background image as the image itself, and then fade on mouseover:

var thumbOver = $(this).find("img").attr("src");
	$(this).find("a.thumb").css({'background' : 'url(' + thumbOver + ') no-repeat center bottom'});
	$(this).find("span").stop().fadeTo('normal', 0 , function() { $(this).hide() }); 
	}, 
	function() { 
	$(this).find("span").stop().fadeTo('normal', 1).show();
	});
});

Then, I went on to crop out some images. Each image had to be exactly twice as high as its original, so that I could duplicate them and make the tops of them black and white. This way, the 'span' tag we're accessing will only show the black and white version, and then fade to the full color version, and then hide itself, until the mouse leaves its region. The end images look somewhat like this:

Then, I had to add the header-bar object that floats over the images. It only fades in when you put your mouse over the images, and then it just stays there. All I had to add was an 'h2' element and some jQuery, just a simple hover-fade technique. Then, I had to make it transparent in jQuery, to keep the site CSS verified. (Not that it really matters in this day and age.) Then I had to add the CSS for the whole thing. The CSS itself required the span and the image to both be the same size, so that we wouldn't just see a random double-image effect. The span was basically used to "crop" the images out, and give it that clean look. The 'h2' tag, however, needed to be positioned at "absolute" so that it could float approxamately 100 pixels from the bottom of the image. The end CSS looked like this:

h2 a.caption {
z-index:600; 
background-color:#000; 
color:#fff; 
font-size:45px;
height:50px; 
width:340px; 
position:absolute;
bottom:100px;
}
#content {
width: 1020px;
background-color: #fff;
margin:auto;
}
ul.gallery {
width: 1020px;
list-style: none;
margin: 0 auto; padding: 0;
}
ul.gallery li {
float: left;
margin: 0px; padding: 0;
text-align: center;
display: inline;
margin:0px;
float:left;
}
ul.gallery li a.thumb {
width: 340px;
height: 520px;
cursor: pointer;
}
ul.gallery li span {
width: 340px;
height: 520px;
overflow: hidden;
display: block;
}

Next, I needed to call all the functions into the HTML. This proved to be more difficult then you'd think. As you could probably tell from the CSS, I decided to go with a light-weight unordered list format. This can prove useful, especially if you remove the list styles and the spacing. I use 'ul' tags for navigation menus, plugins like this, and for wide displays, so I know that using one here can be useful. Plus, there isn't a single browser that I know of that can't handle an unordered list, so I used their versatility to the fullest. I put all of the 'h2' tags and the images into the same 'li' tag, and just gave them different classes. The black and white image, or the 'span' tag was given the class "thumb," for thumbnail, and the image itself was given the class "caption," because in the end it did have to be the base for the header. I then wrapped the "gallery" div within the "selector" div to withhold the constraits, and then I was ready to go! I just plugged in the HTML, made up a quick stylesheet, and threw in the jQuery, and it all fit together pretty well! Here's the final HTML and jQuery:

<div id="selector">
	<ul class="gallery"> 
		<li> 
			<a href="gallery1.html" class="thumb"><span><img src="select_6.png" alt="" /></span></a> 
			<h2><a href="gallery1.html" class="caption">People</a></h2> 
		</li>
		<li> 
			<a href="#" class="thumb"><span><img src="select_8.png" alt="" /></span></a> 
			<h2><a href="#" class="caption">Stills</a></h2> 
		</li>
		<li> 
			<a href="#" class="thumb"><span><img src="select_7.png" alt="" /></span></a> 
			<h2><a href="#" class="caption">Events</a></h2>
		</li>
	</ul>
</div>
</div>

---

The jQuery:

$(document).ready(function() {
$('h2 a.caption').css({opacity: 0.0});
$("ul.gallery li").hover(function() {
$('h2 a.caption').animate({opacity: 0.7, height:50},800);	
var thumbOver = $(this).find("img").attr("src");
$(this).find("a.thumb").css({'background' : 'url(' + thumbOver + ') no-repeat center bottom'});
$(this).find("span").stop().fadeTo('normal', 0 , function() {$(this).hide()}); 
} , function() { $(this).find("span").stop().fadeTo('normal', 1).show();});});
 

---

And that's it! Hope you enjoyed this tutorial! Feel free to use any of the scripts or what-not as much as you want, wherever you want. It's pretty simple, anyways. If you could understand what I was saying, you could've probably written this yourself. Enjoy!

---