diff options
Diffstat (limited to 'includes/js/dojox/image/tests/test_Lightbox.html')
-rw-r--r-- | includes/js/dojox/image/tests/test_Lightbox.html | 105 |
1 files changed, 105 insertions, 0 deletions
diff --git a/includes/js/dojox/image/tests/test_Lightbox.html b/includes/js/dojox/image/tests/test_Lightbox.html new file mode 100644 index 0000000..15b34c8 --- /dev/null +++ b/includes/js/dojox/image/tests/test_Lightbox.html @@ -0,0 +1,105 @@ +<!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> |