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.

1. Single links

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 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.
Demo

Open Google

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>

2. Grouped links

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

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

Smashing Magazine

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>

TopUp

The #1 Javascript Pop Up / Lightbox made by Paul Engel

Examples

1. Single links

TopUp classes

Demo

Complete code

TopUp preset

Demo

Complete code

Toptions

Demo

Complete code

2. Grouped links

TopUp preset

Demo

Complete code

Toptions

Demo

Complete code

Get the latest version

About me

Post a comment

Source at GitHub

License

Make a donation

Links