Front Page Banner

[bman]

I really like the front page banner, where it shows new things and it automatically changes, or you have the choice to change it. I was wondering how it was done. I know there is a way to do that with flash, but is that how this site what done? If not, how did you do it, I'd like to implement something like that on my site.

[tokenuser]

I really like the front page banner, where it shows new things and it automatically changes, or you have the choice to change it. I was wondering how it was done. I know there is a way to do that with flash, but is that how this site what done? If not, how did you do it, I'd like to implement something like that on my site.Its javascript ... and its plain text. Want see how its done? Save the page and open it in a text browser (or jsut display source from your favourite browser).

Its a good idea, and removes any reliance on needing the appropriate flash plugin. It does assume that you have javascript enabled though.

[bman]

Is it this code

"

<div class="shows">
<div class="promos">
<div class="the_promo">
<ul id="promo_menu">
<li id="promo_23" class="selected">1</li>

<li id="promo_22" >2</li>
<li id="promo_21" >3</li>
<li id="promo_16" >4</li>
</ul>
<a href="/webdrifter/macha/" id="promo_image_23" class="promo" ><img src="http://revision3.com/static/images/cms/promos/promo_webdrifter19_012407.jpg" alt="Sample Promo" width="544" height="325" /></a>
<a href="/diggreel/dois/" id="promo_image_22" class="promo" style="display: none;"><img src="http://revision3.com/static/images/cms/promos/promo_diggreel_012407.jpg" alt="Sample Promo" width="544" height="325" /></a>
<a href="http://revision3.com/blog/2008/01/22/revision3-covers-the-crunchies" id="promo_image_21" class="promo" style="display: none;"><img src="http://revision3.com/static/images/cms/promos/promo_crunchies.jpg" alt="Sample Promo" width="544" height="325" /></a>

<a href="/blog/2008/01/18/revision3s-stunning-new-website-unveiled" id="promo_image_16" class="promo" style="display: none;"><img src="http://revision3.com/static/images/cms/promos/promo5_rev3launch.jpg" alt="Sample Promo" width="544" height="325" /></a>
<a href="/diggnation/2008-01-17acidburn/" id="promo_image_19" class="promo" style="display: none;"><img src="http://revision3.com/static/images/cms/promos/promo_diggnation_012108.jpg" alt="Sample Promo" width="544" height="325" /></a>
<a href="/tekzilla/macworld2k8" id="promo_image_20" class="promo" style="display: none;"><img src="http://revision3.com/static/images/cms/promos/promo_tekzilla_012108.jpg" alt="Sample Promo" width="544" height="325" /></a>
<a href="/diggreel" id="promo_image_17" class="promo" style="display: none;"><img src="http://revision3.com/static/images/cms/promos/promo0_black.jpg" alt="Sample Promo" width="544" height="325" /></a>
<a href="/diggnation" id="promo_image_13" class="promo" style="display: none;"><img src="http://revision3.com/static/images/cms/promos/promo1_diggnation.jpg" alt="Sample Promo" width="544" height="325" /></a>
<a href="/tekzilla" id="promo_image_15" class="promo" style="display: none;"><img src="http://revision3.com/static/images/cms/promos/promo2_tekzilla.jpg" alt="Sample Promo" width="544" height="325" /></a>
<a href="/ifanboy" id="promo_image_12" class="promo" style="display: none;"><img src="http://revision3.com/static/images/cms/promos/promo4_ifanboy.jpg" alt="Sample Promo" width="544" height="325" /></a>
<a href="/trs" id="promo_image_14" class="promo" style="display: none;"><img src="http://revision3.com/static/images/cms/promos/promo3_trs.jpg" alt="Sample Promo" width="544" height="325" /></a>
</div>

</div>
"

[tokenuser]

Thats part of it. Notice the "display: hide" tags? All the promos EXCEPT the one being shown have it.

Look for the HomepagePromo() fnction. It is called from the included file:

http://revision3.com/wp-content/themes/revision3/js/navigation.js

Sorry - not going to reverse engineer the entire site for you, but those are some breadcrumbs that might help you a little. I need some sleep.

[bman]

If I wanted to search google for a tutorial on how to create something like that, what exactly should I search for?

[nextgenxbox]

"Javascript image slider" maybe?