TopUp

What is TopUp?

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

  • A very easy setup process
  • The ability of displaying images, iframes, webpages and pure HTML
  • TopUp can be used along with Prototype (just include TopUp before Prototype)
  • TopUp is compressed with Yahoo! YUI Compressor to 26.2 KB (includes JS, HTML and CSS)
  • 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
  • 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, the
look-and-feel wasn’t pretty, 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



  • group: images, layout: quicklook


  • group: images, overlayClose: 1, layout: quicklook


  • group: images, overlayClose: 1, layout: dashboard


  • noGroup: 1, layout: dashboard


  • layout: quicklook, shaded: 1, effect: clip


  • layout: dashboard, shaded: 1


  • width: 800, height: 400, type: iframe, modal: 0, layout: quicklook, title: Google search

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>

    ( 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>
  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 and I will answer you as soon as possible.