Today I’m going to bring you through another simple example of JQuery. Getting the basics of JQuery is really simple and can enhance your projects quickly.

Challenge
I want to put an image on a page and when you click that image, display an overlay with a flash game (could also be videos, an image, or even an external site) inside a modal box.

How to Implement
To solve this problem you could re-invent the wheel or use a very simple jQuery library from a website called no margin for errors. They have created a simple jQuery library which makes this overlay problem a simple fix. Click here to download their sample code.

At the top of the page you need to include the jQuery library from google and also the pretty photo library along with the style sheet.

<script src="http://www.google.com/jsapi" type="text/javascript"></script><br /> <script type="text/javascript" charset="utf-8"> google.load("jquery", "1.3"); </script></p> <link rel="stylesheet" href="css/prettyPhoto.css" mce_href="css/prettyPhoto.css" type="text/css" media="screen" title="prettyPhoto main stylesheet" charset="utf-8" /> <script src="js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>

Before the closing HTML tag you need to add this code

<script type="text/javascript" charset="utf-8"> $(document).ready(function(){ $(".gallery a[rel^='prettyPhoto']").prettyPhoto({theme:’facebook’}); }); </script>

What this code does is set up all links on the page with the tag REL set to prettyPhoto to preform the pretty photo overlay.

Here is how you set up the links

<a href="http://www.youtube.com/watch?v=-_7mlN_MQ1c" mce_href="http://www.youtube.com/watch?v=-_7mlN_MQ1c"<br ></a> rel="prettyPhoto"<br /> title="Video showing the flyers captain Mike Richards short handed goal which tied game 5 of the Flyers - Habs series">LINK TEXT</a>

The title information will show up under the content of the overlay. If you use an image the image alt tag will be the title of the overlay box.

Samples

Image linking to a video

Real World Example – image linking to a flash game