TopUp

The #1 Javascript Pop Up / Lightbox

Introduction

TopUp (http://gettopup.com) 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 (http://jquery.com) and jQuery UI (http://jqueryui.com) driven in order to maintain cross-browser compatibility and compactness. TopUp offers the following advantages:

• TopUp is absolutely free, also for commercial use (see also http://creativecommons.org/licenses/by-sa/3.0)
• A very easy setup process (only one include and nothing more, see http://gettopup.com#installation)
• Using TopUp presets (http://gettopup.com/examples#grouped_links) 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 (http://prototypejs.org) (just include TopUp before Prototype)
• TopUp is compressed with Yahoo! YUI Compressor (http://developer.yahoo.com/yui/compressor/)
• Usage of CSS sprites to reduce the amount of image requests to two per layout for faster loading (see also http://developer.yahoo.com/performance/rules.html)
• Fancy layouts, animations and transitions
• Auto-correction of size and position when required
• The possibility to create groups
• Support for AJAX requests

How to develop TopUp yourself

Any help concerning bugfixes and improvements for TopUp is appreciated. Setting the environment up consists of only following 5 easy steps described below. But before we go any furter, I think it’s better that I’ll explain one thing or two ;)

TopUp is developed in a Rails application. This gives us many advantages:

• We don’t have to mess with the HTML and CSS that TopUp injects into the webpage
  HTML: use the standard Rails view templates
  CSS: use the power of SASS (http://sass-lang.com) to generate clean, correct and compact CSS
  JS: use the power of Jzip (http://github.com/archan937/jzip) for merging the different combinations of the requirements to separate files
• Release and pack a new release easily with the use of rake tasks
• Test TopUp easily by adjusting and testing the homepage examples for instance

The locations of the TopUp resources are as follows:

• TopUp module
  • public/javascripts/development/top_up.js (for the jQuery version)
  • public/javascripts/development/top_up-pt.js (for the Prototype version: pre-alpha phase)
• JS (Jzip templates)
  • assets/jzip/jquery
• HTML (Rails view templates)
  • app/views/layouts/_top_up.html.erb
  • app/views/layouts/_tu_top_up.html.erb
• CSS (SASS templates)
  • assets/sass/public/top_up/*
• Images (sprites)
  • public/images/top_up/*
• Automated actions (rake tasks)
  • lib/tasks/top_up.rake

So to develop TopUp yourself, you will have to setup the development environment and run the Rails application. Doing this is a piece of cake, just follow these steps:

1. Get a clone of the TopUp repository and open that directory
   

   git clone git://github.com/archan937/topup.git && cd topup

2. Copy or rename config/environment.example.rb to config/environment.rb
   

   mv config/environment.example.rb config/environment.rb

3. Copy or rename config/database.example.yml to config/database.yml and correct the login settings
   

   mv config/database.example.yml config/database.yml

4. Create the database and run the migration task
   

   rake db:create && rake db:migrate

5. Run the Rails application
   

   ./script/server

6. Go do some cool scripting
   

   [ edit public/javascripts/development/top_up.js ]

7. Enjoy! :D

Documentation

Please visit http://gettopup.com/documentation.

Contact me

For support, remarks and requests please mail me at paul.engel@holder.nl.

License

Copyright © 2010 Paul Engel, released under the MIT license

http://holder.nl – http://gettopup.com – http://codehero.es – http://twitter.com/archan937 – paul.engel@holder.nl

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.