Subversion Repositories Applications.papyrus

Rev

Blame | Last modification | View Log | RSS feed 

<!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>