How To Do This ???

rceno

01-07-2011, 03:52 PM

Hello, I am currently using a piece of Javascript to rotate out 3 Advertiser blocks. The script will run completly through the list of advertisers in a random order showing each ad once 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 Advertiser's banners.....

<img src="http://www.rockinghamcountymerchants.com/300x62Banners/186x19AdvertismentsBanner.png"><br /><br />
<script type="text/javascript">
var ads = [
['http://www.rockinghamcountymerchants.com/AJsPitStop/300x167-AJsPitStop.jpg',
'http://www.rockinghamcountymerchants.com/AJsPitStop/index.html'],
['http://www.rockinghamcountymerchants.com/AJsSweetShoppe/300x167-AJsSweetShoppe.jpg',
'http://www.rockinghamcountymerchants.com/AJsSweetShoppe/index.html'],

['http://www.rockinghamcountymerchants.com/catsmeow/300x250CatsMeow.jpg',
'http://www.rockinghamcountymerchants.com/catsmeow/index.html'],
['http://www.rockinghamcountymerchants.com/CittysPlumbing/CittysPlumbing300x250.jpg',
'http://www.rockinghamcountymerchants.com/CittysPlumbing/CittysPlumbingREDIRECT.html'],
['http://www.rockinghamcountymerchants.com/cohenstearoom/300x167CohensTeaRoom.jpg',
'http://www.rockinghamcountymerchants.com/cohenstearoom/index.html'],

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

['http://www.rceno.com/RCENO/bannerads/elizabethspizza/elizabethspizza250x250.jpg',
'http://www.rceno.com/RCENO/advertisers/elizabethspizza/index.html'],
['http://www.rockinghamcountymerchants.com/elizabeths-wentworth/300x167-ElizabethsWentworth.jpg',
'http://www.rockinghamcountymerchants.com/elizabeths-wentworth/index.html'],
['http://www.rockinghamcountymerchants.com/everydayart/300x167EverydayArt.png',
'http://www.rockinghamcountymerchants.com/everydayart/index.html'],

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

['http://www.rockinghamcountymerchants.com/gavinsmightychamps/300x167GavinsMightyChamps.jpg',
'http://www.rockinghamcountymerchants.com/gavinsmightychamps/gavinsmightychampsREDIRECT.html'],

['http://www.rockinghamcountymerchants.com/HolidayInnExpress/HolidayInnExpress300x250.jpg',
'http://www.rockinghamcountymerchants.com/HolidayInnExpress/index.html'],

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

['http://www.rockinghamcountymerchants.com/MitchellsDiscountDrug/Mitchells300x167Sept14.jpg',
'http://www.rockinghamcountymerchants.com/MitchellsDiscountDrug/index.html'],
['http://www.rockinghamcountymerchants.com/morethanyoga/300x167MTY.jpg',
'http://www.rockinghamcountymerchants.com/morethanyoga/MoreThanYogaREDIRECT.html'],

['http://www.rockinghamcountymerchants.com/pelhamtransportation/300x167PelhamTreeLightning.jpg',
'http://www.rockinghamcountymerchants.com/pelhamtransportation/Redirect.html'],

['http://www.rockinghamcountymerchants.com/gwensinteriors/300x167-Nov11-Gwens.jpg',
'http://www.rockinghamcountymerchants.com/gwensinteriors/index.html'],

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

['http://www.rockinghamcountymerchants.com/samplesandmore/300x167SamplesAndMore50Percent.jpg',
'http://www.rockinghamcountymerchants.com/samplesandmore/index.html'],
['http://www.rockinghamcountymerchants.com/scottysrugs/Scottys300x250.jpg',
'http://www.rockinghamcountymerchants.com/scottysrugs/index.html'],
['http://www.rockinghamcountymerchants.com/SeaSideMassage/300x167-Seaside-HotStone.jpg',
'http://www.rockinghamcountymerchants.com/SeaSideMassage/index.html'],

['http://www.rockinghamcountymerchants.com/ArtOfBody-TaylorMade/300x167-ArtOfBody-TaylorMadeCombined.jpg',
'http://www.rockinghamcountymerchants.com/ArtOfBody-TaylorMade/index.html'],
['http://www.rockinghamcountymerchants.com/TwoRiversPlaza/300x167-TwoRiversPlaza12-22-10.jpg',
'http://www.rockinghamcountymerchants.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>

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 .....

<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>


<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/300x250.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.rockinghamcountymerchants.com/ReggieDenneyAuto/index.html"><img src="http://www.rceno.com/RCENO/bannerads/EdensOwnJournal/EOJ2.jpg" width="300" height="250" alt="" /></a></li>
</ul>
</div>

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

SB65

01-09-2011, 10:04 AM

I think the easiest approach here is to leave your existing code pretty much as it is, and introduce the jQuery transitions into your showNextSet function.

In order to achieve the crossfade between the current and next images, I'd have two images within the adlink, and position them absolutely on top of each other:

<div>
<a id="adlink2" class="adlink" href="" target="PopupAd">
<img class="active" src="" style="height: 167px; width: 300px;">
<img class="next" style="height: 167px; width: 300px;">
</a>
</div>
<br />
<div>
<a id="adlink3" class="adlink" href="" target="PopupAd">
<img class="active" src="" style="height: 167px; width: 300px;">
<img class="next" style="height: 167px; width: 300px;">
</a>
</div>

with css:

.adlink{position:relative;height:167px;width:300px;display:block}
.adlink img{position:absolute}
.active{z-index:2;}
.next{z-index:1}

Then make your showNextSet function:

function showNextSet( )
{
for ( var inum = 1; inum <= numberOfAdSpots; ++inum )
{
var link = $('#adlink' + inum);//set the link variable
var ad = getnextad();
link.attr('href',ad[1]);//set the href on the link
link.find('.next').attr('src',ad[0]);//set new image to the src on the .next element
link.find('.active').fadeOut(600,function(){//fade the top image out, and when the fade has completed
$(this).siblings('.next').removeClass('next').addClass('active');//make the next image the active image
$(this).removeClass('active').addClass('next').show();//make the old active image the next image and unhide it
});
}
setTimeout( showNextSet, 15000 ); // 15 seconds between changes
}

Essentially we're fading out the active image so that the next image shows, then swapping the classes to make the next image the active image and the old active image the next image - then unhiding the faded image ready for the next transition.

Incidentally, your preload images script isn't right:

adimages[i].src = ads[i][1];

should be

adimages[i].src = ads[i][0];

This is relevant as without the preload the transitions may not be smooth if the next image has not already loaded.

rceno

01-09-2011, 06:36 PM

Thank You for the information, I will try this

rceno

01-09-2011, 06:50 PM

I placed the following code in to my editor and tested, I think I have made the proper adjustments, however, all I am getting is placeholders for the images with red xs....

<img src="http://www.rockinghamcountymerchants.com/300x62Banners/186x19AdvertismentsBanner.png"><br /><br />
<script type="text/javascript">
var ads = [
['http://www.rockinghamcountymerchants.com/AJsPitStop/300x167-AJsPitStop.jpg',
'http://www.rockinghamcountymerchants.com/AJsPitStop/index.html'],
['http://www.rockinghamcountymerchants.com/AJsSweetShoppe/300x167-AJsSweetShoppe.jpg',
'http://www.rockinghamcountymerchants.com/AJsSweetShoppe/index.html'],

['http://www.rockinghamcountymerchants.com/catsmeow/300x250CatsMeow.jpg',
'http://www.rockinghamcountymerchants.com/catsmeow/index.html'],
['http://www.rockinghamcountymerchants.com/CittysPlumbing/CittysPlumbing300x250.jpg',
'http://www.rockinghamcountymerchants.com/CittysPlumbing/CittysPlumbingREDIRECT.html'],
['http://www.rockinghamcountymerchants.com/cohenstearoom/300x167CohensTeaRoom.jpg',
'http://www.rockinghamcountymerchants.com/cohenstearoom/index.html'],

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

['http://www.rceno.com/RCENO/bannerads/elizabethspizza/elizabethspizza250x250.jpg',
'http://www.rceno.com/RCENO/advertisers/elizabethspizza/index.html'],
['http://www.rockinghamcountymerchants.com/elizabeths-wentworth/300x167-ElizabethsWentworth.jpg',
'http://www.rockinghamcountymerchants.com/elizabeths-wentworth/index.html'],
['http://www.rockinghamcountymerchants.com/everydayart/300x167EverydayArt.png',
'http://www.rockinghamcountymerchants.com/everydayart/index.html'],

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

['http://www.rockinghamcountymerchants.com/gavinsmightychamps/300x167GavinsMightyChamps.jpg',
'http://www.rockinghamcountymerchants.com/gavinsmightychamps/gavinsmightychampsREDIRECT.html'],

['http://www.rockinghamcountymerchants.com/HolidayInnExpress/HolidayInnExpress300x250.jpg',
'http://www.rockinghamcountymerchants.com/HolidayInnExpress/index.html'],

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

['http://www.rockinghamcountymerchants.com/MitchellsDiscountDrug/Mitchells300x167Sept14.jpg',
'http://www.rockinghamcountymerchants.com/MitchellsDiscountDrug/index.html'],
['http://www.rockinghamcountymerchants.com/morethanyoga/300x167MTY.jpg',
'http://www.rockinghamcountymerchants.com/morethanyoga/MoreThanYogaREDIRECT.html'],

['http://www.rockinghamcountymerchants.com/pelhamtransportation/300x167PelhamTreeLightning.jpg',
'http://www.rockinghamcountymerchants.com/pelhamtransportation/Redirect.html'],

['http://www.rockinghamcountymerchants.com/gwensinteriors/300x167-Nov11-Gwens.jpg',
'http://www.rockinghamcountymerchants.com/gwensinteriors/index.html'],

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

['http://www.rockinghamcountymerchants.com/samplesandmore/300x167SamplesAndMore50Percent.jpg',
'http://www.rockinghamcountymerchants.com/samplesandmore/index.html'],
['http://www.rockinghamcountymerchants.com/scottysrugs/Scottys300x250.jpg',
'http://www.rockinghamcountymerchants.com/scottysrugs/index.html'],
['http://www.rockinghamcountymerchants.com/SeaSideMassage/300x167-Seaside-HotStone.jpg',
'http://www.rockinghamcountymerchants.com/SeaSideMassage/index.html'],

['http://www.rockinghamcountymerchants.com/ArtOfBody-TaylorMade/300x167-ArtOfBody-TaylorMadeCombined.jpg',
'http://www.rockinghamcountymerchants.com/ArtOfBody-TaylorMade/index.html'],
['http://www.rockinghamcountymerchants.com/TwoRiversPlaza/300x167-TwoRiversPlaza12-22-10.jpg',
'http://www.rockinghamcountymerchants.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][0];

}

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 = $('#adlink' + inum);//set the link variable
var ad = getnextad();
link.attr('href',ad[1]);//set the href on the link
link.find('.next').attr('src',ad[0]);//set new image to the src on the .next element
link.find('.active').fadeOut(600,function(){//fade the top image out, and when the fade has completed
$(this).siblings('.next').removeClass('next').addClass('active');//make the next image the active image
$(this).removeClass('active').addClass('next').show();//make the old active image the next image and unhide it
});
}
setTimeout( showNextSet, 15000 ); // 15 seconds between changes
}
</script>

<style type="text/css">
.adlink{position:relative;height:167px;width:300px;display:block}
.adlink img{position:absolute}
.active{z-index:2;}
.next{z-index:1}
</style>

<div>
<a id="adlink2" class="adlink" href="" target="PopupAd">
<img class="active" src="" style="height: 167px; width: 300px;">
<img class="next" style="height: 167px; width: 300px;">
</a>
</div>
<br />
<div>
<a id="adlink3" class="adlink" href="" target="PopupAd">
<img class="active" src="" style="height: 167px; width: 300px;">
<img class="next" style="height: 167px; width: 300px;">
</a>
</div>

SB65

01-09-2011, 07:12 PM

Have you loaded jQuery?

EDIT: It's probably a good idea anyway to set your images with html rather than leaving the src blank so there's something there as the page loads - could be a "loading" GIF or a "Ads here" or something.

Here's a working test page (http://www.simonbattersby.com/test/test_rceno.htm) if you need it.

rceno

01-09-2011, 08:18 PM

Thank You So Very Much, I am still learning, really just beginning to learn, Thank You for your help.