Image Comment Gallery

[Wormopolis]

Browsers tested: IE, FF, and Chrome
placement: board footer

this code changes how posts are displayed so you can put an image in the first post, and it puts replies as "comments" under the image from everyone. It strips all but the replier's name and avatar from the left of the comments and puts a "comment" box under all of them. the image and author of the OP is stored so when you get to next pages it puts it back at the top again.

variables let you control how big the avatars show up for OP and comments, as well as how many of these OP thread starts it stores. you can also change the "next" and "prev" page buttons to be normal or new images.


<style type="text/css">
.ICKpages {color: #DD00DD; font-weight: bold;}
</style>

<script type="text/javascript">
<!--
//  Image Comments v1.0
//  by Wormopolis - www.wormocodes.com
//  do not repost - keep header intact

var numberOfThreadsToRemember=25;
var commentBtnImg="http://i197.photobucket.com/albums/aa250/WORMOPOLIS/commentbtn.gif";

var posterAvatarDimsMax=[100,100];  //height,width
var commentAvatarDimsMax=[40,40];

var keepRegularPagespan=true;  //set false if you just want prev/next buttons

var prevCommentsImage="http://i197.photobucket.com/albums/aa250/WORMOPOLIS/previous.png";
var nextCommentsImage="http://i197.photobucket.com/albums/aa250/WORMOPOLIS/next.png";

var deleteButtonImage="http://i197.photobucket.com/albums/aa250/WORMOPOLIS/ICKdelete.gif";

//  No need to edit anything below

var pb_DOMstorage;
//global storage function written by Eton Bones
function getDOMStore(){
 pb_DOMstorage='global';
 if(window.globalStorage)return globalStorage[location.hostname];
 pb_DOMstorage='local';
 if(window.localStorage) return window.localStorage;
 pb_DOMstorage='element';

 if(document.body.addBehavior){
   var a=document.getElementById('persistie'), b;
   if(!a){
     a=document.createElement('input');
     a.className='userData'; a.style.display='none'; a.type="hidden"; a.value="";
     a.id="persistie"; a.addBehavior("#default#userData");
     document.links[0].appendChild(a);
   }
   b={storage:a,
   setItem:function(key,data){this.storage.setAttribute(key,data);this.storage.save(pb_forum);},
   getItem:function(key){this.storage.load(pb_forum);return this.storage.getAttribute(key);}}
   return b;
 }
 pb_DOMstorage='cookie';
 if (document.cookie) {
   var b={storage:document.cookie,
   setItem: function(key, val) {tmpDt=new Date(); document.cookie=val+'; expires='+tmpDt.setFullYear(tmpDt.getFullYear()+1);},
   getItem: function(key) {if (document.cookie.match(new RegExp(key+'=(.*?)(;|$)'))) {res=RegExp.$1; return res;} return null;}}
   return b;
 }
 
 return null;
}

var ICKeeper=getDOMStore();

if (ICKeeper) {
var threadListKey=ICKeeper.getItem('ICKthreadList');
if (threadListKey!=null && typeof threadListKey.value != 'undefined') threadListKey=threadListKey.value;

function checkThreadList(idnum) {
 tmptl=(threadListKey ? threadListKey.split(',') : new Array());
 for (aa=0; aa<tmptl.length; aa++) {
   if (tmptl[aa]==idnum) {
     tmptl.splice(aa,1);
     tmptl.unshift(idnum);
     break;
   }
 }
 if(tmptl[0]!=idnum) {
   if (tmptl.length>numberOfThreadsToRemember) tmptl.pop();
   tmptl.unshift(idnum);
   threadListKey=tmptl.join(',');
   ICKeeper.setItem('ICKthreadList',(threadListKey));
   return true;
 }
 threadListKey=tmptl.join(',');
 ICKeeper.setItem('ICKthreadList',(threadListKey));
 return false;
}
if (!location.href.match(/thread/) && document.postForm) {
 document.postForm.message.value='first image in post will be redisplayed.  you can put additonal stuff into post, but it wont be saved on concurrent pages.';
 document.postForm.message.onclick=function() {document.postForm.message.value='';  document.postForm.message.onclick='';}
}
if (pb_action=='display') {
 //if on first/only page, grab image url from first post
 var keepThreadTable2;
 for (td=document.getElementsByTagName('td'), tt=0; tt<td.length; tt++) {
   if (td[tt].width=='80%' && td[tt].className.match(/windowbg/) && td[tt].vAlign=='top') {
     var postStuff=td[tt].getElementsByTagName('table')[0].rows[1].cells[0];
     postStuff.getElementsByTagName('hr')[0].style.display='none';
     var picTitle=td[tt].getElementsByTagName('table')[0].rows[0].cells[1].firstChild;
     picTitle.innerHTML=picTitle.innerHTML.replace(/re:\s/i,'');
     var cntrlbtns=td[tt].getElementsByTagName('table')[0].rows[0].cells[2].firstChild;
     cntrlbtns=cntrlbtns.getElementsByTagName('a');
     if (cntrlbtns)         cntrlbtns=cntrlbtns[cntrlbtns.length-1];
     var delBtn;
     if (cntrlbtns && cntrlbtns.href.match(/deletepost/)) {
       delBtn=cntrlbtns;  delBtn.innerHTML='<img src="'+ deleteButtonImage +'" border="0">';
       delBtn.style.float=delBtn.style.cssFloat='right';
     }
     var thrdID=(location.href.match(/thread=(\d+)($|&)/) ? RegExp.$1 : 'null')
     var authStuff=td[tt].previousSibling.getElementsByTagName('a')[1].nextSibling.innerHTML;
     var avStuff=td[tt].previousSibling.getElementsByTagName('center')[0].firstChild;
     var postImage=postStuff.getElementsByTagName('img')[0];
     if (postImage) postStuff.getElementsByTagName('img')[0].style.display='none';      
     var threadTable=td[tt].parentNode.parentNode.parentNode;
     if (!keepThreadTable2) keepThreadTable2=threadTable;
     while (threadTable.className!='bordercolor') threadTable=threadTable.parentNode;
     var keepThreadTable=threadTable;
     var QRformsave;
     while (threadTable && threadTable.style) {
       if (threadTable.getElementsByTagName('form')[0]) QRformsave=threadTable.getElementsByTagName('form')[0];
       threadTable.style.display='none';
       threadTable=threadTable.nextSibling;
     }
     var nwTable=document.createElement('table');
     nwTable.className='bordercolor';  nwTable.cellSpacing='1'; nwTable.width='100%';
     nwTable.insertRow(0);

     if (location.href.match(/page=1($|&|#)/) || !location.href.match(/page=/)){
         checkThreadList(thrdID);
         ICKeeper.setItem('ICKthread_'+thrdID,(postImage.src + '&' + escape(authStuff) + '&' + (avStuff.src ? avStuff.src : '')));
     }
     var existICKthread=ICKeeper.getItem('ICKthread_'+thrdID);
     if (existICKthread) {
       if (existICKthread!=null && typeof existICKthread.value != 'undefined') existICKthread=existICKthread.value;
       tmp=existICKthread.split('&');
       authStuff=(tmp[1] ? unescape(tmp[1]) : authStuff);
       avStuff=(tmp[2] ? document.createElement('img') : document.createElement('p'));
       avStuff.src=tmp[2];
       if (avStuff.height>posterAvatarDimsMax[0]) {avStuff.width=(avStuff.width * posterAvatarDimsMax[0] / avStuff.height); avStuff.height=posterAvatarDimsMax[0];}
       if (avStuff.width>posterAvatarDimsMax[1]) {avStuff.height=(avStuff.height* posterAvatarDimsMax[1] / avStuff.width); avStuff.width=posterAvatarDimsMax[1];}
       postImage=document.createElement('img');  postImage.src=tmp[0];
     }
     var contribImage=nwTable.rows[0].insertCell(0);
     var contribAuth=nwTable.rows[0].insertCell(0);
     contribImage.className='windowbg';  contribImage.width='90%'; contribImage.align='center';
     if (delBtn) {
       contribImage.appendChild(delBtn);
       contribImage.appendChild(document.createElement('br'));
     }
     contribImage.appendChild(picTitle);
     contribImage.appendChild(document.createElement('br'));
     contribImage.appendChild(postImage);
     if (location.href.match(/page=1($|&|#)/) || !location.href.match(/page=/)){
       contribImage.appendChild(document.createElement('br'));
       nwspn=document.createElement('span'); nwspn.innerHTML=postStuff.innerHTML;
       contribImage.appendChild(nwspn);
     }
     contribAuth.className='windowbg'; contribAuth.align='center'; contribAuth.vAlign='middle';
     tmpspn=document.createElement('span'); tmpspn.innerHTML=authStuff;
     contribAuth.appendChild(avStuff);
     contribAuth.appendChild(document.createElement('br'));
     contribAuth.appendChild(tmpspn);

     break;
   }
 }
 if (keepThreadTable2.rows[keepThreadTable2.rows.length -1].cells[0].innerHTML.match(/admin functions/i)) {
   nwTable.insertRow(0);
   nwTable.rows[0].appendChild(keepThreadTable2.rows[keepThreadTable2.rows.length -1].cells[0]);
 }
 var commentRowTitle=nwTable.insertRow(-1);
 var commentTitleCell=commentRowTitle.insertCell(0);
 commentTitleCell.className='windowbg2';  commentTitleCell.colSpan=2;
 commtable=document.createElement('table');  commtable.insertRow(0);  commtable.width='100%';
 commtable.rows[0].insertCell(0);  commtable.rows[0].insertCell(0);  commtable.rows[0].insertCell(0);
 commtable.rows[0].cells[0].width=commtable.rows[0].cells[2].width='30%';
 commtable.rows[0].cells[0].align='left';  commtable.rows[0].cells[0].vAlign='middle';
 commtable.rows[0].cells[1].align='center';  commtable.rows[0].cells[1].vAlign='middle';
 commtable.rows[0].cells[2].align='right';  commtable.rows[0].cells[2].vAlign='middle';
 commtable.rows[0].cells[1].innerHTML=" Comments:";  commtable.rows[0].cells[1].style.fontSize='18';
 commentTitleCell.appendChild(commtable);
 if (!keepRegularPagespan) {
   var chkForOtherPages=keepThreadTable2.rows[0].cells[0].getElementsByTagName('a');
   for (cc=0; cc<chkForOtherPages.length; cc++) {
     if (chkForOtherPages[cc].innerHTML.match(/«/)) {
       nwimg=document.createElement('img'); nwimg.border=0; nwimg.src=prevCommentsImage;
       nwimg.title='Previous Comments';
       chkForOtherPages[cc].replaceChild(nwimg, chkForOtherPages[cc].firstChild);
       commtable.rows[0].cells[0].appendChild(chkForOtherPages[cc]);
     }
     if (chkForOtherPages[cc].innerHTML.match(/»/)) {
       nwimg=document.createElement('img'); nwimg.border=0; nwimg.src=nextCommentsImage;
       nwimg.title='More Comments';
       chkForOtherPages[cc].replaceChild(nwimg, chkForOtherPages[cc].firstChild);
       commtable.rows[0].cells[2].appendChild(chkForOtherPages[cc]);
     }
   }
 } else {
   var OLDpagespan=keepThreadTable2.rows[0].cells[0].getElementsByTagName('font')[0];
   var ICKpagespan=document.createElement('font');
   if (OLDpagespan)  {
     ICKpagespan.innerHTML = OLDpagespan.innerHTML;
     ICKpagespan.className='ICKpages';
     commtable.rows[0].cells[0].appendChild(ICKpagespan);
   }
 }
 keepThreadTable.parentNode.insertBefore(nwTable, keepThreadTable);

 cr=(location.href.match(/page=1($|&|#)/) || !location.href.match(/page=/)) ? 3 : 2;
 while (keepThreadTable2.rows[cr].cells.length>1) {
     workingCell=keepThreadTable2.rows[cr].cells[1];
     postStuff=workingCell.getElementsByTagName('table')[0].rows[1].cells[0];
     postStuff.getElementsByTagName('hr')[0].style.display='none';
     authStuff=workingCell.previousSibling.getElementsByTagName('a')[1].nextSibling.innerHTML;
     var cntrlbtns=workingCell.getElementsByTagName('table')[0].rows[0].cells[2].firstChild;
     cntrlbtns=cntrlbtns.getElementsByTagName('a');
     if (cntrlbtns)         cntrlbtns=cntrlbtns[cntrlbtns.length-1];
     var delBtn;
     if (cntrlbtns && cntrlbtns.href.match(/deletepost/)) {
       delBtn=cntrlbtns;
       delBtn.href=delBtn.href.replace(/post/,'comment');
      delBtn.innerHTML='<img src="'+ deleteButtonImage +'" border="0">';
       delBtn.style.float=delBtn.style.cssFloat='right';
     }
     avStuff=workingCell.previousSibling.getElementsByTagName('center')[0].firstChild;
     nwAv=document.createElement('img');
     nwAv.onload=function() { if (this.height>commentAvatarDimsMax[0]) {this.width=(this.width * commentAvatarDimsMax[0] / this.height); this.height=commentAvatarDimsMax[0];}   if (this.width>commentAvatarDimsMax[1]) {this.height=(this.height* commentAvatarDimsMax[1] / this.width); this.width=commentAvatarDimsMax[1];} };
     nwAv.src=avStuff.src;
     var commrow=nwTable.insertRow(-1);
     var commCell=commrow.insertCell(0);
     var commAuth=commrow.insertCell(0);
     commCell.className='windowbg';  commCell.width='90%'; commCell.align='center';
     if (delBtn) {
       commCell.appendChild(delBtn);
       commCell.appendChild(document.createElement('br'));
     }
     commCell.innerHTML+=postStuff.innerHTML;
     commAuth.className='windowbg'; commAuth.align='center'; commAuth.vAlign='middle';
     tmpspn=document.createElement('span'); tmpspn.innerHTML=authStuff;
     avStuff=nwAv;
     commAuth.appendChild(avStuff);
     commAuth.appendChild(document.createElement('br'));
     commAuth.appendChild(tmpspn);
     cr++
 }

 var commentFormRow=nwTable.insertRow(-1);
 var commentFormCell=commentFormRow.insertCell(0);
 commentFormCell.className='windowbg2';  commentFormCell.colSpan=2;
 commentFormCell.align='center';
 QRformsave.lastChild.style.display='none';
 QRformsave.lastChild.previousSibling.previousSibling.style.display='none';
 QRformsave.message.rows=1;
 commentBtn=document.createElement('input'); commentBtn.type='image';
 commentBtn.src=commentBtnImg;
 QRformsave.appendChild(commentBtn);
 commentFormCell.appendChild(QRformsave);

}

}


//-->
</script>