Free Collection of Extensive List of Essential Pop-up Window enhancements

This article provides an extensive list Essential Pop-up Window enhancements that any web developer should be aware of. The article will mainly but not only focus on lightbox pop-up style solutions that have become incredibly popular.

Lightbox JS v2.0

Lightbox is a simple, unobtrusive script used to overlay images on the current page. It’s a snap to setup and works on all modern browsers. This is the latest version of Lokesh Dhakar initial Lightbox JS script.

lightwindow

Lightbox Plus

WordPress is so popular and its huge free community have put forward several plugins that provide Lightbox style functionality. Lightbox Plus is a plugin that implements Lightbox JS by Lokesh Dhakar (see above). Lightbox Plus is used to create overlay display images on the web-page and to automatically add the correct overlay links to images.

lightwindow

The Lightbox Effect without Lightbox

lightwindow

Lightwindow

LightWindow is similar to the other “lightbox style” scripts. It allows you to put more or less ANYTHING in the pop-up window. Quite powerful.

lightwindow

Lightbox Gone Wild!

In this tutorial, we’ll take a look at how to create a modal window using some nifty JavaScript and CSS.

lightwindow

Leightbox

I’ve changed ParticleTree’s lightbox functionality to allow the use of inline div’s instead of AJAX calls. Very often I find that I want the data in the lightbox to be indexable by search engines and visible to people with screenreaders etc. This adaptation makes that possible. Mind you, i’ve completely removed the AJAX calls.

lightwindow

GreyBox

GreyBox can be used to display websites, images and other content in a beautiful way.

  • It does not conflict with pop-up blockers
  • It’s only 22 KB!
  • It’s super easy to setup
  • It’s super easy to use
  • You can easily alter the style as it is controlled through CSS

GreyBox

Interstitial Content Box

An interstitial is a container that appears over an entire webpage intermittently to display content in an eye catching way. A common example is an interstitial ad, though advertising is certainly just one of many handy uses of an interstitial.

Interstitial Content Box

Building a Lightbox with jQuery

Rather than assume that you know what I mean by a lightbox, I’ll briefly explain it. The first experience I had with this UI pattern, and I believe the first real example of it, was by Lokesh Dhakar in 2005. Since then, this pattern of simple, unobtrusive script used to overlay images on the current page huddletogether.com is everywhere. It’s hard to find a modern site without some variant of the in-page popup element over a semi-transparent background. In fact, if you click any external link on my site, you will get that site loaded for you in an lightboxed iframe.

lightwindow

SmoothGallery

Using mootools v1.11, this javascript gallery and slideshow system allows you to have simple and smooth (cross-fading…) image galleries, slideshows, showcases and other cool stuff on your website

SmoothGallery

Booklaylet

This is a bookmarklet wrapper code to load any other page content inside the opened window, using an overlayed div and an iframe. This code works on Firefox 1.0-3.0, Safari 2.0-3.0 and Opera 9.0.
It doesn’t work on Internet Explorer 5.01-7.0 (IE6 has a limitation to 488/508 chars).

Booklaylet

Create site tours with Amberjack

Amberjack is a lightweight Open Source library, enabling webmasters to create cool site tours. By guiding your site visitors, Amberjack tours can greatly improve the usability of your website.

The Amberjack JavaScript library is lightweight (~4K), stable, LGPL licensed, browser compatible, set up in 2 minutes & super-easy to customize. Best of all, nothing must be installed or learned. Use the Tour Wizard to create great looking and helpful tours for your site or intranet application.

amberjack

Phatfusion Pageloader

Script that load a div from another page into a div on this page.

pageloader

Phatfusion multibox

Lightbox that supports images, flash, video, mp3s, html.

  • supports a range of multimedia formats
  • auto detects formats or you can specify the format, useful if your passing a querystring!
  • html descriptions

multibox

mooSlide

Based on ajax, this small widget allows to integrate many many bookmarks for every post on your blog, website etc.

By clicking the mooSocialize button, a window will appear, which lets you choose your favorite network. Having a thumbnail of each service beside the link, it’s easy to see and find the one of your liking.

But that’s not all – it doesn’t redirect you to that page, but opens up the page in a hovered layer. Convenient and easy. On top of the opened layer is a small “x”, which allows to close the window later on.

mooslide

GlassBox

GlassBox is a compact Javascript User Interface (UI) library, which use Prototype and Script.aculo.us for some effects. With GlassBox you can build transparent border, colorful layouts and “Flash-like” effects. Take a look at the site itself: you can use the keyboard navigation: Keys 1-8 (display page), arrows left/right (previous/next page) and arrows up/down (Scroll content).

glassbox

Shadowbox.js

Shadowbox is an online media viewer application that supports all of the web’s most popular media publishing formats. Shadowbox is written entirely in JavaScript and CSS and is highly customizable. Using Shadowbox, website authors can showcase a wide assortment of media in all major browsers without navigating users away from the linking page.

Shadowbox supports all of the web’s most popular media publishing formats including images, QuickTime, Windows Media Player, Flash, Flash video, HTML, and even external web pages. This makes it easy to display your content without converting it to some other format.

Shadowbox ships with support for many of the world’s most-spoken languages. That means that your users will probably be able to interact with the application in their native tongue.

shadowbox

GreyBox

graybox screenshotGreyBox allows you to launch other websites in a modal window (like a pop-up window, but it doesn’t open another browser). This is great for when you’re linking to multiple websites and don’t want the user to navigate away from your web page or to open another browser window that might be blocked by the user’s browser. Using GreyBox is easy and involves a 3-step process outlined in the web page.

Here’s some key pages regarding GreyBox: Download page, Documentation, Examples, Installation, and Advanced Usage (for the more experienced JavaScript’ers, check this page out for tips on how you can extend the library’s functionality).

GreyBox

Phatfusion lightbox

An inline image popup, overlays and fades out the current page. This is based on Slimbox by Christophe Beyls.

  • Lightbox has the following added features compared to Slimbox
  • Specify a containing div rather than just the body.
  • Place the next/previous buttons in the footer.
  • Add a description with html markup.

lightbox

Coda Popup Bubbles

Coda is one of the new web development tools for the Mac – and it’s popular amongst designers and developers I know. Panic (the developers of Coda) are also known for their sharp design. In particular, Jorge Mesa writes to ask how to re-create their ‘puff’ popup bubble shown when you mouse over the download image.

coda

Hover Sub Tags

Using jQuery to reduce the size of the tag cloud that you have on your sites, for example if you have Ajax as a tag, you can have jquery, mootools, etc… as sub-tags. A Sub Tag Cloud will appear when hovering over the main Tag links.

tagcloud

Mocha UI

Mocha is a web applications user interface library built on the Mootools javascript framework. The Mocha GUI components are made with <canvas> tag graphics.

Uses

  • Web Applications
  • Virtual Desktops
  • Web Sites
  • Widgets
  • Standalone Dialog Windows, Modals, and Wizards

mochaui

Leave a Comment.