]> git.pond.sub.org Git - eow/blobdiff - static/dojo-release-1.1.1/dojox/image/tests/test_Lightbox.html
add Dojo 1.1.1
[eow] / static / dojo-release-1.1.1 / dojox / image / tests / test_Lightbox.html
diff --git a/static/dojo-release-1.1.1/dojox/image/tests/test_Lightbox.html b/static/dojo-release-1.1.1/dojox/image/tests/test_Lightbox.html
new file mode 100644 (file)
index 0000000..15b34c8
--- /dev/null
@@ -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>