Skip to content

Commit

Permalink
Updates to demos for release.
Browse files Browse the repository at this point in the history 
Signed-off-by: Lanny McNie <lanny@gskinner.com>
  • Loading branch information
Lanny McNie committed Apr 16, 2012
1 parent 8d61516 commit 840d297
Show file tree
Hide file tree
Showing 2 changed files with 49 additions and 27 deletions.
8 changes: 4 additions & 4 deletions examples/MediaGrid.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -123,7 +123,7 @@ <h1><span class="text-product">Preload<strong>JS</strong></span> Example: Media
<label>Sound 2</label>
</div>

<div id="assets/Texas.jpg" onclick="loadAsset(this)" class="gridBox" style="width: 200px; height: 248px; float: right;">
<div id="assets/Texas.jpg" onclick="loadAsset(this)" class="gridBox" style="width:200px; height:248px; float: right;">
<label>Image</label>
</div>

Expand All @@ -139,12 +139,12 @@ <h1><span class="text-product">Preload<strong>JS</strong></span> Example: Media
<label>Sound 1</label>
</div>

<div id="assets/Autumn.png" onclick="loadAsset(this)" class="gridBox" style="width: 454px; height: 150px">
<div id="assets/Autumn.png" onclick="loadAsset(this)" class="gridBox" style="width:454px; height:150px">
<label>Image</label>
</div>

<div id="assets/NoFileHere.png" onclick="loadAsset(this)" class="gridBox" style="width:200px; height: 150px;">
<label>No File Here</label>
<div id="assets/NoFileHere.png" onclick="loadAsset(this)" class="gridBox" style="width:200px; height:150px;">
<label>Intentionally missing file<br/>to generate error.</label>
</div>

</div>
Expand Down
68 changes: 45 additions & 23 deletions examples/PreloadQueue.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,28 +5,52 @@
<title>PreloadJS: Queue Example</title>

<script type="text/javascript" src="http://code.createjs.com/preloadjs-0.1.0.min.js"></script>
<script src="../src/preloadjs/PreloadJS.js"></script>
<script src="../src/preloadjs/XHRLoader.js"></script>
<script src="../src/preloadjs/TagLoader.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">

var map = {};
var preload;
var loader;
var manifest;
var w = 150; // Item width
var h = 100; // Item height
var w = 238; // Item width
var h = 170; // Item height

function init() {
if (window.top != window) {
document.getElementById("header").style.display = "none";
}
// Populate a manifest with string-based items for preloading.
manifest = [];
var template = "http://thechive.files.wordpress.com/2012/03/eyegasms-%ID%.jpg"; // Some nice hi-res images
for (var i=1, l=18; i<=l; i++) {
manifest.push(template.replace("%ID%", i));
}

$("#loadAnotherBtn").click(loadAnother);
$("#loadAllBtn").click(loadAll);
$("#reloadBtn").click(reload);

reload();
}

// Reset everything
function reload() {
// If there is an open preload queue, close it.
if (preload != null) { preload.close(); }

// Reset the UI
$("#reloadBtn").css("display", "none");
$(".box").remove();
$("#mainProgress .progress").width(0);

$("#loadAnotherBtn").attr("disabled", null);
$("#loadAllBtn").attr("disabled", null);

// Push each item into our manifest
manifest = [
"assets/image0.jpg",
"assets/image1.jpg",
"assets/image2.jpg",
"assets/image3.jpg",
"assets/Autumn.png",
"assets/BlueBird.png",
"assets/Nepal.jpg",
"assets/Texas.jpg"
];

// Create a preloader. There is no manfest added to it up-front, we will add items on-demand.
preload = new PreloadJS();
Expand All @@ -35,10 +59,6 @@
preload.onFileProgress = handleFileProgress;
preload.onError = handleFileError;
preload.setMaxConnections(5);

// Clicking the "Load Another" button will create a new instance
$("#loadAnotherBtn").click(loadAnother);
$("#loadAllBtn").click(loadAll);
}

function stop() {
Expand All @@ -52,19 +72,21 @@
}

function loadAnother() {
// Get the next manifest item.
// Get the next manifest item, and load it
var item = manifest.shift();
preload.loadFile(item);

// If we have no more items, disable the button.
// If we have no more items, disable the UI.
if (manifest.length == 0) {
$("#loadAnotherBtn").attr("disabled", "disabled");
$("#loadAllBtn").attr("disabled", "disabled");
$("#reloadBtn").css("display","inline");
}

// Create a new loader display item
var div = $("#template").clone();
div.attr("id", ""); // Wipe out the ID
div.addClass("box")
$("#container").append(div);
map[item] = div; // Store a reference to each item by its src
}
Expand All @@ -74,11 +96,10 @@
var div = map[event.src];
div.addClass("complete");

// Get a reference to the loaded image
// Get a reference to the loaded image (<img/>)
var img = event.result;

// Resize it to fit inside the item

var r = img.width/img.height;
var ir = w/h
if (r > ir) {
Expand Down Expand Up @@ -125,8 +146,8 @@
#mainProgress LABEL { position: absolute; }

.item {
height: 100px;
width: 150px;
height: 170px;
width: 238px;
border: 1px solid #eee;
background-color: #ddd;
padding: 2px;
Expand Down Expand Up @@ -155,8 +176,9 @@ <h1><span class="text-product">Preload<strong>JS</strong></span> Preload Queue</
</header>

<div id="container" class="content">
<input type="button" id="loadAnotherBtn" value="Load Another" />
<input type="button" id="loadAllBtn" value="Load All" />
<input type="button" id="loadAnotherBtn" value="Load Another" disabled="disabled" />
<input type="button" id="loadAllBtn" value="Load All" disabled="disabled" />
<input type="button" id="reloadBtn" value="Reset" />
<div id="mainProgress" class="item">
<label>Overall Progress</label><div class="progress"></div>
</div>
Expand Down

0 comments on commit 840d297

Please sign in to comment.