[CB] Avatar Gallery with Categories

[Wormopolis]

Browser tested: IE and FF
placement: main footer

replaces the normal avatar section of the modify profile with a new box that has category drop downs for your entire collection of custom avatars. Avatars can also be put into multiple categories.

Selected Avatar will display in the box, and even resize if you put in dimensions. a custom URL input lets your members insert their own avatars as well, and a check button will show if the URL is valid by displaying the image.

variable keepPBDefaultAvatars lets you decide to keep the default avatars from PB as one of the categories.

code:

<script type="text/javascript">
<!--
// Avatar Gallery with categories v1.01
// By Wormopolis - [url]www.wormocodes.com[/url]
// request by rhondairv
// do not repost- keep header intact

var avCats=[ //add in Categories Here
["funny","Funny Stuff"], //catID, description
["cosmic","Oddities"],
["dog","Doggies!"],
["cat","Kittehs!"],
["smiles","Smiley Faces"],
["worms","Everyone likes Worms"] //no comma last line!
];

var avList=[
["poodle","http://www.freedigitalphotos.net/images/photos/cane.jpg","dog"], //avatar name, url, category(s) it belongs in
["blacklab","http://www.freedigitalphotos.net/images/photos/virgil_3.jpg","dog"],
["grumpydog","http://www.freedigitalphotos.net/images/photos/dog_portraits_028.JPG","dog,funny"],
["camokitteh","http://www.freedigitalphotos.net/images/photos/Camouflage_kitten.JPG","cat,funny"],
["greyNwhiteCAT","http://www.freedigitalphotos.net/images/photos/DSC_2127.jpg","cat"],
["cow","http://www.freedigitalphotos.net/images/photos/Cow0003.jpg","funny"],
["bluething","http://www.freedigitalphotos.net/images/photos/246_1.jpg","cosmic"],
["dancingGirls","http://www.freedigitalphotos.net/images/photos/28_2.jpg","cosmic,funny"],
["hookworm","http://comps.fotosearch.com/comp/ARP/ARP103/worm_~Worm.jpg","worms,funny"],
["appleworm","http://comps.fotosearch.com/comp/UNZ/UNZ216/worm-apple_~u19224929.jpg","worms"],
["gangster","http://www.33smiley.com/smiley5/baddies/14.gif","smiles"],
["package","http://www.33smiley.com/smiley/work/11.gif","smiles"] //no comma last line!
];

var keepPBDefaultAvatars=true; //set true if you want em

// NO NEED TO EDIT BELOW (unless you know what you are doing)

if (document.modifyForm) {
//capture exiting avatar data if possible
oldAvURL=document.modifyForm.avatarurl.value;
oldAvH=document.modifyForm.avatarheight.value;
oldAvW=document.modifyForm.avatarwidth.value;

// on with it...
plcholder=document.modifyForm.avatar.parentNode.parentNode.parentNode;
plcholder.style.display = plcholder.nextSibling.style.display = plcholder.nextSibling.nextSibling.style.display = plcholder.nextSibling.nextSibling.nextSibling.style.display = 'none';
avGalDv=document.createElement('div'); avGalDv.id='AVS_DIV';
avGalDv.style.width='400'; avGalDv.style.height='200';
avGalDv.style.border="#FFFFFF solid 1px"; avGalDv.style.backgroundColor="000000";
nwAvTbl=document.createElement('table'); nwAvTbl.width='100%';
nwAvTbl.insertRow(0); nwAvTbl.rows[0].insertCell(0); nwAvTbl.rows[0].insertCell(0);
nwAvTbl.rows[0].cells[0].width='50%'; nwAvTbl.rows[0].cells[1].width='50%';
nwAvTbl.rows[0].cells[0].height=nwAvTbl.rows[0].cells[1].height='120px';
nwAvTbl.rows[0].cells[0].align=nwAvTbl.rows[0].cells[1].align='center';
nwAvTbl.rows[0].cells[0].align=nwAvTbl.rows[0].cells[1].vAlign='middle';
avImg=nwAvTbl.rows[0].cells[1].appendChild(document.createElement('img'));
avImg.id="AVS_image"; avImg.src="http://s4.images.proboards.com/avatars/blank.gif";
avImg.width=avImg.height='100';
nwAvTbl.rows[0].cells[1].appendChild(document.createElement('br'));
tmpfnt=nwAvTbl.rows[0].cells[1].appendChild(document.createElement('font'));
tmpfnt.style.display='none';
tmpfnt.innerHTML="(shown at <span id='AVS_iw'>100</span>x<span id='AVS_ih'>100</span>)";
nwAvTbl.insertRow(-1); nwAvTbl.rows[1].insertCell(0); nwAvTbl.rows[1].cells[0].colSpan=2;
tmp=document.createElement('input');
tmp.id='AVS_aw'; tmp.style.width='40';
nwAvTbl.rows[1].cells[0].appendChild(document.createTextNode('Width: '));
nwAvTbl.rows[1].cells[0].appendChild(tmp);
nwAvTbl.rows[1].cells[0].appendChild(document.createTextNode(' '));
tmp=document.createElement('input');
tmp.id='AVS_ah'; tmp.style.width='40';
nwAvTbl.rows[1].cells[0].appendChild(document.createTextNode('Height: '));
nwAvTbl.rows[1].cells[0].appendChild(tmp);
tmp=document.createElement('input');
tmp.type='button'; tmp.value='check URL'; tmp.id='AVS_chk'; tmp.style.width='80';
tmp.style.marginLeft='120'; tmp.keepit='AVS_default'; tmp.onclick=function() {updateExample(this.id); };
nwAvTbl.rows[1].cells[0].appendChild(tmp);
nwAvTbl.rows[1].cells[0].appendChild(document.createElement('br'));
nwAvTbl.rows[1].cells[0].appendChild(document.createTextNode('Or input your own URL: '));
tmp=document.createElement('input');
tmp.onfocus=function() {if(this.value!='') updateExample('AVS_chk');};
tmp.id='AVS_custURL'; tmp.style.width='250';
nwAvTbl.rows[1].cells[0].appendChild(tmp);


avGalDv.appendChild(nwAvTbl);
nwrw=plcholder.parentNode.insertRow(plcholder.rowIndex);
nwcl=nwrw.insertCell(0); nwcl.colSpan=3; nwcl.align='center'; nwcl.appendChild(avGalDv);
document.getElementById('AVS_custURL').value=oldAvURL;
document.getElementById('AVS_ah').value=oldAvH;
document.getElementById('AVS_aw').value=oldAvW;

// build drop downs


function getSelector(nm) {
potentials=document.getElementById('AVS_DIV').getElementsByTagName('select');
for (ss=1; ss<potentials.length; ss++) {
if (potentials[ss].id!='AVS_'+nm) potentials[ss].style.display='none';
else potentials[ss].style.display='';
}
}
avTemplate=document.createElement('select');

catSelect=document.createElement('select');
if (keepPBDefaultAvatars) {
tmp=document.createElement('option');
tmp.value="default";
tmp.innerHTML="default PB avatars";
catSelect.appendChild(tmp);
}

// get the default avs
defAvs=avTemplate.cloneNode(true);
defAvs.id="AVS_default";
for (da=0; da<modifyForm.avatar.options.length; da++) {
tmp=document.createElement('option');
tmp.value="http://s4.images.proboards.com/avatars/"+modifyForm.avatar.options[da].value+'.gif';
tmp.innerHTML=modifyForm.avatar.options[da].value;
defAvs.appendChild(tmp);
}
if (!keepPBDefaultAvatars) defAvs.style.display='none';

function updateExample(srcid) {
if (srcid!='AVS_chk') {
document.getElementById('AVS_image').src=document.getElementById(srcid).value;
document.getElementById('AVS_chk').keepit=srcid;
} else {
if(document.getElementById('AVS_custURL').value) {
document.getElementById('AVS_image').src=document.getElementById('AVS_custURL').value;
} else {
backupplan=document.getElementById('AVS_chk').keepit;
document.getElementById('AVS_image').src=document.getElementById(backupplan).value;
}
}
tmpw=(document.getElementById('AVS_aw').value && parseInt(document.getElementById('AVS_aw').value)<=100 ? parseInt(document.getElementById('AVS_aw').value) : 100);
tmph=(document.getElementById('AVS_ah').value && parseInt(document.getElementById('AVS_ah').value)<=100 ? parseInt(document.getElementById('AVS_ah').value) : 100);
document.getElementById('AVS_image').width = document.getElementById('AVS_iw').innerHTML= tmpw;
document.getElementById('AVS_image').height = document.getElementById('AVS_ih').innerHTML = tmph;
document.getElementById('AVS_image').nextSibling.nextSibling.style.display='';
if(document.getElementById('AVS_image').src.match(/blank\.gif/)) document.getElementById('AVS_image').nextSibling.nextSibling.style.display='none';
}

updateExample('AVS_chk');

defAvs.onchange=function() {updateExample(this.id); };
defAvs.onfocus=function() {updateExample(this.id); };
nwAvTbl.rows[0].cells[0].appendChild(document.createElement('br'));
nwAvTbl.rows[0].cells[0].appendChild(document.createTextNode('Category:'));
nwAvTbl.rows[0].cells[0].appendChild(document.createElement('br'));
nwAvTbl.rows[0].cells[0].appendChild(catSelect);
nwAvTbl.rows[0].cells[0].appendChild(document.createElement('br'));
nwAvTbl.rows[0].cells[0].appendChild(document.createElement('br'));
nwAvTbl.rows[0].cells[0].appendChild(defAvs);
nwrw=nwAvTbl.insertRow(0);
nwcl=nwrw.insertCell(0); nwcl.colSpan=2; nwcl.align='center';
nwfnt=nwcl.appendChild(document.createElement('font')); nwfnt.size='3';
nwfnt.appendChild(document.createTextNode('Avatar Gallery'));

// get the rest of the categories

for (cc=0; cc<avCats.length; cc++) {
tmp=document.createElement('option');
tmp.value=avCats[cc][0];
tmp.innerHTML=avCats[cc][1];
catSelect.appendChild(tmp);
tmp2=avTemplate.cloneNode(true);
tmp2.id="AVS_"+avCats[cc][0];
tmp2.onchange=function() {updateExample(this.id);};
tmp2.onfocus=function() {updateExample(this.id);};
if (keepPBDefaultAvatars || cc>0) tmp2.style.display='none';
tmp3=document.createElement('option');
tmp3.value="http://s4.images.proboards.com/avatars/blank.gif";
tmp3.innerHTML='';
tmp2.appendChild(tmp3);
nwAvTbl.rows[1].cells[0].appendChild(tmp2);
}
catSelect.onchange=function() {getSelector(this.value);};


// create avs into assigned drop downs
for (aa=0; aa<avList.length; aa++) {
namehold=avList[aa][0];
urlhold=avList[aa][1];
cathold=avList[aa][2].split(',');
for (bb=0; bb<cathold.length; bb++) {
if (document.getElementById('AVS_'+cathold[bb])) {
tmp=document.createElement('option');
tmp.value=urlhold;
tmp.innerHTML=namehold;
document.getElementById('AVS_'+cathold[bb]).appendChild(tmp);
}
}
}

//lastly, attach function to submit event so it saves choice
function updateAv() {
document.modifyForm.avatarurl.value=document.getElementById('AVS_image').src;
document.modifyForm.avatarheight.value=document.getElementById('AVS_ah').value;
document.modifyForm.avatarwidth.value=document.getElementById('AVS_aw').value;
}

if (document.addEventListener) {
document.modifyForm.addEventListener('submit',updateAv,'true');
} else {
document.modifyForm.attachEvent('onsubmit',updateAv);
}

}




// -->
</script>