Quick Question about Displaying Graphics

I am currently using a piece of Java to rotate out 3 Ad blocks. The script will run completly through the list of ads in random showing each ad 1x before resetting the order and displaying again in a random order. This has been working good for us, on our local news site Rockingham Update .com here is the current code with Ad banners

[QUOTE]

<img src=”http://www.*************************.com/300x62Banners/186x19AdvertismentsBanner.png”><br /><br />
<script type=”text/javascript”>
var ads = [
[‘http://www.*************************.com/cohenstearoom/300x167CohensTeaRoom.jpg’,
‘http://www.*************************.com/cohenstearoom/index.html’],

[‘http://www.*************************.com/DavidPriceAutoWorks/300X250DavidPriceAutoWorks.jpg’,
‘http://www.*************************.com/DavidPriceAutoWorks/index.html’],
[‘http://www.*************************.com/DebiJoyceConsulting/101810DebiJoyceAd.jpg’,
‘http://www.facebook.com/Debijoyceconsulting‘],
[‘http://www.*************************.com/dyerssheetmetal/DyersSheetMetal-Dec2nd2010.jpg’,
‘http://www.*************************.com/dyerssheetmetal/index.html’],

[‘http://www.*************************.com/fairfuneralhome/300x167FairsFuneral1.jpg’,
‘http://www.*************************.com/fairfuneralhome/FairREDIRECT.html’],
[‘http://www.*************************.com/FirstPresbyterian/1stPresbyterian300x167.jpg’,
‘http://www.*************************.com/FirstPresbyterian/1stPresbyterianREDIRECT.html’],
[‘http://www.*************************.com/TheFrontPorch/300x167TheFrontPorch.jpg’,
‘http://www.*************************.com/TheFrontPorch/index.html’],

[‘http://www.*************************.com/gavinsmightychamps/300x167GavinsMightyChamps.jpg’,
‘http://www.*************************.com/gavinsmightychamps/gavinsmightychampsREDIRECT.html’],

[‘http://www.*************************.com/HolidayInnExpress/HolidayInnExpress300x250.jpg’,
‘http://www.*************************.com/HolidayInnExpress/index.html’],

[‘http://www.*************************.com/Kameldas/kamelda300x167.jpg’,
‘http://www.*************************.com/Kameldas/KameldasREDIRECT.html’],
[‘http://www.rceno.com/RCENO/bannerads/kingsway/300x250GoSeeAMovie.jpg‘,
‘http://www.*************************.com/kingsway4/’],

[‘http://www.*************************.com/MitchellsDiscountDrug/Mitchells300x167Sept14.jpg’,
‘http://www.*************************.com/MitchellsDiscountDrug/index.html’],
[‘http://www.*************************.com/morethanyoga/300x167MTY.jpg’,
‘http://www.*************************.com/morethanyoga/MoreThanYogaREDIRECT.html’],

[‘http://www.*************************.com/pelhamtransportation/300x167PelhamTreeLightning.jpg’,
‘http://www.*************************.com/pelhamtransportation/Redirect.html’],

[‘http://www.*************************.com/gwensinteriors/300×167-Nov11-Gwens.jpg’,
‘http://www.*************************.com/gwensinteriors/index.html’],

[‘http://www.*************************.com/redrivergrill/300x167RedRiverGrill.jpg’,
‘http://www.*************************.com/redrivergrill’],
[‘http://www.*************************.com/ReggieDenneyAuto/300x167ReggieDenney.jpg’,
‘http://www.*************************.com/ReggieDenneyAuto/index.html’],
[‘http://www.*************************.com/eventcenter/300x250REC-RYD.jpg’,
‘http://www.theexhibitcenter.com‘],
[‘http://www.*************************.com/PP-RH-CC/300x167PP-RH-CC.jpg’,
‘http://www.*************************.com/PP-RH-CC/index.html’],
[‘http://www.*************************.com/RockinghamTheatre/RockinghamTheatre300x250.jpg’,
‘http://www.*************************.com/RockinghamTheatre/index.html’],
[‘http://www.*************************.com/RubyRoseTeaRoom/300x167RubyRoseTeaRoom.jpg’,
‘http://www.*************************.com/RubyRoseTeaRoom/index.html’],

[‘http://www.*************************.com/samplesandmore/300x167SamplesAndMore50Percent.jpg’,
‘http://www.*************************.com/samplesandmore/index.html’],
[‘http://www.*************************.com/TwoRiversPlaza/300×167-TwoRiversPlaza12-22-10.jpg’,
‘http://www.*************************.com/TwoRiversPlaza/index.html’]

];

// preload the images:
var adimages = [];
for ( var i = 0; i < ads.length; ++i )
{
adimages[i] = new Image();
adimages[i].src = ads[i][1];

}

var curad = 0;
var lastad = null;

var numberOfAdSpots = 3;

// random re-ordering
function scramble()
{
for ( var i = 0; i < ads.length; ++i )
{
var r = Math.floor( ads.length * Math.random() );
var temp = ads[r];
ads[r] = ads[i];
ads[i] = temp;
}
if ( lastad == ads[0] )
{
ads[0] = ads[ads.length-1];
ads[ads.length-1] = lastad;
}
}

function getnextad( )
{
ad = ads[curad];
++ curad;
if ( curad >= ads.length )
{
scramble();
curad = 0;
}
lastad = ad;
return ad;
}

function showNextSet( )
{
for ( var inum = 1; inum <= numberOfAdSpots; ++inum )
{
var link = document.getElementById(“adlink” + inum);
var image = link.getElementsByTagName(“img”)[0];
var ad = getnextad();
link.href = ad[1];
image.src = ad[0];
}
setTimeout( showNextSet, 15000 ); // 15 seconds between changes
}
onload=function(){
scramble();
showNextSet();
}
</script>
<div>
<a id=”adlink1″ href=”” target=”PopupAd”><img src=”” style=”height: 167px; width: 300px;”></a>
</div>
<br />
<div>
<a id=”adlink2″ href=”” target=”PopupAd”><img src=”” style=”height: 167px; width: 300px;”></a>
</div>
<br />
<div>
<a id=”adlink3″ href=”” target=”PopupAd”><img src=”” style=”height: 167px; width: 300px;”></a>
</div>
</center>

[/QUOTE]

What I would like to do is take advantage of the jquery options of fading the images, I found this piece of code that works as is for 1 place holder, but I would like for it to be intergrated into the abouve code so the Advertisments in the 3 placeholders have a smoother transition, while still retaining the Random Rotation and Full Cycyle before an Ad repeats…..

Here is the code with jquery I am referring to …..

[QUOTE]

<style type=”text/css”>
body {
margin:0;
padding:0;
color: #4E3D4E;
font: normal sans-serif, Arial;
background-color: #EDEDED;
width: 100%;
}

a {
outline: none;
}
</style>

<style type=”text/css”>
/* rotator in-page placement */
div.rotator {
position:relative;
height:345px;
margin-left: 0px;
display: none;
}
/* rotator css */
div.rotator ul li {
float:left;
position:absolute;
list-style: none;
}
/* rotator image style */
div.rotator ul li img {
border:none;
padding: 4px;
background: #FFF;
}
div.rotator ul li.show {
z-index:500
}
</style>

<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js”></script>

<!– By Dylan Wagstaff, [url]http://www.alohatechsupport.net[/url] –>
<script type=”text/javascript”>

function theRotator() {
//Set the opacity of all images to 0
$(‘div.rotator ul li’).css({opacity: 0.0});

//Get the first image and display it (gets set to full opacity)
$(‘div.rotator ul li:first’).css({opacity: 1.0});

//Call the rotator function to run the slideshow, 8000 = change to next image after 6 seconds

setInterval(‘rotate()’,6000);

}

function rotate() {
//Get the first image
var current = ($(‘div.rotator ul li.show’)? $(‘div.rotator ul li.show’) : $(‘div.rotator ul li:first’));

if ( current.length == 0 ) current = $(‘div.rotator ul li:first’);

//Get next image, when it reaches the end, rotate it back to the first image
var next = ((current.next().length) ? ((current.next().hasClass(‘show’)) ? $(‘div.rotator ul li:first’) :current.next()) : $(‘div.rotator ul li:first’));

//Un-comment the 3 lines below to get the images in random order

var sibs = current.siblings();
var rndNum = Math.floor(Math.random() * sibs.length );
var next = $( sibs[ rndNum ] );

//Set the fade in effect for the next image, the show class has higher z-index
next.css({opacity: 0.0})
.addClass(‘show’)
.animate({opacity: 1.0}, 1000);

//Hide the current image
current.animate({opacity: 0.0}, 1000)
.removeClass(‘show’);

};

$(document).ready(function() {
//Load the slideshow
theRotator();
$(‘div.rotator’).fadeIn(1000);
$(‘div.rotator ul li’).fadeIn(1000); // tweek for IE
});
</script>

<div class=”rotator”>
<ul>
<li class=”show”><a href=”http://www.rceno.com/RCENO/advertisers/ChambersOfCommerce/index.html”><img src=”http://www.rceno.com/RCENO/advertisers/ChambersOfCommerce/images/300×250.jpg” width=”300″ height=”250″ alt=”” /></a></li>
<li><a href=”http://www.rockinghamcountyradio.com”><img src=”http://www.rceno.com/RCENO/bannerads/WLOE/WLOEWMYN300x154.jpg” width=”300″ height=”154″ alt=”” /></a></li>
<li><a href=”http://www.*************************.com/ReggieDenneyAuto/index.html”><img src=”http://www.rceno.com/RCENO/bannerads/EdensOwnJournal/EOJ2.jpg” width=”300″ height=”250″ alt=”” /></a></li>
</ul>
</div>

[/QUOTE]

The finished code will need to be placed into a WordPress Sidebar Widget Area,, hence the reason the 2nd code doesnot have head & body tags

I appreciate any help With this, I am trying to learn what I am doing, but still find myself lost at times…..

-Rsaw3rd
www. RockinghamUpdate .com
Rockingham Update
Rockingham County Events & News Online

Also in #JavaScript _↴