dojox
Version:
Dojo eXtensions, a rollup of many useful sub-projects and varying states of maturity – from very stable and robust, to alpha and experimental. See individual projects contain README files for details.
250 lines (211 loc) • 8.43 kB
HTML
<html>
<head>
<title>dojox.image.Lightbox Tests | The Dojo Toolkit</title>
<!-- required: a default theme file -->
<link rel="stylesheet" id="themeStyles" href="../../../dijit/themes/claro/claro.css">
<link rel="stylesheet" href="../resources/image.css">
<style type="text/css">
@import "../../../dojo/resources/dojo.css";
@import "../../../dijit/tests/css/dijitTests.css";
body, html { width:100%; height:100%; margin:0; padding:0; }
#customTitleThing {
height:75px;
border:1px solid #ededed;
overflow:auto;
width:92%;
}
</style>
<!-- required: dojo.js -->
<script type="text/javascript" src="../../../dojo/dojo.js" data-dojo-config="isDebug:true, parseOnLoad: true"></script>
<!-- do not use! only for testing dynamic themes -->
<script type="text/javascript" src="../../../dijit/tests/_testCommon.js"></script>
<!-- for debugging: -->
<script type="text/javascript">
require(["dojo", "dijit/form/Button", "dojox/image/Lightbox", "dojox/data/FlickrStore", "dojo/parser", "dojo/domReady!"], function(){
// sample with super-rich text content (no widgets or undelegated events please).
var title = dojo.byId("customExample").innerHTML;
dojo.empty("customExample");
var lb = new dojox.image.Lightbox({
href:"images/square.jpg",
title: title
});
lb.startup();
new dijit.form.Button({
onClick: function(){
lb.show();
},
label:"Custom HTML"
}).placeAt("container");
// and example that has events:
var elb = new dojox.image.LightboxDialog({});
elb.connect(elb.textNode, "onclick", function(e){
e.preventDefault();
elb.show({
leaveTitle:true,
href: dojo.attr(e.target, "href")
});
})
elb.startup();
var content = "<a href='images/chris1_lg.jpg'>chris1<a/>"
+ " | <a href='images/chris2_lg.jpg'>chris2</a>"
+ " | <a href='images/chris3_lg.jpg'>chris3</a>"
;
new dijit.form.Button({
onClick:function(){
elb.show({
title:content,
href:"images/chris1_lg.jpg"
});
},
label:"Custom Links"
}).placeAt("container");
// and example of onClick for the image (to hide the lightbox);
var clb = new dojox.image.Lightbox({
title:"fun fun fun fun",
href:"images/chris1_lg.jpg",
onClick: function(){
this.hide();
}
});
clb.startup();
new dijit.form.Button({
label:"Custom Click",
onClick: function(){
clb.show()
}
}).placeAt("container");
// and example of onClick for the image (to toggle between large/small);
var clb2 = new dojox.image.Lightbox({
title:"fun fun fun fun", // friday, friday!
href:"images/chris1_sm.jpg",
onClick: function(info){
this.href = info.href == "images/chris1_lg.jpg" ? "images/chris1_sm.jpg" : "images/chris1_lg.jpg";
this.show({
leaveTitle:true,
href: this.href
});
}
});
clb2.startup();
new dijit.form.Button({
label:"Zoomish Click",
onClick: function(){
clb2.show()
}
}).placeAt("container");
dojo.query("#groupremover").onclick(function(e){
e.preventDefault();
var g = dijit.byId("targetremover");
console.warn(g);
if(g){
// destroying a dojox.image.Lightbox will remove itself from
// the LightboxDialog
g.destroy();
}
// test showing group 3 after removal:
var lbd = dijit.byId("dojoxLightboxDialog"); // the master
lbd.show({
title:"Should Only be three remaining",
group:"group3"
});
})
dojo.query("#groupkiller").onclick(function(e){
e.preventDefault();
var lbd = dijit.byId("dojoxLightboxDialog");
lbd.removeGroup("group3");
});
});
// programatic flickrstore implementation [basic]
function onComplete(items,request){
if(items.length > 0){
var lightbox = dijit.byId("fromStore");
dojo.forEach(items, function(item){
var part = {
title: flickrStore.getValue(item,"title"),
href: flickrStore.getValue(item,"imageUrl")
};
this.addImage(part, "flickrStore");
}, lightbox);
dijit.byId('flickrButton').set("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.ready(init);
</script>
</head>
<body class="claro">
<div id="container" 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>
</p>
<h3>Oversized</h3>
<p>
<a href="images/supertall.gif" dojoType="dojox.image.Lightbox" title="a large image">super tall image</a>
<a href="images/superwide.gif" dojoType="dojox.image.Lightbox" title="a large image">super wide image</a>
<a href="images/huuuge.png" modal="true" dojoType="dojox.image.Lightbox" title="a large image">large than viewport?</a> (also modal, no click on underlay)
<a href="images/huuuge.png" dojoType="dojox.image.Lightbox" title="a large image with a really really long multi-line-title because I can. Okay, this title has to be really really supremely long in order to occupy the full width of the viewport provided. yymv.">large than viewport, long title</a>
</p>
<h3>Grouped:</h3>
<p>
<a href="images/imageHoriz2.jpg" dojoType="dojox.image.Lightbox" group="group1" title="Amsterdam Train Depot but this title is going to be really really really really long just because">wide image, multiline title</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="hmm <em>right</em> there is <b>rich text</b> here">Rich Text Title</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>RemoveGroup Group3:</h3>
<p>
<a id="targetremover" href="images/imageHoriz2.jpg" dojoType="dojox.image.Lightbox" group="group3" title="hmm <em>right</em> there is <b>rich text</b> here">Rich Text Title</a>
<a href="images/square.jpg" dojoType="dojox.image.Lightbox" group="group3" title="1:1 aspect">square</a>
<a href="images/imageHoriz.jpg" dojoType="dojox.image.Lightbox" group="group3" title="Antigua, Guatemala">4:3 image</a>
<a href="images/imageVert.jpg" dojoType="dojox.image.Lightbox" group="group3" title="More Guatemala...">tall</a>
</p>
<p>
<a href='#' id="groupremover">remove one from group3, then show group</a> | <a href="#" id="groupkiller">remove group3</a>
</p>
<h3>From dojox.data.FlickrStore:</h3>
<div dojoType="dojox.data.FlickrStore" data-dojo-id="flickrStore" label="title"></div>
<div id="fromStore" dojoType="dojox.image.LightboxDialog" store="flickrStore" group="flickrStore"></div>
<button dojoType="dijit.form.Button" id="flickrButton" disabled="disabled">
Show Flickr lightbox
<script type="dojo/connect" data-dojo-event="onClick">
dijit.byId('fromStore').show({ group:"flickrStore" });
</script>
</button>
</div>
<div id="customExample">
<div id="customTitleThing">
<p>lorem ipsum dolor amit</p>
<p>lorem ipsum dolor amit</p>
<p>lorem ipsum dolor amit</p>
<p>lorem ipsum dolor amit</p>
<p>lorem ipsum dolor amit</p>
<p>lorem ipsum dolor amit</p>
</div>
</div>
</body>
</html>