Dynamic Banner - js and css

This post provides code to create a dynamic banner which sources images from Flickr.

Using a dynamic banner has several advantages:

  • The banner is assembled dynamically, it is more engaging
  • The images aren’t stored or managed on local servers
  • The banner images can be changed by modifying the images at the source
  • It would be possible to customize the source of the images for demonstrations
  • Clicking on the banner displays the image credits

This is an extension of the code listed in link above. It is running nicely with dojo 1.3.0, tested under IE7, FF11&12, and Chrome 17.

The banner is 160px high, and 1024px wide, it is overlaid with an image which includes a gradient to fade the banner images from full color to white, using transparency. The banner includes an icon for the product on the far right.

Code

#header img,#header a
{
height:160px;
overflow:hidden;
}
#gradient-overlay
{
background:transparent url(images/banner.png) no-repeat;
height:160px;
width:1024px;
position:fixed;
}
#header
{
cursor:pointer;
height:160px;
width:100%;
margin:25px;
overflow:hidden;
}
#dlgCredit div p
{
display:none;
}
#dlgCredit div p:first-of-type,
#dlgCredit div p:nth-child(2)
{
display:block;
}

This is the javascript to create the banner. The remaining code should be collected from the link above.

The image list received from flickr is accessed randomly, using the splice function. This allows each banner to be created differently. Images are added to the banner until the width exceeds the width of the gradient overlay. The image credits are place in a dialog box.

Code

function gotItems(items, request){
                        var list = dojo.byId("header");
                        if(list){
                                var span=dojo.create("span",{'id':'gradient-overlay'});
                                list.appendChild(span);
                                var width,pick,credit_text='',done=false;
                                width=span.clientWidth;
                                while (!done)
                                {
                                        index=Math.floor(Math.random()*(items.length-1));
                                        pick=items.splice(index,1);
                                        if (pick.length>0)
                                        {
                                                var item=pick[0];
                                                var image = dojo.create("img",
                                                        { "src":flickrStore.getValue(item, "imageUrlMedium"),
                                                        "title": flickrStore.getValue(item, "title"),
                                                        "alt": flickrStore.getValue(item, "title")});
                                                if ((image.width==0)||(image.width>width))
                                                {
                                                        /* Limit the width of the banner */
                                                        dojo.destroy(image);
                                                        if (image.width>width)
                                                                done=true;
                                                        /* You can also continue to see if later images will fit */
                                                }
                                                else
                                                {
                                                        width-=image.width;
                                                        list.appendChild(image);
                                                        var str=flickrStore.getValue(item,'description');
                                                        var n=str.indexOf('');
                                                        n=str.indexOf('',n+1);
                                                        var truncated=str.substr(0,n);
                                                        credit_text+='<div>'+truncated+'</div>';
                                                }
                                        }
                                        else
                                                done=true;
                                }
                                var credit=dojo.create("div",{'id':'credit'});
                                var dlgCredit=new dijit.Dialog({
                                        'id': 'dlgCredit',
                                        'content':credit_text},
                                        'credit');
                                list.setAttribute('title','Click for image credits');
                                list.onclick=function(){dlgCredit.show()};
                                list.appendChild(credit);
                        }

The HTML creates the flickrStore and sets up the header div.

HTML

<div dojoType="dojox.data.FlickrStore" jsId="flickrStore"></div>
<div id="header"></div>

This post courtesy of Lyrix, Inc