250 lines
8.5 KiB
HTML
250 lines
8.5 KiB
HTML
<!DOCTYPE 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" djConfig="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" jsId="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" 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>
|