You're here » » » Dojo Lightbox

Dojo Lightbox

Diposkan oleh Unknown di Wednesday, April 06, 2011

Dojo Lightbox



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

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/AVvXsEhiSDqcIArhGSktv6VKepIJreYVFuyP26T31mz_eFagKLBPZWHBRyXa3YuykDhBaRrkdI83RmkvLyNR2sM4kQoprX6bnA2B8tIASF4oAYdhM7Hwg0Yneijlmq6eIx_lrTUR2ejB1QEKOXeQ/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/AVvXsEhiSDqcIArhGSktv6VKepIJreYVFuyP26T31mz_eFagKLBPZWHBRyXa3YuykDhBaRrkdI83RmkvLyNR2sM4kQoprX6bnA2B8tIASF4oAYdhM7Hwg0Yneijlmq6eIx_lrTUR2ejB1QEKOXeQ/s1600/My+Sons+1_490x395.jpg'"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiSDqcIArhGSktv6VKepIJreYVFuyP26T31mz_eFagKLBPZWHBRyXa3YuykDhBaRrkdI83RmkvLyNR2sM4kQoprX6bnA2B8tIASF4oAYdhM7Hwg0Yneijlmq6eIx_lrTUR2ejB1QEKOXeQ/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/AVvXsEi2d21shXmhe3-Ma_N-IxvT8kSlHITYUIRZELBd1nhVk-VxClTxCntpAkfVi5wKQjaVYvAs4wkH5nLWFyQ58p-HRVrCLlLEVFQgV5nbuS_f4XvHXn9h-Fq1ACF-gMMTWG9Y7VVPjxh0Zhz-/s1600/My+Sons+4_490x395.jpg'"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2d21shXmhe3-Ma_N-IxvT8kSlHITYUIRZELBd1nhVk-VxClTxCntpAkfVi5wKQjaVYvAs4wkH5nLWFyQ58p-HRVrCLlLEVFQgV5nbuS_f4XvHXn9h-Fq1ACF-gMMTWG9Y7VVPjxh0Zhz-/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/AVvXsEh12ssriwRz4OodcZgs8TPbS7ivHBgkWh7o4uPg6dj1NCiOEMNyhdKjsPbHBu8UegBErc1jgdvWNjeuvImIjPGrA0K2pt-R0Qn9hkUyitLkmifT-vGQ3w-87YpDw5QOK4dlg1nBImDo9_y7/s1600/My+Sons+2_490x395.jpg'"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh12ssriwRz4OodcZgs8TPbS7ivHBgkWh7o4uPg6dj1NCiOEMNyhdKjsPbHBu8UegBErc1jgdvWNjeuvImIjPGrA0K2pt-R0Qn9hkUyitLkmifT-vGQ3w-87YpDw5QOK4dlg1nBImDo9_y7/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/AVvXsEh5FPVbm-aLEsjWh0c-vv8U9GX4sCbi8pqGnkbnrn2urQsuZ76m3CF34m5Xhv6GXHNy1IzO0ILtTGP32bBbNC72qQF1ZdZpk8I6unXkjGanrDEcCi51MvPqqLnS06EuE0bUejYxKbqLcfGx/s1600/My+Sons+3_490x395.jpg'"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5FPVbm-aLEsjWh0c-vv8U9GX4sCbi8pqGnkbnrn2urQsuZ76m3CF34m5Xhv6GXHNy1IzO0ILtTGP32bBbNC72qQF1ZdZpk8I6unXkjGanrDEcCi51MvPqqLnS06EuE0bUejYxKbqLcfGx/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/AVvXsEi2d21shXmhe3-Ma_N-IxvT8kSlHITYUIRZELBd1nhVk-VxClTxCntpAkfVi5wKQjaVYvAs4wkH5nLWFyQ58p-HRVrCLlLEVFQgV5nbuS_f4XvHXn9h-Fq1ACF-gMMTWG9Y7VVPjxh0Zhz-/s1600/My+Sons+4_490x395.jpg'"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2d21shXmhe3-Ma_N-IxvT8kSlHITYUIRZELBd1nhVk-VxClTxCntpAkfVi5wKQjaVYvAs4wkH5nLWFyQ58p-HRVrCLlLEVFQgV5nbuS_f4XvHXn9h-Fq1ACF-gMMTWG9Y7VVPjxh0Zhz-/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


Posted in: ,
Related Posts Plugin for WordPress, Blogger...

Leave a Reply

BLOG MENU
Top of Page