| New file |
|---|
| 0,0 → 1,101 |
|---|
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" |
| "http://www.w3.org/TR/html4/strict.dtd"> |
| <html> |
| <head> |
| <title>Dojo Lightbox Tests</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 |
| 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 class="tundra"> |
| |
| <div style="padding:20px;"> |
| <h1 class="testTitle">Dojo-base 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> |
| </p> |
| |
| <h3>Grouped:</h3> |
| <p> |
| <a href="images/imageHoriz2.jpg" dojoType="dojox.image.Lightbox" group="group1" title="Amterdamn 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> |
| </p> |
| |
| <h3>Alternate Group:</h3> |
| <p> |
| <a href="images/imageHoriz2.jpg" dojoType="dojox.image.Lightbox" group="group2" title="Amterdamn 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> |