Sorry if this is in the wrong place. Feel free to move it but since this seems to typically involve JavaScript I thought it matched...
I have a 1,080px by 270px area at the top of our site/blog/forum that i use to randomly display images linked to our blog posts. Not for actual 3rd party ads or anything.
CURRENTLY I have it divided into 4 equal square divs 270px each. Then each one has a different ad zone assigned. I have purchased an expensive ad server subscription to push the ads randomly to each of the squares each time a page is loaded. I have it setup to never display the same ad at the same time obviously. BUT, the biggest reason I paid an adserver was because every 10 page loads or so I like it to display one large/wide banner across then entire thing. I do this by slicing the one wide image up into 4 via photoshop and then assigning each square of the image into zone 1, zone 2, zone 3, zone 4 and then using a companion restriction so that if one of the images pop up it automatically loads the other 3 matching ones into their zones giving me one wide banner image.
I think this is really cool but it's very costly each month and a pain in the butt. Is there any easier way to get this same type functionality but without having to pay for an adserver since I'm not really serving 'ads'?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<style type="text/css">
/*<![CDATA[*/
.images {
position:absolute;z-Index:101;left:100px;top:100px;width:400px;height:300px;border:solid red 1px;
}
.images IMG {
width:200px;height:150px;float:left;border-Width:0px;
}
.images .large {
position:absolute;z-Index:101;left:0px;top:0px;width:400px;height:300px;border:solid red 1px;
}
/*]]>*/
</style></head>
<body>
<div class="images" id="tst" >
<a><img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="img" /></a>
<a><img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg" alt="img" /></a>
<a><img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg" alt="img" /></a>
<a><img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt8.jpg" alt="img" /></a>
</div>
<script type="text/javascript">
/*<![CDATA[*/
var zxcImageRandom={
init:function(o){
var id=o.ID,ary=o.ImageArray,lary=o.LargeImageArray,f=o.LargeFrequency,days=o.DaysPersistence,days=typeof(days)=='number'?days:-1,obj=document.getElementById(id),imgs=obj.getElementsByTagName('IMG'),lst=this.cookie(id+'='),use,a,img,z0=0;
f=Math.floor(Math.random()*f);
use=this.shuffle(f!=0?ary:lary);
while (use.length>1&&use[0][0].substring(use[0][0].lastIndexOf('/')+1)==lst.substring(lst.lastIndexOf('/')+1)){
use=this.shuffle(use);
}
if (f!=0){
for (;z0<imgs.length;z0++){
a=use[z0%use.length];
imgs[z0].src=a[0];
if (a[1]){
imgs[z0].title=a[1];
}
if (a[2]){
imgs[z0].parentNode.href=a[2];
}
}
document.cookie=id+'='+use[0][0]+';'+'expires='+(new Date(new Date().getTime()+days*86400000).toGMTString())+';path=/';
}
else {
img=document.createElement('IMG');
img.src=use[0][0];
img.className='large';
a=document.createElement('A');
if (a[1]){
img.title=a[1];
}
if (a[2]){
a.href=a[2];
}
a.appendChild(img);
obj.appendChild(a);
}
},
cookie:function(nme){
var re=new RegExp(nme+'[^;]+','i');
if (document.cookie.match(re)){
return document.cookie.match(re)[0].split("=")[1];
}
return null;
},
shuffle:function(ary){
for (var r,t,z0=0;z0<ary.length;z0++){
r=Math.floor(Math.random()*ary.length);
t=ary[z0];
ary[z0]=ary[r];
ary[r]=t;
}
return ary;
}
}
zxcImageRandom.init({
ID:'tst', // the unique ID name of the carousel parent DIV. (string)
ImageArray:[ // an array of arrays defining the images SRCs, titles and HREFs. (array)
// field 0 = the URL of the image.
// field 1 = the image title.
// field 2 = the image link href.
// field 3 = (optional) the parameter to pass to the function.
['http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg','Egypt 5','#'],
['http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg','Egypt 6','#'],
['http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg','Egypt 7','#'],
['http://www.vicsjavascripts.org.uk/StdImages/Egypt8.jpg','Egypt 8','#'],
['http://www.vicsjavascripts.org.uk/StdImages/Egypt9.jpg','Egypt 9','#']
],
LargeImageArray:[ // an array of arrays defining the images SRCs, titles and HREFs. (array)
['http://www.vicsjavascripts.org.uk/StdImages/WinterPalace.jpg','Winter Palace','#'],
['http://www.vicsjavascripts.org.uk/StdImages/Egypt10.jpg','Egypt 10','#']
],
LargeFrequency:10, // the frequency to show the large image. (number)
DaysPersistence:1 //(optional) number = the number of days to remember the last image. (number, default = -1 = no persistence)
});
/*]]>*/
</script>
</body>
</html>
Hey awesome! Thanks so much as this looks like just what I need. Only problem... I tried pasting it onto a fresh blank html page but the images don't seem to rotate. They just stay stationary with the same images on each refresh. Any ideas?
Sweet! Thank you so much! I donate often to operation smile (US at least, not sure it will take my cc info etc for the uk?) but I'd be glad to make an additional contribution for your help! Awesome!
Reply With Quote
Bookmarks