You're here » » » Dojo Lightbox with dojox.image.Lightbox

Dojo Lightbox with dojox.image.Lightbox

Posted by Unknown at Wednesday, April 06, 2011 No comments Labels: ,
dojo

The dojox.image.Lightbox resource has many cool features:
  • Integrated theming and images
  • Keyboard accessible
  • Resizes when the viewport changes
  • Flexible with numerous options
  • Declarative or Programmatic instance creation
  • Works with Dojo data stores

Let me show you just how easy it is to use Dojo's Lightbox solution!

The CSS


dojox.image.Lightbox
doesn't require any of the Dijit themes but does require its own CSS file:
<style type="text/css">
/* post styles */
#imageHolder img { width:200px; }
/* Lightbox styles */
.tundra .dijitDialogUnderlay, 
.nihilo .dijitDialogUnderlay,
.soria .dijitDialogUnderlay {
background-color:#000; 
}
.claro .dojoxLightbox .dijitDialogCloseIconHover,
.nihilo .dojoxLightbox .dijitDialogCloseIconHover,
.tundra .dojoxLightbox .dijitDialogCloseIconHover, 
.tundra .dojoxLightbox .dijitDialogCloseIconActive,
.nihilo .dojoxLightbox .dijitDialogCloseIconActive,
.claro .dojoxLightbox .dijitDialogCloseIconActive {
background:url('http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/image/resources/images/close.png') no-repeat 0 0;
}
.claro .dojoxLightbox,
.soria .dojoxLightbox,
.nihilo .dojoxLightbox,
.tundra .dojoxLightbox {
position:absolute;
z-index:999;
overflow:hidden;
width:100px;
height:100px; 
border:11px solid #fff !important; 
background:#fff url('http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/image/resources/images/loading.gif') no-repeat center center;

-webkit-box-shadow: 0px 6px 10px #636363; 
-webkit-border-radius: 3px;
-moz-border-radius:4px;
border-radius: 4px;
}
.dojoxLightboxContainer {
position:absolute;
top:0; left:0;
background-color:#fff;
}
.dojoxLightboxFooter {
padding-bottom:5px;
position:relative;
bottom:0;
left:0;
margin-top:8px;
color:#333;
z-index:1000;
font-size:10pt;
}
.dojoxLightboxGroupText {
color:#666; 
font-size:8pt;
}
.LightboxNext,
.LightboxPrev,
.LightboxClose {
float:right;
width:16px;
height:16px;
cursor:pointer;
}
.claro .LightboxClose,
.nihilo .LightboxClose,
.LightboxClose {
background:url('http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/image/resources/images/close.png') no-repeat center center;
}
.di_ie6 .claro .LightboxClose,
.di_ie6 .nihilo .LightboxClose,
.dj_ie6 .tundra .LightboxClose {
background:url('http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/images/close.gif') no-repeat center center;
}
.claro .LightboxNext, 
.nihilo .LightboxNext,
.LightboxNext {
background:url('http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/image/resources/images/right.png') no-repeat center center;
}
.dj_ie6 .claro .LightboxNext,
.dj_ie6 .nihilo .LightboxNext,
.dj_ie6 .tundra .LightboxNext {
background:url('http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/images/right.gif') no-repeat center center;
}
.claro .LightboxPrev,
.nihilo .LightboxPrev,
.LightboxPrev {
background:url('http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/image/resources/images/left.png') no-repeat center center;
}
.dj_ie6 .claro .LightboxPrev,
.dj_ie6 .nihilo .LightboxPrev,
.dj_ie6 .tundra .LightboxPrev {
background:url('http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/images/left.gif') no-repeat center center;
}
.soria .LightboxClose,
.soria .LightboxNext,
.soria .LightboxPrev {
width:15px;
height:15px;
background:url('chrome://interclue/content/cluecore/skins/default/sprites.png') no-repeat center center;
background-position:-60px;
}
.soria .LightboxNext {
background-position:-30px 0;
}
.soria .LightboxPrev {
background-position:0 0;
}
.dojoxLightboxText {
margin:0; padding:0; 
}

</style>

All of the imagery required comes via the CSS file -- no need to add your own styles.

The HTML and JavaScript


The first step in using any Dojo resources is adding a SCRIPT tag with a path to Dojo within the page and requiring the desired Dojo Toolkit resources:
<script>
// Parse the page upon load
djConfig = { parseOnLoad: true };
// When the DOM is ready and resources are loaded...
dojo.ready(function() {
// Create an instance
var lightbox = new dojox.image.Lightbox({ title:"My Sons", group:"My Sons", href:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDGbc_saUj2fvV1InSNkYoxqdNWMIajvVWqoENRZeGA_NKCT6s3u2yQ7A8v9P_u3DcyVO3Jx-zumfhPKR-J0UOWtuGtKSa4CK7cRkkW0Bi-ID9UWCMuYGIUkkKrbFaEDCL9LTBGXKt94SP/s1600/My+Sons+1_490x395.jpg" });
// Start it up!
lightbox.startup();
})
</script>
<!--bring in the lightbox CSS 
<link href='http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/image/resources/Lightbox.css' rel='stylesheet' type='text/css'/>-->
<!--bring in the claro theme
<link href='http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/claro/claro.css' rel='stylesheet' type='text/css'/>-->
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js" type="text/javascript"></script>
<script type="text/javascript">
// Request dependencies
dojo.require("dojox.image.Lightbox");
</script>

With parseOnLoad in place, you can add links to the page with the data-dojo-type attribute set to dojox.image.Lightbox and instance-specific options within the data-dojo-props attribute.  Here's a sample:

<div id="imageHolder">
<a href="http://bambang-wicaksono.blogspot.com/" data-dojo-type="dojox.image.Lightbox" data-dojo-props="group:'My Sons',title:'My Sons',href:'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDGbc_saUj2fvV1InSNkYoxqdNWMIajvVWqoENRZeGA_NKCT6s3u2yQ7A8v9P_u3DcyVO3Jx-zumfhPKR-J0UOWtuGtKSa4CK7cRkkW0Bi-ID9UWCMuYGIUkkKrbFaEDCL9LTBGXKt94SP/s1600/My+Sons+1_490x395.jpg'"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDGbc_saUj2fvV1InSNkYoxqdNWMIajvVWqoENRZeGA_NKCT6s3u2yQ7A8v9P_u3DcyVO3Jx-zumfhPKR-J0UOWtuGtKSa4CK7cRkkW0Bi-ID9UWCMuYGIUkkKrbFaEDCL9LTBGXKt94SP/s320/My+Sons+1_490x395.jpg" alt="My Sons" /></a>
<a href="http://template4.blogspot.com/" data-dojo-type="dojox.image.Lightbox" data-dojo-props="group:'My Sons',title:'My Sons',href:'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7s14wbE3BaXzFoSGlbxFsKlFVxvobx22yNpmqpE5-HWHZjfF_csKsGQjf3XDZn6lSmOQwIb8kK5ASIvN8kwsz0gRBxD1Jss2fEw-B-cJi01_9lEcBEqLOo1xc9wEmPfpXdiJeNypKxSzl/s1600/My+Sons+4_490x395.jpg'"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7s14wbE3BaXzFoSGlbxFsKlFVxvobx22yNpmqpE5-HWHZjfF_csKsGQjf3XDZn6lSmOQwIb8kK5ASIvN8kwsz0gRBxD1Jss2fEw-B-cJi01_9lEcBEqLOo1xc9wEmPfpXdiJeNypKxSzl/s320/My+Sons+4_490x395.jpg" alt="My Sons" /></a>
<a href="http://template4ublog.blogspot.com/" data-dojo-type="dojox.image.Lightbox" data-dojo-props="group:'My Sons',title:'My Sons',href:'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSWtLdMpealFTdSYiEdLO4cUsDdtW0s9lUHtZeixi83snZTH0SHRjzweX9me3u1qP8YRCS5c_276o1No2AEcameCF2ru-czGCtteRmRjhhdC7RogpIdTQWmu1Pur3PY-_2uYJdtnp3qsYF/s1600/My+Sons+2_490x395.jpg'"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSWtLdMpealFTdSYiEdLO4cUsDdtW0s9lUHtZeixi83snZTH0SHRjzweX9me3u1qP8YRCS5c_276o1No2AEcameCF2ru-czGCtteRmRjhhdC7RogpIdTQWmu1Pur3PY-_2uYJdtnp3qsYF/s320/My+Sons+2_490x395.jpg" alt="My Sons" /></a>
<a href="http://template4.blogspot.com/" data-dojo-type="dojox.image.Lightbox" data-dojo-props="group:'My Sons',title:'My Sons',href:'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiT1SgDEajl41O5iDF1V5Lh6VcoBKX-3uc-htELxFXdmBnf8DN4C_Y-beA2M4fYkbJBFlsml7i18GKt8KPvYqlwmu1_q87yGh3NbEzLamMyG8CUhaTV3EVzsXWKdazc8aLZJr34aaZohfJG/s1600/My+Sons+3_490x395.jpg'"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiT1SgDEajl41O5iDF1V5Lh6VcoBKX-3uc-htELxFXdmBnf8DN4C_Y-beA2M4fYkbJBFlsml7i18GKt8KPvYqlwmu1_q87yGh3NbEzLamMyG8CUhaTV3EVzsXWKdazc8aLZJr34aaZohfJG/s320/My+Sons+3_490x395.jpg" alt="My Sons" /></a>
<a href="http://template4ublog.blogspot.com/" data-dojo-type="dojox.image.Lightbox" data-dojo-props="group:'My Sons',title:'My Sons',href:'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7s14wbE3BaXzFoSGlbxFsKlFVxvobx22yNpmqpE5-HWHZjfF_csKsGQjf3XDZn6lSmOQwIb8kK5ASIvN8kwsz0gRBxD1Jss2fEw-B-cJi01_9lEcBEqLOo1xc9wEmPfpXdiJeNypKxSzl/s1600/My+Sons+4_490x395.jpg'"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7s14wbE3BaXzFoSGlbxFsKlFVxvobx22yNpmqpE5-HWHZjfF_csKsGQjf3XDZn6lSmOQwIb8kK5ASIvN8kwsz0gRBxD1Jss2fEw-B-cJi01_9lEcBEqLOo1xc9wEmPfpXdiJeNypKxSzl/s320/My+Sons+4_490x395.jpg" alt="My Sons" /></a>
</div>

Groups allow you to have images available within...groups... with next and previous buttons.  The title property provides a ...title... and the href property provides the content which should load within the lightbox. You may have any number of groups on the page.  That's all that's needed to create a simple Dojo Lightbox declaratively!

With your instance created, start adding more images:
// Add another image by using the lightbox's _attachedDialog method...
lightbox._attachedDialog.addImage({
title:"My Sons 2", 
group:"My Sons",  // Can be same group or different!
href:"MySons.jpg"
});

Regardless of declarative or programmatic implementation, you can show or hide the lightbox with the respective methods:
// Show the lightbox
lightbox.show();
// Hide the lightbox!
lightbox.hide();

As you'd expect with any Dojo Toolkit resource, dojox.image.Lightbox provides the usual onShow, onHide, and other utility methods that are helpful in customizing the Lightbox usage.

dojox.image.Lightbox and dojox.image.LightboxDialog are great resources available within Dojo's "treasure chest", DojoX. Other classes within the dojox.image namespace include Gallery, Slideshow, and Magnifier.

source article: David Walsh

Related Posts Plugin for WordPress, Blogger...

0 comments:

Post a Comment

Go
to
Top
© 2011 Deviation. WP Themes by Skatter Tech. Bloggerized by Bambang Wicaksono.
Mouse Movement to the Next Widget
 
BLOG MENU