Thelifeofme » Jacob-Johnson.com

May 4, 2007

Jacob-Johnson.com

I’m really happy with how the code turned out in this one.

It’s a jquery-only portfolio site with auto-resizing popup images - imitating AJAX functionality without actually using it.

The right sidebar is a vertical Jquery Carousel, with a few harassments to make it connect to the display window div. It’s basically an ordered list with a few validation-breaking attributes for jquery to pass as background-images to the left-side window. This allowed me to safely use massive images in a fixed-size space, as making them background-images esentially forces a clipping mask around the image.

Ordered list structure

<LI
source="Carrackar.gif" ## full-size image
description="Digital - Painter" ## description 
style="background-image:url(portfolio/Carrackar.gif);"> ##the thumbnail image
<p>Carracker</p> ## title of the image
</LI>

Then I pass it to jquery with this snippet:

$("#thumb_column li").click(function() {
		 $("#displaybox").css({"background-image": 'url(portfolio/' + $(this).attr('source') + ')' });
		 $("#expand_button a").attr("link","portfolio/" + $(this).attr('source'));
		 $("#expand_button p").empty().append( $(this).attr('description'));
 		 $("#hidden").attr("src","portfolio/" + $(this).attr('source'));

		 });

Every time the user clicks on an image:
1) the ’source’ attribute is pasted into the display window as a background image,
2) the ‘description’ attribute is moved to the expand_button bar (the transparent grey bar),
3) a ‘link’ attribute is created on the expand_button itself, and
4) a ‘#hidden‘ image is also given a new ’src’ attribute.

But what’s that #hidden, you say? Why would you pass a link to something that’s not going to be seen? It’s because jQuery can use width() and height() on an img tag to get the image dimensions!

This is the cool part. When the user clicks the ‘view as full window button’, it calls this function:

$("#expand_button a").click(function() {
		 if ($(this).attr('link'))
		 {
		 var href = $(this).attr('link');
		 var description = $("#expand_button p").text();
		 var width = $("#hidden").width();
		 var height = $("#hidden").height();
		 new_window = window.open(href,'popup','width=' + width + ',height=' + height + 'toolbar=no,scrollbars=no,menubar=no');
		 new_window.document.write("<HTML><HEAD><TITLE>Jacob Johnson - Portfolio</TITLE>");
		 new_window.document.write("<script type=\"text/javascript\"> function resize(){ window.resizeTo(" + width + "," + height + "); }</script>");
		 new_window.document.write("<link href=\"popup.css\" rel=\"stylesheet\" type=\"text/css\"></HEAD><BODY onLoad=\"resize()\">");
		 new_window.document.write("<a href=\"javascript:window.close()\"><img src=\"" + href + "\" title=\"" + description +"\" id=\"popup_img\">");
		 new_window.document.write("</BODY></HTML>");
		 new_window.document.close();
		 }
});

As you see, it grabs the source attribute given to the button, and then gets dimensions from the #hidden image. It then creates a new popup window with those dimensions, and includes a supah-simple CSS file that removes the page margins.
Next, it includes a simple js function to resize the window onload to the dimensions of the current image. This makes sure that if the user clicks another full-size image, the popup window will always be the right size for it’s current image.
It also grabs the ‘description’ attribute and places it as a title for the popup image. And beholden! A very easy to write jQuery-only gallery system.

I hope this helps someone out there - I find jQuery to be a brilliant piece of code, and I’m really enjoying working with it.

Lastly, visit Jake’s site, and throw money at him!
Jacob Johnson.com

Filed under: sites, jquery — Andrew @ 3:39 am

4 Comments »

Here here!

money = good!

also, Mr.Andrew does some nice fast webservice, feel free to throw money at the both of us ;D

~Jacob.J
Comment by HUGE.Johnson — May 13, 2007 @ 12:21 am
Hello

Looks good! Very useful, good stuff. Good resources here. Thanks much!

G’night
Comment by rofovnifo — July 4, 2007 @ 6:26 pm
I found this site while searching for jCarousel usage with varied sized images. I have a vertical carousel as well, and the images have fixed width, flexible height. Which causes for some crazy spacing between them. Any thoughts on how to handle that?
Comment by ashok — December 8, 2007 @ 4:43 am
Hm, that’s a very good question - I think jCarousel only scrolls it’s little frame down by the amount set for the li in your CSS file - I don’t think it checks to see where the topleft pixel of the next image is. You might have to write something custom (frustrating as that can be) - and I don’t think jquery even HAS a handy ‘what is my top left corner’ function.

Maybe force each image to the same height with whitespace around it? Not the best solution, but one that might do in a pinch.
Comment by Andrew — December 9, 2007 @ 3:20 pm

RSS feed for comments on this post. TrackBack URI

May 4, 2007

Jacob-Johnson.com

4 Comments »

Leave a comment