What is TopUp?

TopUp is an easy to use Javascript library for unobtrusively displaying images and webpages in a Web 2.0 approach of popups. The library is jQuery and jQuery UI driven in order to maintain cross-browser compatibility and compactness. TopUp offers the following advantages:

  • TopUp is absolutely free, also for commercial use (view the license)
  • A very easy setup process: only one(!) include and nothing more
  • Using TopUp presets keeps your HTML code 100% clean, no extra code needed whatsoever
  • The ability of displaying images, flash (from sites like Youtube, SWF and FLV files), movies (QuickTime, Windows Media and Realplayer), iframes, DOM elements and raw HTML
  • TopUp can be used along with Prototype (just include TopUp before Prototype)
  • TopUp is compressed with Yahoo! YUI Compressor to 47.6 KB (includes JS, HTML and CSS)
  • Usage of CSS sprites to reduce the amount of image requests to two per layout for faster loading
  • Cross-browser compatibility
  • Fancy layouts, animations and transitions
  • Auto-correction of size and position when required
  • The possibility to create groups
  • Support for AJAX requests
  • It's open source: check out http://github.com/archan937/topup and enhance TopUp yourself!
  • And many more...

Why another Lightbox-like Javascript library?

Just like many among us, I had the need for a lightbox-like library to use for a website I was working on. After examining libraries such as Lightbox, Lightbox2, LightWindow, Highslide, Thickbox, ModalBox and many more, I haven't found one that really suited my needs. Either the installation was to complicated, they aren't unobtrusive because you have to mess with the HTML code, the appearance isn't that slick, the transitions were glitchy, conflicts with other libraries occured or the possibilities were lacking.

Enter TopUp! The installation of TopUp consists of including only one file (no images or stylesheets!), the look-and-feel is Apple-like, the animations and transitions look fancy, you can still use Prototype, it is so easy to specify options and last but not least: you can stay updated with the latest version without changing any code. Great for expansions and bugfixes!

Some examples

  • 1 group: images, layout: quicklook
  • 2 group: images, overlayClose: 1, layout: quicklook
  • 3 group: images, overlayClose: 1, layout: dashboard
  • 4 noGroup: 1, title: '', layout: dashboard
  • 5 shaded: 1, effect: clip, layout: quicklook
  • Google width: 1000, height: 500, type: iframe, title: Google search, layout: quicklook
  • Swf width: 550, height: 400, title: How Mr. T killed Tupac, effect: switch
  • Flv width: 425, height: 344, title: Bruce Lee - Like Water
  • Dom width: 400, type: dom, title: Hidden element #1, layout: flatlook, resizable: 0
  • Youtube width: 853, height: 505, type: flash, title: Beastie Boys - Sabotage
  • Quicktime width: 600, height: 272, title: The Dark Knight, layout: quicklook
  • Windowsmedia width: 767, height: 591, title: Windows Media Player 12, layout: quicklook

How to use

When including from gettopup.com (the easiest setup)

  1. Put the following in the head element:
    <script type="text/javascript" src="http://gettopup.com/releases/latest/top_up-min.js"></script>
    Note: You can configure TopUp (libs, fast mode, paths) in the querystring of the URL (read documentation)
    ( you can also include a specific release by replacing latest with the version e.g. 1.3.2 )
  2. Add either the class top_up, the attribute toptions to your links or TopUp preset(s)
  3. Enjoy!

When hosting the javascript and images yourself

  1. Download and unpack the latest TopUp version
  2. Put the following in the head element:
    <script type="text/javascript" src="path/to/your/top_up-min.js"></script>
    Note: You can configure TopUp (libs, fast mode, paths) in the querystring of the URL (read documentation)
  3. Add either the class top_up, the attribute toptions to your links or TopUp preset(s)
  4. Enjoy!

For further documentation go to the documentation page.

Support or feedback

Do you have questions or suggestions concerning TopUp? Please e-mail me or post a comment and I will answer you as soon as possible.

Get the latest version

Current Release: 1.7.2 Download TopUp Want to keep track of new releases? Click here.

About me

My name is Paul Engel, I'm Dutch and I work at Internetbureau Holder B.V. since February 2004. I develop websites in Ruby on Rails using a Mac.

Post a comment

Do you have ideas, questions, requests or remarks about TopUp? Please post them. Any comment will be greatly appreciated!

Source at GitHub

You can clone the Rails code of TopUp from GitHub using Git.


Except otherwise noted, TopUp is licensed under http://creativecommons.org/licenses/by-sa/3.0  NL

Make a donation

If you like using TopUp, please feel free to make a donation as a small gesture of appreciation so I can buy some coffee ;)