News Scroller using Dojo

Create a Simple News Scroller Using Dojo.

The HTML

<div id="news-feed">
 <ul>
  <li><strong style="font-size:14px;">News Item 1</strong><br>Pellentesque habitant morbi...<a href="#">Read More</a></li>
  <li><strong style="font-size:14px;">News Item 2</strong><br>Pellentesque habitant morbi...<a href="/news/2">Read More</a></li>
  <!-- more.... -->
 </ul>
</div>

The news items are placed into list items. The UL will be the element that's animated.

The CSS

#news-feed  { height:200px; width:300px; overflow:hidden; position:relative; border:1px solid #ccc; background:#eee; }
#news-feed ul { position:absolute; top:0; left:0; list-style-type:none; padding:0; margin:0; }
#news-feed ul li { min-height:180px; font-size:12px; margin:0; padding:10px; overflow:hidden; }

The absolute positioning is essential to proper animation. This example no longer requires a fixed height for each news item. Add a minimum height so only one item shows up within the scroller window at a time.

The Dojo JavaScript

<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js" type="text/javascript"></script>
<script type="text/javascript">
dojo.require('dojo.NodeList-fx');
dojo.addOnLoad(function() {
  /* settings */
  var list = dojo.query('#news-feed ul'),
    items = list.query("li"),
    showDuration = 3000,
    scrollDuration = 500,
    scrollTopDuration = 200,
    index = 0,
    interval;

  /* movement */
  var start = function() { interval = setInterval(move,showDuration); };
  var stop = function() { if(interval) clearInterval(interval); };
  var reset = function() {
      list.anim({ top: 0}, scrollTopDuration, null, start);
  };
  /* action! */
  var move = function() {
      list.anim({ top: (0 - (dojo.coords(items[++index]).t)) }, scrollDuration, null, function(){
      if(index == items.length - 1) {
        index = 0-1;
        stop();
        setTimeout(reset,showDuration);
      }
      });
  };

  /* stop and start during mouseenter, mouseleave  */
  list.onmouseenter(stop).onmouseleave(start);

  /* go! */
  start();
});
</script>

Dojo Lightbox with dojox.image.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

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/AVvXsEipmHjCkCNIbnL8OaxzYdJqJINYig-nOFxa3APMoGsidQTY6Dl_jDKAxlyqgEdTM3LwGjsYr3QbhSk19DSn6smq3HYvbyLMmOSnAD9q0377b2vUY0NEb6lNM1uVCcJQhM5hxcN-vMKKQApk/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/AVvXsEipmHjCkCNIbnL8OaxzYdJqJINYig-nOFxa3APMoGsidQTY6Dl_jDKAxlyqgEdTM3LwGjsYr3QbhSk19DSn6smq3HYvbyLMmOSnAD9q0377b2vUY0NEb6lNM1uVCcJQhM5hxcN-vMKKQApk/s1600/My+Sons+1_490x395.jpg'"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipmHjCkCNIbnL8OaxzYdJqJINYig-nOFxa3APMoGsidQTY6Dl_jDKAxlyqgEdTM3LwGjsYr3QbhSk19DSn6smq3HYvbyLMmOSnAD9q0377b2vUY0NEb6lNM1uVCcJQhM5hxcN-vMKKQApk/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/AVvXsEh65whbAWFvcj6jR5NyfLL_i8OV62tLMw1Mq2Lchuid6Z-Sk4x6fVTBKaoiRIFXzJ3gBKEmizkNGrA0ZCeKbbNxsRYomYC0J_FGBquPgVw41oa-RI6yHIT5lmzKmpn7xZT4bpUcK3mV5vXH/s1600/My+Sons+4_490x395.jpg'"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh65whbAWFvcj6jR5NyfLL_i8OV62tLMw1Mq2Lchuid6Z-Sk4x6fVTBKaoiRIFXzJ3gBKEmizkNGrA0ZCeKbbNxsRYomYC0J_FGBquPgVw41oa-RI6yHIT5lmzKmpn7xZT4bpUcK3mV5vXH/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/AVvXsEgTOfSHFuKhPTnW5R5rqYhqmJl7ram5gl7Vzss0qIFH3CFo7WJs0WxKBaBzndPxiiOxhE0xT7yHwAg8LNIdqqyp_300NA61dOXNXbWDx_gqddev8TErB9eFH6wxpSDKulNU9EJsx3WRhnpp/s1600/My+Sons+2_490x395.jpg'"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTOfSHFuKhPTnW5R5rqYhqmJl7ram5gl7Vzss0qIFH3CFo7WJs0WxKBaBzndPxiiOxhE0xT7yHwAg8LNIdqqyp_300NA61dOXNXbWDx_gqddev8TErB9eFH6wxpSDKulNU9EJsx3WRhnpp/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/AVvXsEiCSayz6SJK_r1IqiY1p7DH4rviFN7TXTlPtBKH9V3JbS2SxXc80qekcgcIT8XBbVnzzfUjNn_J00BihLhiGQWQzHwB8r-LeNyardWUzxS1Are__mlbZpBtz92kXNmBfv1gRV5Fay-PtoBO/s1600/My+Sons+3_490x395.jpg'"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCSayz6SJK_r1IqiY1p7DH4rviFN7TXTlPtBKH9V3JbS2SxXc80qekcgcIT8XBbVnzzfUjNn_J00BihLhiGQWQzHwB8r-LeNyardWUzxS1Are__mlbZpBtz92kXNmBfv1gRV5Fay-PtoBO/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/AVvXsEh65whbAWFvcj6jR5NyfLL_i8OV62tLMw1Mq2Lchuid6Z-Sk4x6fVTBKaoiRIFXzJ3gBKEmizkNGrA0ZCeKbbNxsRYomYC0J_FGBquPgVw41oa-RI6yHIT5lmzKmpn7xZT4bpUcK3mV5vXH/s1600/My+Sons+4_490x395.jpg'"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh65whbAWFvcj6jR5NyfLL_i8OV62tLMw1Mq2Lchuid6Z-Sk4x6fVTBKaoiRIFXzJ3gBKEmizkNGrA0ZCeKbbNxsRYomYC0J_FGBquPgVw41oa-RI6yHIT5lmzKmpn7xZT4bpUcK3mV5vXH/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