Avatar Gallery

[rhondairv]

ohhh you know what i did not think of that at all. You are so right. Don't worry about the special avatar prev's then.

I have fixed so for example it looks like.... ["Bead Queen","http://i153.photobucket.com/albums/s240/EmoteCrazy/PogoHookUp/Avatars/BeadQueen.gif","Hookup"],


gonna hit the bed for now. I'll check back here when i get online tomorrow.

Again.... GREAT JOB!

[Wormopolis]

updated code, but be sure to put back in your own arrays.



<script type="text/javascript">
<!--
//  Avatar Gallery with categories  v1.01
//  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

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


[rhondairv]

Guess what wormo.........

















I FREAKIN LOVE IT!! wohooooooooooooooooooooooooooooooooooooooooooooooo tytytyty

[Wormopolis]

well thats good! If your members have any feedback, let me know about it.

[rhondairv]

I just added it to my main site and about to do a tut about how to use.

If i had any suggestion i would say maybe a way to set the avatar size. Like i like all ours to be 128x128.

But honestly, it's AWESOME!!! I hope you submit this one.

edited to say.. i see you added it.. YIPEEEEEEEEEEEEEEEEEEEEEEEEEEE

( I renamed it Wormo Avatar Gallery for me hehe)

[Wormopolis]

Proboards has a maximum avatar size of 100x100 so I tried to keep it around that. if you look through the code, you will see where it checks against 100. you could set it to 128, but Proboards will still save it as 100.

I know you have another code to let the avatar size go bigger, but I couldnt make it save a number bigger or it would return a form error.

I have another code somewhere that lets avatars save at a higher number, but it modifies the URL iutself.. and probably would end up crashing the gallery.

[rhondairv]

It's all good. I found that earlier and fixed it to our size. In my tut i just asked them to put in the size.

I was shocked i found the right place to do that actually. I had a proud moment there when i went in and it showed the 128x128 in preview. hehe

I was gonna come here and brag but figured it was so tiny i wouldn't. BUUUUUT, since ya brought it up i decided i would. lol

Thanks again... wonderful job!

[rhondairv]

Hey wormo i no longer have my uploader for avatars. I haven't needed to use it so i didn't notice but today someone asked me where it went. If i take the gallery off it's back.

[Wormopolis]

link to code for avatar uploader?

[rhondairv]

Ok, i am on my test site and doing my very best to get rid of the hack manager. I did have 2nd avatar in the reg global footer area but the uploader was in the hack manager. I just now placed then both in the footer with the uploader below the 2nd avatar code and it works now.

[Wormopolis]

yeah... Im not a big fan of the hack manager. Its a great idea but it makes troubleshooting a bear.

WC doesnt have an uploader so I didnt take it into consideration when I wrote the gallery. Without seeing how the uploader works, I wont know what needs to be modded. If I get time, I can look at your source and see perhaps.

[rhondairv]

It is there now. That's what i meant above. Once i got the uploader code out of hack manager and played with the placement of it i got it back.

Yes, i love the HM, but it does mess with things. I have a few codes that aren't working yet, but that is simply because i am using the code jumper so i can find the codes easily. So i'll be having to rework some stuff OR i have been back sliding a bit though and thinking the codes i need that i can't get to work in the code jump i'll install HM just for those. LMAO I need mental help i know!

[Wormopolis]

subdevo's code jump?

[rhondairv]

yes, but i grrrrrrrrrrrrrrrrrrrrrrr.....things work fine then one thing stops another. It's really pissing me off.

[Wormopolis]

Sub's code has 1 thing that will usually stop it from making the drop downs. comments.

when you insert a code, it NEEDS to have the comments directly after the <!--

<script type="text/javascript">
<!--
// code title comment

there also HAS to be a space between the // and the words

if you get a code like

<script type="text/javascript">
<!--
//code title comment

then it will fail

you can also use:


<script type="text/javascript">
<!--
/* code title comment
more stuff
more stuff */

but there still needs to be a space after the /*

ALL script tags must follow this format. if you have a code


<script type="text/javascript">
<!--

var blah=something


where there is no comment, it will fail the script.

or even


<script type="text/javascript">
<!--

// code title comment


will fail the script

I personally use this code (though I have made some mods to it because I noticed some issues with FF). whenever I add a code that doesnt have the format, I just add in a comment line. its valid to add in a line without violating any rules, as long as you DONT delete any header that is there. you can even add in your own comment line for all your codes so that they all have a title that you recognize


<script type="text/javascript">
<!--
// COLORSMEAR CODE

// regular colorsmear header

code...


// -->
</script

there is nothing wrong with doing that.

if you continue to have issues with jump to code, you might have to check with sub since he likes to know about those sorts of things. I submitted to him the changes I made (which you can see in my source where I edited it), but I do not know if he has written any updates. he was hard at work making it work in EVERY browser. I only really write for IE and FF so I wrote my edits to make sure it worked for both of them and I couldnt care if Safari or Opera liked my changes.