diff options
Diffstat (limited to 'includes/js/dojox/image/tests')
-rw-r--r-- | includes/js/dojox/image/tests/images.json | 32 | ||||
-rw-r--r-- | includes/js/dojox/image/tests/images/extraWide.jpg | bin | 49250 -> 0 bytes | |||
-rw-r--r-- | includes/js/dojox/image/tests/images/huuuge.png | bin | 37958 -> 0 bytes | |||
-rw-r--r-- | includes/js/dojox/image/tests/images/imageHoriz.jpg | bin | 47693 -> 0 bytes | |||
-rw-r--r-- | includes/js/dojox/image/tests/images/imageHoriz2.jpg | bin | 77176 -> 0 bytes | |||
-rw-r--r-- | includes/js/dojox/image/tests/images/imageVert.jpg | bin | 71533 -> 0 bytes | |||
-rw-r--r-- | includes/js/dojox/image/tests/images/spanke.jpg | bin | 302741 -> 0 bytes | |||
-rw-r--r-- | includes/js/dojox/image/tests/images/square.jpg | bin | 82010 -> 0 bytes | |||
-rw-r--r-- | includes/js/dojox/image/tests/test_Gallery.html | 67 | ||||
-rw-r--r-- | includes/js/dojox/image/tests/test_Lightbox.html | 105 | ||||
-rw-r--r-- | includes/js/dojox/image/tests/test_Magnifier.html | 98 | ||||
-rw-r--r-- | includes/js/dojox/image/tests/test_MagnifierLite.html | 91 | ||||
-rw-r--r-- | includes/js/dojox/image/tests/test_SlideShow.html | 68 | ||||
-rw-r--r-- | includes/js/dojox/image/tests/test_ThumbnailPicker.html | 134 |
14 files changed, 0 insertions, 595 deletions
diff --git a/includes/js/dojox/image/tests/images.json b/includes/js/dojox/image/tests/images.json deleted file mode 100644 index bd0cf96..0000000 --- a/includes/js/dojox/image/tests/images.json +++ /dev/null @@ -1,32 +0,0 @@ -{ items: [ - { - "thumb":"images/extraWide.jpg", - "large":"images/extraWide.jpg", - "title":"I'm wide, me", - "link":"http://www.flickr.com/photos/44153025@N00/748348847" - }, - { - "thumb":"images/imageHoriz.jpg", - "large":"images/imageHoriz.jpg", - "title":"I'm a horizontal picture", - "link":"http://www.flickr.com/photos/44153025@N00/735656038" - }, - { - "thumb":"images/imageHoriz2.jpg", - "large":"images/imageHoriz2.jpg", - "title":"I'm another horizontal picture", - "link":"http://www.flickr.com/photos/44153025@N00/714540483" - }, - { - "thumb":"images/imageVert.jpg", - "large":"images/imageVert.jpg", - "title":"I'm a vertical picture", - "link":"http://www.flickr.com/photos/44153025@N00/715392758" - }, - { - "large":"images/square.jpg", - "thumb":"images/square.jpg", - "link" :"images/square.jpg", - "title":"1:1 aspect ratio" - } -]}
\ No newline at end of file diff --git a/includes/js/dojox/image/tests/images/extraWide.jpg b/includes/js/dojox/image/tests/images/extraWide.jpg Binary files differdeleted file mode 100644 index 2161825..0000000 --- a/includes/js/dojox/image/tests/images/extraWide.jpg +++ /dev/null diff --git a/includes/js/dojox/image/tests/images/huuuge.png b/includes/js/dojox/image/tests/images/huuuge.png Binary files differdeleted file mode 100644 index ee98a39..0000000 --- a/includes/js/dojox/image/tests/images/huuuge.png +++ /dev/null diff --git a/includes/js/dojox/image/tests/images/imageHoriz.jpg b/includes/js/dojox/image/tests/images/imageHoriz.jpg Binary files differdeleted file mode 100644 index 3948416..0000000 --- a/includes/js/dojox/image/tests/images/imageHoriz.jpg +++ /dev/null diff --git a/includes/js/dojox/image/tests/images/imageHoriz2.jpg b/includes/js/dojox/image/tests/images/imageHoriz2.jpg Binary files differdeleted file mode 100644 index fbbf404..0000000 --- a/includes/js/dojox/image/tests/images/imageHoriz2.jpg +++ /dev/null diff --git a/includes/js/dojox/image/tests/images/imageVert.jpg b/includes/js/dojox/image/tests/images/imageVert.jpg Binary files differdeleted file mode 100644 index 1652338..0000000 --- a/includes/js/dojox/image/tests/images/imageVert.jpg +++ /dev/null diff --git a/includes/js/dojox/image/tests/images/spanke.jpg b/includes/js/dojox/image/tests/images/spanke.jpg Binary files differdeleted file mode 100644 index ec95fb0..0000000 --- a/includes/js/dojox/image/tests/images/spanke.jpg +++ /dev/null diff --git a/includes/js/dojox/image/tests/images/square.jpg b/includes/js/dojox/image/tests/images/square.jpg Binary files differdeleted file mode 100644 index 9094d5a..0000000 --- a/includes/js/dojox/image/tests/images/square.jpg +++ /dev/null diff --git a/includes/js/dojox/image/tests/test_Gallery.html b/includes/js/dojox/image/tests/test_Gallery.html deleted file mode 100644 index 320c481..0000000 --- a/includes/js/dojox/image/tests/test_Gallery.html +++ /dev/null @@ -1,67 +0,0 @@ -<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> -<html> -<head> - <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> - <title>Testing the Image Gallery</title> - - <style type="text/css"> - @import "../../../dijit/tests/css/dijitTests.css"; - @import "../resources/image.css"; - </style> - - - <script type="text/javascript" src="../../../dojo/dojo.js" djconfig="parseOnLoad:true, isDebug: true, defaultTestTheme:'soria'"></script> - <script type="text/javascript" src="../../../dijit/tests/_testCommon.js"></script> - <script type="text/javascript" src="../ThumbnailPicker.js"></script> - <script type="text/javascript" src="../SlideShow.js"></script> - <script type="text/javascript" src="../Gallery.js"></script> - <script type="text/javascript" src="../../../dojo/data/util/simpleFetch.js"></script> - <script type="text/javascript" src="../../data/FlickrStore.js"></script> - <script type="text/javascript" src="../../data/FlickrRestStore.js"></script> - <script type="text/javascript" src="../../../dojo/data/ItemFileReadStore.js"></script> - - <script type="text/javascript"> - // dojo.require("dojox.image.Gallery"); - dojo.require("dojox.data.FlickrRestStore"); - dojo.require("dojo.parser"); // find widgets - - dojo.addOnLoad(function(){ - var flickrRestStore = new dojox.data.FlickrRestStore(); - var req = { - query: { - userid: "44153025@N00", - apikey: "8c6803164dbc395fb7131c9d54843627", - sort: [ - { - attribute: "interestingness", - descending: true - } - ], - // tags: ["superhorse", "redbones", "beachvolleyball"], - tag_mode: "any" - }, - count: 20 - }; - dijit.byId('gallery1').setDataStore(flickrRestStore, req); -/* - dijit.byId('gallery2').setDataStore(imageItemStore,{ count:20 },{ - imageThumbAttr: "thumb", - imageLargeAttr: "large" - }); -*/ - }); - </script> -</head> -<body> - <h1 class="testTitle">dojox.image.Gallery</h1> - - <h2>From FlickrRestStore:</h2> - <div id="gallery1" dojoType="dojox.image.Gallery" imageWidth="700" imageHeight="500"></div> - -<!-- - <h2>From ItemFileReadStore:</h2> - <div id="gallery2" dojoType="dojox.image.Gallery"></div> ---> - -</body> -</html> diff --git a/includes/js/dojox/image/tests/test_Lightbox.html b/includes/js/dojox/image/tests/test_Lightbox.html deleted file mode 100644 index 15b34c8..0000000 --- a/includes/js/dojox/image/tests/test_Lightbox.html +++ /dev/null @@ -1,105 +0,0 @@ -<!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> diff --git a/includes/js/dojox/image/tests/test_Magnifier.html b/includes/js/dojox/image/tests/test_Magnifier.html deleted file mode 100644 index fef1ddd..0000000 --- a/includes/js/dojox/image/tests/test_Magnifier.html +++ /dev/null @@ -1,98 +0,0 @@ -<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" > -<head> - <title>Testing image</title> - <style type="text/css"> - @import "../../../dojo/resources/dojo.css"; - @import "../../../dijit/tests/css/dijitTests.css"; - @import "../../../dijit/themes/tundra/tundra.css"; - /* needed for glass overlay: */ - @import "../resources/Magnifier.css"; - - p { padding:20px; border:1px solid #ededed; } - #testImage { border:2px solid #000; } - - </style> - <script type="text/javascript" src="../../../dojo/dojo.js" djConfig="isDebug: true, parseOnLoad:true"></script> - <!-- for debugging --> - <script type="text/javascript" src="../MagnifierLite.js"></script> - <script type="text/javascript" src="../Magnifier.js"></script> - - <script type="text/javascript"> - dojo.require("dojox.image.Magnifier"); - dojo.require("dijit.form.Button"); - </script> - -</head> -<body class="tundra"> - - <h1 class="testTitle">dojox.image.Magnifier test page</h1> - - <p>They are just images. It's entirely unobtrusive to add magnification to an image, and style it accordingly.</p> - <p>This widget is based on <a href="test_MagnifierLite.html">dojox.image.MagnifierLite</a>, an image-only variant on this dojox.gfx - based Widget. The idea was/is to include addational surfaces in some kind of _Templated GFX widget, based on _Widget.</p> - <p> - Scale= 2.34, 5.67, and 8.90: <br> - <img id="testImage" dojoType="dojox.image.Magnifier" src="images/spanke.jpg" - style="width:200px; height:130px;" scale="2.34" /> - <img id="testImage4" dojoType="dojox.image.Magnifier" src="images/spanke.jpg" - style="width:200px; height:130px;" scale="5.67" /> - - <img id="testImage5" dojoType="dojox.image.Magnifier" src="images/spanke.jpg" - style="width:200px; height:130px;" scale="8.90" /> - </p> - - <p> - <img id="testImage2" dojoType="dojox.image.Magnifier" src="images/spanke.jpg" - style="width:200px; height:130px; padding-right:20px; float:left" /> - I Am Some inline text.<br>lorem ipsum.<br style="clear:both"> - </p> - - <p>A Transparent .png:<br> - - <img style="width:400px; height:260px" id="test3" - dojoType="dojox.image.Magnifier" glassSize="215" scale="3" - src="../../../util/resources/logo/positive/dojo.logo.big.png" /> - </p> - - <p>Programatic:<br> - - <button dojoType="dijit.form.Button" id="foob"> - Make It - <script type="dojo/method" event="onClick"> - this.setAttribute("disabled",true); - dijit.byId("foobd").setAttribute("disabled",false); - new dojox.image.Magnifier({ scale:4.2, glassSize:200 },"foobar"); - </script> - </button> - - <button dojoType="dijit.form.Button" id="foobd" disabled="disabled"> - Destroy It - <script type="dojo/method" event="onClick"> - this.setAttribute("disabled",true); - dijit.byId("foobar").destroy(); - console.log('layout changed:'); - dijit.byId("after1")._adjustScale(); - dijit.byId("after2")._adjustScale(); - </script> - </button> - - <br /><!-- srcNodeRef : --> - <img id="foobar" style="width:300px; height:195px;" src="images/spanke.jpg" /> - </p> - - <p>Remote file (GTA:LCS/psp map):<br> - <img id='after1' style="width:167px; height:240px; border:4px solid #333;" - src="http://img.qj.net/uploads/articles_module/66700/stauntonhpackages_qjpreviewth.png" - scale="6" glassSize="150" dojoType="dojox.image.Magnifier" - /> - - <br>Everybody loves Zelda, right?<br> - <img id='after2' style="width:585px; height:201px" scale="7" glassSize="185" dojoType="dojox.image.Magnifier" src="http://www.zelda-infinite.com/games/zelda1/overworld.png" /> - </p> - - <p id="programaticContainer"> - <!-- not yet? --> - </p> - -</body> -</html> diff --git a/includes/js/dojox/image/tests/test_MagnifierLite.html b/includes/js/dojox/image/tests/test_MagnifierLite.html deleted file mode 100644 index 6e6ccd7..0000000 --- a/includes/js/dojox/image/tests/test_MagnifierLite.html +++ /dev/null @@ -1,91 +0,0 @@ -<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" > -<head> - <title>Testing image</title> - <style type="text/css"> - @import "../../../dojo/resources/dojo.css"; - @import "../../../dijit/tests/css/dijitTests.css"; - @import "../../../dijit/themes/tundra/tundra.css"; - @import "../resources/Magnifier.css"; - - p { padding:20px; border:1px solid #ededed; } - #testImage { border:2px solid #000; } - - </style> - - <script type="text/javascript" src="../../../dojo/dojo.js" djConfig="isDebug: true, parseOnLoad:true"></script> - <script type="text/javascript" src="../MagnifierLite.js"></script> - <script type="text/javascript"> - dojo.require("dojox.image.MagnifierLite"); - dojo.require("dijit.form.Button"); - </script> - -</head> -<body class="tundra"> - - <h1 class="testTitle">dojox.image.MagnifierLite test page</h1> - - <p>They are just images. It's entirely unobtrusive to add magnification to an image, and style it accordingly.</p> - - <p>This is the base class for <a href="test_Magnifier.html">dojox.image.Magnifier</a>, a dojox.gfx-based extension - this portion does not require the dojox.gfx package, but is limited to CSS-based styling. - </p> - - <p> - Scale= 2.34, 5.67, and 8.90: <br> - <img id="testImage" dojoType="dojox.image.MagnifierLite" src="images/spanke.jpg" - style="width:200px; height:130px;" scale="2.34" /> - <img id="testImage4" dojoType="dojox.image.MagnifierLite" src="images/spanke.jpg" - style="width:200px; height:130px;" scale="5.67" /> - - <img id="testImage5" dojoType="dojox.image.MagnifierLite" src="images/spanke.jpg" - style="width:200px; height:130px;" scale="8.90" /> - </p> - - <p> - <img id="testImage2" dojoType="dojox.image.MagnifierLite" src="images/spanke.jpg" - style="width:200px; height:130px; padding-right:20px; float:left" /> - I Am Some inline text.<br>lorem ipsum.<br style="clear:both"> - </p> - - <p>A Transparent .png: (url unavailable in release versions, need build-utils package, or svn)<br> - - <img style="width:400px; height:260px" id="test3" - dojoType="dojox.image.MagnifierLite" glassSize="215" scale="3" - src="../../../util/resources/logo/positive/dojo.logo.big.png" /> - </p> - - <p>Programatic: (destroy() removes this.domNode)<br> - - <button dojoType="dijit.form.Button" id="foob"> - Make It - <script type="dojo/method" event="onClick"> - this.setAttribute("disabled",true); - dijit.byId("foobd").setAttribute("disabled",false); - new dojox.image.MagnifierLite({ scale:4.2, glassSize:200 },"foobar"); - </script> - </button> - - <button dojoType="dijit.form.Button" id="foobd" disabled="disabled"> - Destroy It - <script type="dojo/method" event="onClick"> - this.setAttribute("disabled",true); - dijit.byId("foobar").destroy(); - </script> - </button> - - <br /><!-- srcNodeRef : --> - <img id="foobar" style="width:300px; height:195px;" src="images/spanke.jpg" /> - </p> - - <p>Remote file (GTA:LCS/psp map):<br> - <img style="width:167px; height:240px; border:4px solid #333;" - src="http://img.qj.net/uploads/articles_module/66700/stauntonhpackages_qjpreviewth.png" - scale="6" glassSize="150" dojoType="dojox.image.MagnifierLite" - /> - - <br>Everybody loves Zelda:<br> - <img style="width:585px; height:201px" scale="7" glassSize="185" dojoType="dojox.image.MagnifierLite" src="http://www.zelda-infinite.com/games/zelda1/overworld.png" /> - </p> - -</body> -</html> diff --git a/includes/js/dojox/image/tests/test_SlideShow.html b/includes/js/dojox/image/tests/test_SlideShow.html deleted file mode 100644 index 9200c4b..0000000 --- a/includes/js/dojox/image/tests/test_SlideShow.html +++ /dev/null @@ -1,68 +0,0 @@ -<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> -<html> -<head> - <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> - <title>Testing dojox.image.SlideShow</title> - - <style type="text/css"> - @import "../../../dijit/tests/css/dijitTests.css"; - @import "../resources/image.css"; - </style> - - <script type="text/javascript" src="../../../dojo/dojo.js" djconfig="parseOnLoad:false, isDebug: true, defaultTestTheme: 'soria'"></script> - <script type="text/javascript" src="../../../dijit/tests/_testCommon.js"></script> - <script type="text/javascript" src="../SlideShow.js"></script> - <script type="text/javascript" src="../../../dojo/data/ItemFileReadStore.js"></script> - <script type="text/javascript" src="../../data/FlickrRestStore.js"></script> - - <script type="text/javascript"> - // dojo.require("dojox.image.SlideShow"); - // dojo.require("dojox.data.FlickrRestStore"); - // dojo.require("dojo.data.ItemFileReadStore"); - dojo.require("dojo.parser"); // find widgets - - dojo.addOnLoad(function(){ - //Initialize the first SlideShow with an ItemFileReadStore - dojo.parser.parse(dojo.body()); - dijit.byId('slideshow1').setDataStore(imageItemStore, - { query: {}, count:20 }, - { - imageThumbAttr: "thumb", - imageLargeAttr: "large" - } - ); - - //INitialize the second store with a FlickrRestStore - var flickrRestStore = new dojox.data.FlickrRestStore(); - var req = { - query: { - userid: "44153025@N00", - apikey: "8c6803164dbc395fb7131c9d54843627" - }, - count: 20 - }; - dijit.byId('slideshow2').setDataStore(flickrRestStore, req); - }); - - </script> -</head> -<body> - <h1 class="testTitle">dojox.image.SlideShow</h1> - - <h2>from dojo.data.ItemFileReadStore</h2> - <div jsId="imageItemStore" dojoType="dojo.data.ItemFileReadStore" url="images.json"></div> - - This SlideShow should display five photos, and loop. It should also - open a URL when the image is clicked. The widget should also resize to - fit the image. - <div id="slideshow1" dojoType="dojox.image.SlideShow"></div> - - <h2>from dojox.data.FlickrRestStore</h2> - This SlideShow should display five photos, and not loop. It should also not - open a URL when the image is clicked. AutoLoading of images is also disabled. - The time between images in a SlideShow is 1 second. The widget should not resize to fit the image - <div id="slideshow2" dojoType="dojox.image.SlideShow" noLink="true" loop="false" autoLoad="false" - slideshowInterval="1" fixedHeight="true"></div> - -</body> -</html> diff --git a/includes/js/dojox/image/tests/test_ThumbnailPicker.html b/includes/js/dojox/image/tests/test_ThumbnailPicker.html deleted file mode 100644 index 90cdf2e..0000000 --- a/includes/js/dojox/image/tests/test_ThumbnailPicker.html +++ /dev/null @@ -1,134 +0,0 @@ -<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> -<html> -<head> - <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> - <title>Testing the ThumbnailPicker</title> - - <style type="text/css"> - @import "../../../dijit/tests/css/dijitTests.css"; - @import "../resources/image.css"; - </style> - - <script type="text/javascript" src="../../../dojo/dojo.js" djconfig="parseOnLoad:true, isDebug: true, defaultTestTheme:'soria'"></script> - <script type="text/javascript" src="../../../dijit/tests/_testCommon.js"></script> - <script type="text/javascript" src="../ThumbnailPicker.js"></script> - - <script type="text/javascript"> - // dojo.require("dojox.image.Gallery"); - dojo.require("dojox.data.FlickrRestStore"); - dojo.require("dojo.data.ItemFileReadStore"); - dojo.require("dojo.parser"); // find widgets - - /* - Initializes the ThumbnailPicker with a data store that - reads from the Flickr REST APIs. - */ - function initFlickrGallery() { - var flickrRestStore = new dojox.data.FlickrRestStore(); - var req = { - query: { - userid: "44153025@N00",//The Flickr user id to use - apikey: "8c6803164dbc395fb7131c9d54843627",//An API key is required. - sort: [ - { - descending: true //Use descending sort order, ascending is default. - } - ], - tags: ["superhorse", "redbones", "beachvolleyball","dublin","croatia"], - tag_mode: "any" //Match any of the tags - }, - count: 20 - }; - - //Set the flickr data store on two of the dojox.image.ThumbnailPicker widgets - dijit.byId('thumbPicker1').setDataStore(flickrRestStore, req); - dijit.byId('thumbPicker3').setDataStore(flickrRestStore, req); - } - - /* - Initializes the second ThumbnailPicker widget with a data store that - reads information from a JSON URL. This also tells the ThumbnailPicker - the name of the JSON attributes to read from each data item retrieved - from the JSON URL. - */ - function initItemStoreGallery(){ - var itemRequest = { - query: {}, - count: 20 - }; - var itemNameMap = { - imageThumbAttr: "thumb", - imageLargeAttr: "large" - }; - - //Set the dojo.data.ItemFileReadStore on two of the dojox.image.ThumbnailPicker widgets - //Note the use of the 'itemNameMap', which tells the widget what attributes to - //read from the store. Look in the 'images.json' file in the same folder as this - //file to see the data being read by the widget. - dijit.byId('thumbPicker2').setDataStore(imageItemStore, itemRequest, itemNameMap); - dijit.byId('thumbPicker4').setDataStore(imageItemStore, itemRequest, itemNameMap); - } - - //Subscribe to clicks on the thumbnails, and print out the information provided - function doSubscribe(){ - function updateDiv(packet){ - dojo.byId('PublishedData').innerHTML = "You selected the thumbnail:" - + "<br/><b>Index:</b> " + packet.index - + "<br/><b>Url:</b> " + packet.url - + "<br/><b>Large Url:</b> " + packet.largeUrl - + "<br/><b>Title:</b> " + packet.title - + "<br/><b>Link:</b> " + packet.link - ; - }; - - //When an image in the ThumbnailPicker is clicked on, it publishes - //information on the image to a topic, whose name is found by calling - //the 'getTopicName' function on the widget. - dojo.subscribe(dijit.byId('thumbPicker1').getClickTopicName(), updateDiv); - dojo.subscribe(dijit.byId('thumbPicker2').getClickTopicName(), updateDiv); - } - - dojo.addOnLoad(initFlickrGallery); - dojo.addOnLoad(initItemStoreGallery); - dojo.addOnLoad(doSubscribe); - </script> -</head> -<body> - <h1 class="testTitle">dojox.image.ThumbnailPicker</h1> - - <div id="PublishedData" style="background-color:light-grey"> - When you click on a thumbnail image, it's information is placed here - </div> - - <h2>From FlickrRestStore:</h2> - This ThumbnailPicker should have 8 thumbnails, with each of them linking - to a URL when clicked on. The cursor should also change when over an image. - <div id="thumbPicker1" dojoType="dojox.image.ThumbnailPicker" size="500" - useHyperlink="true" ></div> - - <h2>From ItemFileReadStore:</h2> - This ThumbnailPicker should have 5 thumbnails. Clicking on a thumbnail should NOT - open a URL, and the cursor should not change when over an image that is not an arrow. - - <div id="thumbPicker2" dojoType="dojox.image.ThumbnailPicker" size="400" - isClickable="false"></div> - <div jsId="imageItemStore" dojoType="dojo.data.ItemFileReadStore" url="images.json"></div> - - <h2>From FlickrRestStore:</h2> - This ThumbnailPicker should have 6 thumbnails, with each of them linking - to a URL when clicked on. The cursor should also change when over an image. - Unlike the ThumbnailPicker above, when these links are clicked on, this page - changes, instead of a popup window. - - <div id="thumbPicker3" dojoType="dojox.image.ThumbnailPicker" size="600" - useHyperLink="true" hyperlinkTarget="this"></div> - - <h2>From ItemFileReadStore, and vertical:</h2> - This ThumbnailPicker should have 5 thumbnails. Clicking on a thumbnail should NOT - open a URL, and the cursor should not change when over an image that is not an arrow. - The thumbnails should also be aligned vertically. - <div id="thumbPicker4" dojoType="dojox.image.ThumbnailPicker" size="300" - isClickable="false" isHorizontal="false"></div> - -</body> -</html> |