MooTools, mediaboxAdvanced, and Mexico

The lightbox is probably one of my favorite parts of the Web 2.0 revolution. No more having to open new windows (which can bog down your computer quite a bit) to see a larger image, video, etc. Instead, the item loads right into the page quickly. During my recent trip to Mexico, I made sure to take a bunch of pictures and videos so I could highlight my favorite MooTools lightbox: mediaboxAdvanced.

Media box is an all-encompassing lightbox that allows you to open images, videos, static content, etc. while being highly customizable. I've taken advantage of mediaboxAdvanced to show you pictures and videos from Monterrey, Mexico.

The PHP --> XHTML

/* settings */ 
$dir = 'my/dir/path';
$ignore_files = array('.','..');
$thumb_dir = 'small/';
$large_dir = 'large/';
$photos_per_row = 4;
$count = 0;

/* read in directory */
$handle = opendir($dir.$thumb_dir);
while (false !== ($file = readdir($handle)))
{
	if(!in_array($file,$ignore_files))
	{
		//video or image?
		if(strstr($file,'.flv'))
		{
			if(strstr($file,'.jpg'))
			{
				echo '<a href="'.str_replace('.jpg','',$dir.$thumb_dir.$file).'" rel="lightbox[flash 640 480]" class="image flv"><img src="'.$dir.$thumb_dir.$file.'" /><br /></a>'."\n";
				$count++;
			}
		}
		else
		{
			echo '<a href="'.$dir.$large_dir.$file.'" rel="lightbox[800 608]" class="image"><img src="'.$dir.$thumb_dir.$file.'" /><br /></a>'."\n";
			$count++;
		}
		if($count % $photos_per_row == 0) { echo '<div class="clear"></div>'; }
	}
}

We read in the thumbnails directory and output its contents. I've placed the settings on top so you can customize this any way you'd like.

The CSS

a.image	{ width:250px; height:190px; display:block; float:left; margin:0 0 20px 20px; border:1px solid #ccc; background:#eee; padding:5px; }
a.flv		{ border-color:#6d84b4; background:#eceff5; }
.clear	{ clear:both; }

Simple CSS to set the size of thumbnail anchors. Set these properties however you'd like. Also note that we must included mediaboxAdvanced's stylesheet.

The MooTools JavaScript

None. None? Yes, none. mediaboxAdvanced takes care of this for us. You can, however, place your own directives in the page without problems using mediaboxAdvanced's API.

A good lightbox takes care of all circumstances and requires minimum user knowledge (in my opinion). mediaboxAdvanced can only be described as awesome.

For Those Who Care...

A few notes from my trip:

• The food was outstanding. I feel like I gained 200 lbs while I was there.
• The driving in Mexico was absolutely insane. I was praying every time I got into the vehicle. Cars come out of nowhere and you hear more honking in one trip than you have ever in your life. A normal drive in Mexico would get you pulled over 5 times in the US.
• In Mexico, you park wherever and however you want. Park in the street? Sure. Park right on someone's bumper? Why not? Block traffic? Claro que si.
• The mountains are beautiful...when you can see them. The weather sucked every day except the morning we left. Very foggy and rainy.
• I got called "Kid Rock" and "Kurt Cobain" multiple times. I always get offended when I hear that but...I guess if I'm getting called that in another country, it's confirmed. Damnit!
• I never felt in danger by any person on the street but my girlfriend's relatives and family friends all told me (because I'm whiter than Powder) to "behave to avoid being kidnapped." I felt like a moving target everywhere I went.
• I'm not a "wedding dancer" but everyone there told me I needed to dance at a Mexican wedding. So I did. Liquid courage is underrated.
• I got to take a shot of tequila in Mexico with friends so that goal was accomplished.
• I got to play a soccer game in Mexico so that goal was also accomplished.
• The Apple store in Monterrey isn't as nice as it is here, obviously. I thought you'd all enjoy the picture though.
• There's no such thing as "on time" in Mexico. You set an hour and then show up anywhere within 2 hours of that time.
• I made sure to rep Moo while I was down there, which you'll see in the photos.
• I couldn't buy one thing for myself in Mexico. My girlfriend's family's was too generous!
• The importance of family was very apparent. Kisses on the cheeks of women and handshakes to the men every time we saw them. Makes me feel bad for the way I interact here.
• Although the women in Monterry were beautiful, my girl was still the most beautiful.
• My girlfriend's family was very patient with my Spanish which I appreciated. I did pretty well with what I remembered but I need to study up.
• I heard more American music in Mexico than Mexican music. We went to a place called Woodstock and all they sang was American music songs. All the stores at the mall played American music.
• This young couple (like 16 years old) was making out at the street corner for like 5 minutes while we were at a red light. I yelled "get a room!" at them in Spanish right as we drove off. Hilarious.

I had a blast and look forward to returning soon!