MooTools, mediaboxAdvanced, and Mexico

By  on  
MooTools in 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!

Recent Features

  • By
    Welcome to My New Office

    My first professional web development was at a small print shop where I sat in a windowless cubical all day. I suffered that boxed in environment for almost five years before I was able to find a remote job where I worked from home. The first...

  • By
    CSS Gradients

    With CSS border-radius, I showed you how CSS can bridge the gap between design and development by adding rounded corners to elements.  CSS gradients are another step in that direction.  Now that CSS gradients are supported in Internet Explorer 8+, Firefox, Safari, and Chrome...

Incredible Demos

  • By
    CSS Filters

    CSS filter support recently landed within WebKit nightlies. CSS filters provide a method for modifying the rendering of a basic DOM element, image, or video. CSS filters allow for blurring, warping, and modifying the color intensity of elements. Let's have...

  • By
    MooTools 1.2 Image Protector: dwProtector

    Image protection is a hot topic on the net these days, and why shouldn't it be? If you spent two hours designing an awesome graphic, would you want it ripped of in matter of seconds? Hell no! That's why I've created an image...

Discussion

  1. Looks like a great trip.
    I love mediabox and have used it several times.
    And funnily enough, for a while now I have been hoping you would do that trick of yours where you do two versions of the same plugin and build a jquery version of mediabox. You know just for fun!

  2. jem

    You’re going to have to share where you got that sweet mootools shirt from!!!

  3. Yea, lightboxes are a great trend. They really make sites slick. Finally developers are getting away from annoying bult-in popups, alerts and confirms.

    And nice pictures! I’m jealous

  4. Butch Page

    Wow you really do look like Kid Rock in that picture.

    Thanks for this article, I always check out your demo’s of how to use something in Mootools instead of jQuery.

  5. And did they take you to “El Rey del Cabrito” in downtown Monterrey? I’m almost certain they did, but just to be sure.

  6. David and All, I’d highly recommend you check out Shadowbox. It’s based off Kevin Miller’s implementation, LightWindow. It’s highly customizable, it takes multiple formats, it’s skinnable, language files are used to pull in preconfigured text, and best of all it’s made to run on MooTools, Prototype, JQuery, Dojo, Ext, YUI, and even plain old JavaScript.

    And the code is commented extremely well.

  7. Facundo

    You really look like Kid Rock on that picture. But picture #30…. dude, looks like a lady!!!!! lol

  8. Rene Monroy

    Dude if you really liked Monterrey, you should visit Guadalajara, known as the most beautiful city in Mexico. Nice photos btw, regards

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!