106 lines
3.8 KiB
HTML
106 lines
3.8 KiB
HTML
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
|
||
|
|
"http://www.w3.org/TR/html4/strict.dtd">
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<title>dojox.image.Lightbox Tests | The Dojo Toolkit</title>
|
||
|
|
|
||
|
|
<script type="text/javascript" src="../../../dojo/dojo.js" djConfig="isDebug:true, parseOnLoad: true"></script>
|
||
|
|
<script type="text/javascript" src="../../../dijit/tests/_testCommon.js"></script>
|
||
|
|
<script type="text/javascript" src="../Lightbox.js"></script>
|
||
|
|
<script type="text/javascript">
|
||
|
|
// dojo.require("dojox.image.Lightbox"); // un-comment when not debugging
|
||
|
|
dojo.require("dojo.parser"); // scan page for widgets and instantiate them
|
||
|
|
dojo.require("dojox.data.FlickrStore");
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style type="text/css">
|
||
|
|
@import "../../../dojo/resources/dojo.css";
|
||
|
|
@import "../../../dijit/themes/dijit.css";
|
||
|
|
@import "../../../dijit/tests/css/dijitTests.css";
|
||
|
|
|
||
|
|
/* you need this file */
|
||
|
|
@import "../resources/image.css";
|
||
|
|
|
||
|
|
body, html { width:100%; height:100%; margin:0; padding:0; }
|
||
|
|
|
||
|
|
</style>
|
||
|
|
|
||
|
|
<script type="text/javascript">
|
||
|
|
// programatic flickrstore implementation [basic]
|
||
|
|
function onComplete(items,request){
|
||
|
|
if (items.length>0){
|
||
|
|
dojo.forEach(items,function(item){
|
||
|
|
var part = {
|
||
|
|
title: flickrStore.getValue(item,"title"),
|
||
|
|
href: flickrStore.getValue(item,"imageUrl")
|
||
|
|
};
|
||
|
|
// FIXME: make addImage more accessible, or do this internally
|
||
|
|
// _attachedDialog is dijit.byId("dojoxLightboxDialog"), and the
|
||
|
|
// is only one per page.
|
||
|
|
dijit.byId('fromStore')._attachedDialog.addImage(part,"flickrStore");
|
||
|
|
});
|
||
|
|
dojo.byId('flickrButton').disabled = false;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function onError(error,request){
|
||
|
|
console.warn(error,request);
|
||
|
|
}
|
||
|
|
|
||
|
|
function init(){
|
||
|
|
var flickrRequest = {
|
||
|
|
query: {},
|
||
|
|
onComplete: onComplete,
|
||
|
|
onError: onError,
|
||
|
|
userid: "jetstreet",
|
||
|
|
tags: "jetstreet",
|
||
|
|
count: 10
|
||
|
|
};
|
||
|
|
flickrStore.fetch(flickrRequest);
|
||
|
|
}
|
||
|
|
dojo.addOnLoad(init);
|
||
|
|
</script>
|
||
|
|
|
||
|
|
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
|
||
|
|
<div style="padding:20px;">
|
||
|
|
<h1 class="testTitle">a Dojo based Lightbox implementation:</h1>
|
||
|
|
|
||
|
|
<h3>Individual</h3>
|
||
|
|
<p>
|
||
|
|
<a href="images/imageVert.jpg" dojoType="dojox.image.Lightbox" title="More Guatemala...">tall</a>
|
||
|
|
<a href="images/imageHoriz.jpg" dojoType="dojox.image.Lightbox" title="Antigua, Guatemala">4:3 image</a>
|
||
|
|
<a href="images/broken.jpg" dojoType="dojox.image.Lightbox" title="broken href example">Broken link</a>
|
||
|
|
<a href="images/huuuge.png" dojoType="dojox.image.Lightbox" title="a large image">large than viewport?</a>
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<h3>Grouped:</h3>
|
||
|
|
<p>
|
||
|
|
<a href="images/imageHoriz2.jpg" dojoType="dojox.image.Lightbox" group="group1" title="Amsterdam Train Depot">wide image</a>
|
||
|
|
<a href="images/square.jpg" dojoType="dojox.image.Lightbox" group="group1" title="1:1 aspect">square</a>
|
||
|
|
<a href="images/extraWide.jpg" dojoType="dojox.image.Lightbox" group="group1" title="Greeneville, TN">wide image</a>
|
||
|
|
<a href="images/broken.jpg" dojoType="dojox.image.Lightbox" group="group1" title="broken href example">Broken link</a>
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<h3>Alternate Group:</h3>
|
||
|
|
<p>
|
||
|
|
<a href="images/imageHoriz2.jpg" dojoType="dojox.image.Lightbox" group="group2" title="Amsterdam Train Depot">wide image</a>
|
||
|
|
<a href="images/square.jpg" dojoType="dojox.image.Lightbox" group="group2" title="1:1 aspect">square</a>
|
||
|
|
<a href="images/imageHoriz.jpg" dojoType="dojox.image.Lightbox" group="group2" title="Antigua, Guatemala">4:3 image</a>
|
||
|
|
<a href="images/imageVert.jpg" dojoType="dojox.image.Lightbox" group="group2" title="More Guatemala...">tall</a>
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<h3>From dojox.data.FlickrStore:</h3>
|
||
|
|
|
||
|
|
<div dojoType="dojox.data.FlickrStore" jsId="flickrStore" label="title"></div>
|
||
|
|
<div id="fromStore" dojoType="dojox.image.Lightbox" store="flickrStore" group="flickrStore"></div>
|
||
|
|
|
||
|
|
<input id="flickrButton" type="button" onclick="dijit.byId('fromStore').show()" value="show flickr lightbox" disabled="disabled">
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|