Fancy, Sleek and Stylish JQuery Popup With ColorBox

03Aug11

First of all you must be a little familiar with jQuery. But you are not expected to be a jQuery expert. Secondly, you must also be familiar with javascript and CSS and thirdly, you must be eager to learn :).

For quite a few days I was searching for something that gives me the ability to

  1. open a link (outside webpage) in a popup window
  2. Open HTML controls in popup
  3. Can show images in the popup
  4. Can show images as a slideshow in a popup
  5. Can show inline HTML in a popup
  6. Should be sexy, not like the old school HTML popup window

After quite a lot of research and comparisons, I came across ColorBox. It perfectly suits my requirements. Okay lets stop talking and start coding 🙂

You can download the project source code from here but read the following steps for making yourself familiar with the code.

  1. Go to colorbox webiste http://colorpowered.com/colorbox/
  2. Get yourself a little familiar with this beauty by trying a few examples over here
  3. The example code contains an HTML file with a single link (<a> tag) in it. When that link is clicked,  www.google.com  opens in the popup window.
  4. Other files that the package contains are the css file “colorbox.css” , javascript file “jquery.colorbox.js” and the images folder in the same folder as of the html file.
  5. That’s it. Open the html file in a browser and click on the link “Outside Webpage (Iframe)” and a popup appears similar to the following image

    image

Advertisements


One Response to “Fancy, Sleek and Stylish JQuery Popup With ColorBox”

  1. Awesome popup…Thankyou so much for sharing..


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s


%d bloggers like this: