142 lines
7.6 KiB
HTML
142 lines
7.6 KiB
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
|
|
<html>
|
|
<head>
|
|
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
|
|
<title>The #1 Javascript Pop Up - Get TopUp! - Examples</title>
|
|
<link rel="shortcut icon" href="favicon.ico"/>
|
|
<link rel="stylesheet" type="text/css" href="stylesheets/style.css"/>
|
|
<script type="text/javascript" src="javascripts/top_up-min.js"></script>
|
|
<script type="text/javascript">
|
|
TopUp.addPresets({
|
|
"#images a": {
|
|
fixed: 0,
|
|
group: "images",
|
|
modal: 0,
|
|
title: "Example"
|
|
},
|
|
"#movies": {
|
|
resizable: 0
|
|
}
|
|
});
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<div id="page_background"></div>
|
|
<div id="page_wrapper">
|
|
<div id="page_header" onclick="document.location.href = 'http://gettopup.com'">
|
|
<h2>TopUp</h2>
|
|
<h1>The #1 Javascript Pop Up made by Paul Engel</h1>
|
|
</div>
|
|
<div id="page_content">
|
|
<h1 class="thanks_for_download_top_up">Thanks for downloading TopUp!</h1>
|
|
<p>
|
|
You must be thinking: "Great, I've downloaded TopUp! But now what?". No need to worry, this download is provided with examples and instructions regarding the usage of the library.
|
|
</p>
|
|
<h1 class="some_examples">Some examples</h1>
|
|
<div id="examples">
|
|
<span id="images">
|
|
<a href="images/photos/1.jpg" toptions="overlayClose = 1">
|
|
<img src="images/thumbnails/1.jpg"/>
|
|
</a>
|
|
<a href="images/photos/2.jpg" toptions="noGroup = 1, layout = dashboard">
|
|
<img src="images/thumbnails/2.jpg"/>
|
|
</a>
|
|
<a href="images/photos/3.jpg" toptions="effect = appear, layout = quicklook">
|
|
<img src="images/thumbnails/3.jpg"/>
|
|
</a>
|
|
<a href="images/photos/by-ben-adamson.jpg" toptions="effect = clip, layout = quicklook">
|
|
<img src="images/thumbnails/by-ben-adamson.jpg"/>
|
|
</a>
|
|
</span>
|
|
<span>
|
|
<a href="http://www.youtube.com/v/pv8j1-IcnUE&hl=nl&fs=1&rel=0&hd=1&autoplay=1" toptions="width = 853, height = 505, type = flash, title = Beastie Boys - Sabotage">
|
|
<img src="images/thumbnails/youtube.jpg"/>
|
|
</a>
|
|
<a href="http://uploads.ungrounded.net/0/31_tupac.swf" toptions="width = 550, height = 400, title = How Mr. T killed Tupac, effect = clip">
|
|
<img src="images/thumbnails/swf.jpg"/>
|
|
</a>
|
|
<a href="http://gettopup.com/media/brucelee.flv" toptions="width = 425, height = 344, title = Bruce Lee - Like Water">
|
|
<img src="images/thumbnails/flv.jpg"/>
|
|
</a>
|
|
<a href="http://movies.apple.com/movies/wb/the_dark_knight/the_dark_knight-tlr2-h.ref.mov" toptions="width = 480, height = 220, title = The Dark Knight, layout = quicklook, shaded = 1">
|
|
<img src="images/thumbnails/quicktime.jpg"/>
|
|
</a>
|
|
</span>
|
|
</div>
|
|
<br>
|
|
<h3>When including from gettopup.com (the easiest setup)</h3>
|
|
<p class="intro">
|
|
I have put a lot of examples in the <a href="1. Single links/1. TopUp classes.html">examples</a> directory. They are all implemented with this setup.
|
|
</p>
|
|
<ol>
|
|
<li>
|
|
Put the following in the <span class="code">head</span> element:
|
|
<div class="box code">
|
|
<script type="text/javascript" src="http://gettopup.com/releases/latest/top_up-min.js"></script>
|
|
</div>
|
|
<small>
|
|
<strong>Note: You can configure TopUp (libs, <a href="http://gettopup.com/documentation#function_enable_fast_mode">fast mode</a>, paths) in the querystring of the URL (read <a href="http://gettopup.com/documentation#configure_top_up_with_the_query_string">documentation</a>)</strong>
|
|
</small>
|
|
<div class="top_padded">
|
|
( you can also include a specific release by replacing <span class="code">latest</span> with the version e.g. <span class="code">1.3.2</span> )
|
|
</div>
|
|
</li>
|
|
</ol>
|
|
<h3>When hosting the Javascript and images yourself</h3>
|
|
<p class="intro">
|
|
Please note that this page is implemented with this setup. I assume hosting TopUp will not be a problem.
|
|
</p>
|
|
<ol>
|
|
<li>
|
|
Copy the entire(!) <strong>jquery</strong> directory in the same directory as the TopUp Javascript file. TopUp will automatically determine which Javascript libraries
|
|
(jQuery and/or jQuery UI) to include from the <strong>jquery</strong> directory when missing.
|
|
Please note that TopUp will only include <strong>one</strong>(!) file to reduce the amount of HTTP requests! An include will look like this:
|
|
<div class="box code">
|
|
<script type="text/javascript" src="path/to/your/jquery/*.js"></script>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
Copy the entire(!) <strong>images</strong> directory to the correct location.
|
|
At default, TopUp assumes that the images reside at the same host as the file itself in the following path <span class="code">/images/top_up/</span>.
|
|
You can change the path (and even the host) by changing the variables <span class="code">TopUp.host</span> and <span class="code">TopUp.images_path</span> as the following:
|
|
<div class="box code">
|
|
<script type="text/javascript"><br>
|
|
TopUp.host = "http://www.anotherwebsite.com/";<br>
|
|
TopUp.images_path = "assets/images/top_up/";<br>
|
|
</script>
|
|
</div>
|
|
<small>
|
|
<strong>Note: The proper place for Rails developers would be the <span class="code">application.js</span></strong>
|
|
</small>
|
|
</li>
|
|
<li>
|
|
Copy the entire(!) <strong>players</strong> directory to the correct location.
|
|
At default, TopUp assumes that the players reside at the same host as the file itself in the following path <span class="code">/players/</span>.
|
|
You can change the path and host by changing the variables <span class="code">TopUp.host</span> and <span class="code">TopUp.players_path</span> as the following:
|
|
<div class="box code">
|
|
<script type="text/javascript"><br>
|
|
TopUp.host = "http://www.anotherwebsite.com/";<br>
|
|
TopUp.players_path = "assets/players/";<br>
|
|
</script>
|
|
</div>
|
|
<small>
|
|
<strong>Note: The proper place for Rails developers would be the <span class="code">application.js</span></strong>
|
|
</small>
|
|
</li>
|
|
<li>
|
|
Now you start using TopUp on your webpages by putting the following in the <span class="code">head</span> element:
|
|
<div class="box code">
|
|
<script type="text/javascript" src="path/to/your/top_up-min.js"></script>
|
|
</div>
|
|
<small>
|
|
<strong>Note: You can configure TopUp (libs, <a href="http://gettopup.com/documentation#function_enable_fast_mode">fast mode</a>, paths) in the querystring of the URL (read <a href="http://gettopup.com/documentation#configure_top_up_with_the_query_string">documentation</a>)</strong>
|
|
</small>
|
|
</li>
|
|
</ol>
|
|
<p>
|
|
Remember: You can still use <strong><a href="http://prototypejs.org">Prototype</a></strong> without having conflicts, just make sure you include TopUp first.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html> |