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
-
group: images, layout: quicklook
-
group: images, overlayClose: 1, layout: quicklook
-
group: images, overlayClose: 1, layout: dashboard
-
noGroup: 1, title: '', layout: dashboard
-
shaded: 1, effect: clip, layout: quicklook
-
width: 1000, height: 500, type: iframe, title: Google search, layout: quicklook
-
width: 550, height: 400, title: How Mr. T killed Tupac, effect: switch
-
width: 425, height: 344, title: Bruce Lee - Like Water
-
width: 400, type: dom, title: Hidden element #1, layout: flatlook, resizable: 0
-
width: 853, height: 505, type: flash, title: Beastie Boys - Sabotage
-
width: 600, height: 272, title: The Dark Knight, layout: quicklook
-
width: 767, height: 591, title: Windows Media Player 12, layout: quicklook
How to use
When including from gettopup.com (the easiest setup)
-
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 )
- Add either the class top_up, the attribute toptions to your links or TopUp preset(s)
- Enjoy!
When hosting the javascript and images yourself
- Download and unpack the latest TopUp version
-
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)
- Add either the class top_up, the attribute toptions to your links or TopUp preset(s)
- 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.