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.
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.
The Lightbox Effect without Lightbox
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.
Lightbox Gone Wild!
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.
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
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.
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.
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).
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.
Script that load a div from another page into a div on this page.
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
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.
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.
GreyBox 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.
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.
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.
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.
- Web Applications
- Virtual Desktops
- Web Sites
- Standalone Dialog Windows, Modals, and Wizards