Examples

As you probably already read, TopUp is meant to be implemented with great ease. The following examples demonstrate how to use the Javascript library for several purposes. Please take notice that every purpose can be implemented using several methods. Every method is provided with a demo and code for the entire HTML page.

Please note that following examples are implemented with the easiest setup: including from http://gettopup.com that is. For examples for hosting TopUp yourself, please download TopUp.

This is the simplest type of all TopUp implementations. A single HTML element (in most cases a link) refers to a certain location which will be presented by the TopUp module when clicked on that element.

 
  • TopUp classes

    You can implement TopUp just by adding a TopUp class to a HTML element. There are multiple TopUp classes of which you can choose from.

    For TopUp with default settings, just use 'top_up'. You can also compose the TopUp class which specifies certain TopUp settings.

    When composing you can specify:

    1. the layout ('db' for dashboard, 'ql' for quicklook, 'fl' for flatlook)
    2. the type (see documentation)
    3. the dimensions (width'x'height)

    The composed TopUp class (so called 'coptions') has to begin with 'tu_' followed by the settings joined with underscores.

    As an example, use 'tu_ql_iframe' for a TopUp with the 'quicklook' layout and the 'iframe' type.

    Please note that the usage of coptions influences the browser performance negatively in IE6 and IE7, so it is recommended to enable fast mode. Enabling fast mode without(!) typing any Javascript code is documented here.

    Demo

    Complete code

    <html>
      <head>
        
        
        <script type="text/javascript" src="http://gettopup.com/releases/latest/top_up-min.js"></script>
      </head>
      <body>
        <a href="photos/1.jpg" class="top_up"><img src="thumbnails/1.jpg"/></a>
        <a href="photos/2.jpg" class="tu_ql"><img src="thumbnails/2.jpg"/></a>
        <a href="http://www.google.nl" class="tu_iframe_800x600">Open Google</a>
      </body>
    </html>
  • TopUp preset

    Specifying a TopUp preset is just like specifying style attributes to a CSS selector in your stylesheet. The great advantage of using presets is that it provides you to keep your HTML entirely(!) clean.

    Just call TopUp.addPresets() with a hash as parameter.
    The key of each entry has to be a CSS selector and the value has to be a hash of toptions.

    Demo

    Complete code

    <html>
      <head>
        
        
        <script type="text/javascript" src="http://gettopup.com/releases/latest/top_up-min.js"></script>
      </head>
      <body>
        <div id="examples">
          <a href="photos/1.jpg"><img src="thumbnails/1.jpg"/></a>
          <a href="photos/2.jpg"><img src="thumbnails/2.jpg"/></a>
          <input type="button" value="Open Google" href="http://www.google.nl" class="tu_iframe_800x600"/>
        </div>
        <script type="text/javascript">
          TopUp.addPresets({
            "#examples a": {
              effect: "clip"
            },
            "#examples input": {
              shaded: 1, effect: "fade", overlayClose: 1
            }
          });
        </script>
      </body>
    </html>
  • Toptions

    Other than TopUp classes or presets, you can also use plain old options to customize your TopUp element (so called toptions).

    Just add the toptions attribute to your TopUp element.
    A toption is specified as "[name] = [value]", use the comma (",") as a seperator between toptions.

    Demo

    Complete code

    <html>
      <head>
        
        
        <script type="text/javascript" src="http://gettopup.com/releases/latest/top_up-min.js"></script>
      </head>
      <body>
        <a href="photos/1.jpg" toptions="effect = clip"><img src="thumbnails/1.jpg"/></a>
        <a href="photos/2.jpg" toptions="shaded = 1"><img src="thumbnails/2.jpg"/></a>
        <input type="button" value="Open Google" href="http://www.google.nl" toptions="type = iframe, effect = fade, width = 800, height = 600, overlayClose = 1"/>
      </body>
    </html>
 

TopUp offers you to group links together so you can navigate between them in the TopUp. In most cases the group feature is used for image galleries, but TopUp provides you the ability to group ANY type of links together.

 
  • TopUp preset

    Specifying a TopUp preset is just like specifying style attributes to a CSS selector in your stylesheet. The great advantage of using presets is that it provides you to keep your HTML entirely(!) clean.

    Just call TopUp.addPresets() with a hash as parameter.
    The key of each entry has to be a CSS selector and the value has to be a hash of toptions.

    So for grouping links, just specify group: [name] in the preset.

    Demo

    Complete code

    <html>
      <head>
        
        
        <script type="text/javascript" src="http://gettopup.com/releases/latest/top_up-min.js"></script>
      </head>
      <body>
        <div id="examples">
          <a href="photos/by-ben-adamson.jpg"><img src="thumbnails/by-ben-adamson.jpg"/></a>
          <a href="photos/2.jpg"><img src="thumbnails/2.jpg"/></a>
          <a href="photos/3.jpg"><img alt="At Sunset" src="thumbnails/3.jpg"/></a>
        </div>
        <script type="text/javascript">
          TopUp.addPresets({
            "#examples a": {
              title: "Gallery {alt} ({current} of {total})",
              group: "examples",
              readAltText: 1,
              shaded: 1
            }
          });
        </script>
          </body>
    </html>
  • Toptions

    Just add a toptions attribute with "group = [name]" to your TopUp elements.

    Demo

    Complete code

    <html>
      <head>
        
        
        <script type="text/javascript" src="http://gettopup.com/releases/latest/top_up-min.js"></script>
      </head>
      <body>
        <a href="photos/by-ben-adamson.jpg" toptions="group = links, effect = clip"><img src="thumbnails/by-ben-adamson.jpg"/></a>
        <a href="http://smashingmagazine.com" toptions="group = links, shaded = 1, type = iframe, effect = fade, width = 1010, height = 600, layout = quicklook">Smashing Magazine</a>
        <input type="button" value="Open Google" href="http://www.google.nl" toptions="group = links, type = iframe, effect = fade, width = 900, height = 475, overlayClose = 1, layout = quicklook"/>
      </body>
    </html>
 

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.

License

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 ;)