Rotating header images

A place for discussion about skinning and design. Before posting questions here you should review the documentation about creating skins.

This thread is closed to new posts. You must sign in to post in the forums.
9/2/2009 11:42:39 AM
Gravatar
Total Posts 64
Gerry Roston gerry (at) pairofdocs (dot) net

Rotating header images

It was suggested that to increase visual impact that the site should have 'rotating' header images. Basically, there would be some set of images which would appear in the header each time a page is loaded. (Or, perhaps, just the home page would have this feature.)

Does mojoPortal support this type of functionality? Is so, where should I look to learn more?

Thanks.

9/2/2009 12:39:16 PM
Gravatar
Total Posts 2239

Re: Rotating header images

You could use the alternate content panels as discussed here: http://www.mojoportal.com/morethan3contentpanels.aspx and then use a simple flash or silverlight image rotater.

Using the alternate content panels allows you place different headers on each page or not have a header at all if that is what you want to do. Check out http://acckc.org for an example (they don't rotate yet). This site just uses one alternate content panel at the top of the page.

-Joe

9/11/2009 3:25:26 PM
Gravatar
Total Posts 64
Gerry Roston gerry (at) pairofdocs (dot) net

Re: Rotating header images

I found a javascript solution:

In the <head> section, I put:

<script language="JavaScript">

var useMyImage = 0;

myimages = new Array();

myimages[0] = new Image();

myimages[0].src = "Data/Sites/1/skins/aceskin/photobar01.jpg";

myimages[1] = new Image();

myimages[1].src = "Data/Sites/1/skins/aceskin/photobar02.jpg";

myimages[2] = new Image();

myimages[2].src = "Data/Sites/1/skins/aceskin/photobar03.jpg";

myimages[3] = new Image();

myimages[3].src = "Data/Sites/1/skins/aceskin/photobar04.jpg";

 

function random_imglink(){

do {

var newImage = Math.floor(Math.random()*myimages.length);

} while (newImage == useMyImage);

useMyImage = newImage;

document.ctl01_RotatingImage.src = myimages[useMyImage].src;

}

</script>

 In the <body> tag, I added  onLoad="random_imglink();"

My image is defined like this:

<asp:Image ID="RotatingImage" runat="server" ImageUrl="photobar.jpg" />

It works.

The only ugliness is the manner in which I get the name of the image control. There is a clean/proper way, but I was unable to get anything to work.

9/11/2009 3:26:26 PM
Gravatar
Total Posts 64
Gerry Roston gerry (at) pairofdocs (dot) net

Re: Rotating header images

p.s. This only seems to work with Firefox, not with IE 8.

9/12/2009 9:42:38 AM
Gravatar
Total Posts 64
Gerry Roston gerry (at) pairofdocs (dot) net

Re: Rotating header images

Fixed the bug - now works with FF and IE:

function random_imglink(){

if (typeof random_imglink.useMyImage == 'undefined' ) {

  random_imglink.useMyImage = -1;

}

do {

  var newImage = Math.floor(Math.random()*myimages.length);

} while (newImage == random_imglink.useMyImage);  // prevents the same random number from being picked twice in a row

random_imglink.useMyImage = newImage;

var obj = document.getElementById('ctl01_RotatingImage');

obj.src = myimages[random_imglink.useMyImage].src;

}

 

9/12/2009 12:26:33 PM
Gravatar
Total Posts 18439

Re: Rotating header images

You might find this thread useful.

Hope it helps,

Joe

You must sign in to post in the forums. This thread is closed to new posts.