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.4
//  By Wormopolis - www.wormocodes.com
//  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

var defaultAvatarChoice="http://www.wpclipart.com/sign_language/thumbs_up.png";

//  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=defaultAvatarChoice;
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.style.color="#FFFFFF";
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;
nwAvTbl.rows[1].cells[0].style.color="FFFFFF";
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);
lstrow=nwAvTbl.insertRow(-1);  lstrow.insertCell(0);
lstrow.cells[0].colSpan=2;  lstrow.cells[0].style.color="FFFFFF";
tmp=document.createElement('input');
tmp.type='checkbox'; tmp.id='AVS_none';
tmp.style.marginLeft='120';
nwAvTbl.rows[1].cells[0].appendChild(tmp);
nwAvTbl.rows[1].cells[0].appendChild(document.createTextNode('Or check here if you dont want an avatar.'));



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);
}
nwAvTbl.rows[1].cells[0].appendChild(defAvs);
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=defaultAvatarChoice;
 }
}
tmpw=(document.getElementById('AVS_aw').value && parseInt(document.getElementById('AVS_aw').value)<=128 ? parseInt(document.getElementById('AVS_aw').value) : 100);
tmph=(document.getElementById('AVS_ah').value && parseInt(document.getElementById('AVS_ah').value)<=128 ? 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.style.color="#FFFFFF";
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() {
 if (!document.getElementById('AVS_none').checked) {
   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;
 } else {
   document.modifyForm.avatarurl.value = document.modifyForm.avatarheight.value = document.modifyForm.avatarwidth.value = '';
 }
}

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

}

// -->
</script>


Preview: using it on this site currently.

[Wormopolis]

version 1.2: bug fix when default category was turned off and user didnt have an avatar already that it stopped all dropdown from appearing.

[Wormopolis]

Version 1.4: added in ability to select no avatar. added in a default avatar image variable.

[rinshi]

Hello! I'm having a problem with this feature. It works just fine for me as the admin, but not for any of my members. I'm not very proficient with coding (it was hard enough to figure out how to do the custom categories and get all of the custom avatars working for me), so I have no idea why this might be. As I said it works fine for me, but all my members see is a black box that has the width, height, and URL inputs and the 'check URL' button in it. There are no dropdown menus, nor is the Avatar Gallery title visible. Any assistance you could offer would be greatly appreciated.

[Wormopolis]

have any other codes that affect Avatar? site URL?

[Wormopolis]

and does it come up for you when you try to change your avatar on THIS site?

[rinshi]

It's the only code I'm using, so I don't think there's anything that is conflicting with it. And yes, it does work for me on this site, although most of the picture links seem broken. Thank you for your help!

[Wormopolis]

yeah I never really set up a folder to house all my example avatars. it was mainly to showcae the code. I will take a look.


EDIT: I need a URL to take that look

[rinshi]

The URL of my forum? It's www.otakuhighdelinquents.proboards.com I apologize for being such a newb!

[Wormopolis]

save your 2 arrays in notepad, and then get the current version of this code from the first post in this thread. you actually have a bugged version.

Im guessing that was on PBS?

[rinshi]

Oh, ok, thanks! I'll let you know how it works!

[rinshi]

Awesome, it worked! Thank you so much! Yes, I did grab the old code off of PBS. Guess that's what I get for not checking the version number *forehead slap* Thanks again!

[Wormopolis]

I might just remove it from PBS... I dont know if I feel like updating the one there.