Css Globe

Although the title of the article is long this process is very simple. This article will demonstrate how simple it is to use interactive functions built into Easy front-end framework.

If you are building a site based on Easy then you should already have the JavaScript files linked to your HTML documents. But you can use these functions on your existing sites by adding necessary files.

Note: Please read the license before you use the Easy or some if it's files. It is free to use but you are required to respect the copyright info and put a footer backlink.

View all Easy front-end framework modal window demos

Step 1

Download Easy package. If you are using this on existing you can only use the files found in folder called js. The files are: jquery.js, easy.js and main.js. Put this code inside the head tag of your document.

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/easy.js"></script>         
<script type="text/javascript" src="js/main.js"></script>

By doing this you will not only be able to perform the task explained in this article, you will also gain access to all other Easy interactive functions.

Step 2

Go and fetch the URL of the flash video you want to display. Go to Youtube video page where you will find the embed code (shown in the image below).

From that code you will extract only the URL of the video itself. We don't need the entire object tag code but you need to remember the video size (width and height) for best preformance.

So from this code:

<object width="560" height="340">
<param name="movie" value="http://www.youtube.com/v/cnvkeJds7zc&hl=en_US&fs=1&"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<embed src="http://www.youtube.com/v/cnvkeJds7zc&hl=en_US&fs=1&" 
type="application/x-shockwave-flash" allowscriptaccess="always" 
allowfullscreen="true" width="560" height="340"></embed></object>

we're extracting this:

http://www.youtube.com/v/cnvkeJds7zc&hl=en_US&fs=1

The same thing can be done with any other video service that offer video sharing. All you need to do is grab the direct URL of the flash movie.

Step 3

Now we go to our document. Create a link, text or image and add the video URL to it:

<a href="http://www.youtube.com/v/cnvkeJds7zc&hl=en_US&fs=1"></a>

To activate the modal window feature in Easy all we need to add a class name called "popup" and to make sure that the object tag is generated we're adding another class name called "flash". Now the code looks like this:

<a href="http://www.youtube.com/v/cnvkeJds7zc&hl=en_US&fs=1" class="popup flash"></a>

To make sure that the video is displayed in correct size we need to add width and height value in the rel attribute:

<a href="http://www.youtube.com/v/cnvkeJds7zc&hl=en_US&fs=1" class="popup flash" rel="width:560;height:340"></a>

If you forget this step the script will give default width and height values.

That is all! You can see this in action on the Easy front-end framework demo page.

I also invite you to check out other Easy features. Have fun and send your feedback!