You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
249 lines
8.2 KiB
249 lines
8.2 KiB
<!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" 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>
|
|
|