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
    Vibration API

    Many of the new APIs provided to us by browser vendors are more targeted toward the mobile user than the desktop user.  One of those simple APIs the Vibration API.  The Vibration API allows developers to direct the device, using JavaScript, to vibrate in...

  • By
    5 Ways that CSS and JavaScript Interact That You May Not Know About

    CSS and JavaScript:  the lines seemingly get blurred by each browser release.  They have always done a very different job but in the end they are both front-end technologies so they need do need to work closely.  We have our .js files and our .css, but...

Incredible Demos

  • By
    The Simple Intro to SVG Animation

    This article serves as a first step toward mastering SVG element animation. Included within are links to key resources for diving deeper, so bookmark this page and refer back to it throughout your journey toward SVG mastery. An SVG element is a special type of DOM element...

  • By
    :valid, :invalid, and :required CSS Pseudo Classes

    Let's be honest, form validation with JavaScript can be a real bitch.  On a real basic level, however, it's not that bad.  HTML5 has jumped in to some extent, providing a few attributes to allow us to mark fields as required or only valid if matching...

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!