Skin Selector Preview

[Wormopolis]

Browser Tested: IE and FF
placement: main footer

Puts a thumbnail of a screenshot image you provide next to the skin selector area that can be clicked to enlarge. Will show users what the skin looks like before they submit profile changes.

code

<script type="text/javascript">
<!--
//  skin selector preview  v1.1
//  by Wormopolis - www.wormocodes.com
//  request by ladytamara
//  Keep header intact - do not repost
//  image mod by WGS

if (pb_action=='modifyprofile' && document.modifyForm && document.modifyForm.skin) {

  var skinPreviewArray=new Array();
  skinPreviewArray[1]="http://i197.photobucket.com/albums/aa250/WORMOPOLIS/ss_default.jpg";
  skinPreviewArray[2]="http://i197.photobucket.com/albums/aa250/WORMOPOLIS/ss_blue.jpg";
  skinPreviewArray[3]="http://i197.photobucket.com/albums/aa250/WORMOPOLIS/ss_wiggly.jpg";

  //  Add in image previews to that array.  number in brackets must match id of skin.

//Preview dimensions (closeup view)
var previewWidth = 600;
var previewHeight = 267;


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

function ssPreviewChange() {
  var skinid=document.modifyForm.skin.value;
  if (document.getElementById('prevImg') && skinPreviewArray[skinid])  document.getElementById('prevImg').src=skinPreviewArray[skinid];
}
function ssPreviewLarge() {
  var sl=document.body.clientWidth/2 - 300;
  var st=document.body.clientHeight/2 + document.body.scrollTop -240;
  var lp=document.getElementById('ssLargePrev'); var sp=document.getElementById('prevImg');
  lp.style.left=sl; lp.style.top=st; lp.style.position='absolute'; lp.style.display='';
  lp.firstChild.src=sp.src;
}
  var ss=document.modifyForm.skin;
  var ssCell=ss.parentNode.parentNode;
  var ssDescCell=ssCell.nextSibling;
  nwtbl=document.createElement('table');
  nwtbl.insertRow(0);  var ssRightside=nwtbl.rows[0].insertCell(0);    var ssLeftside=nwtbl.rows[0].insertCell(0);  
  ssLeftside.appendChild(ssDescCell.firstChild);  ssLeftside.width='50%';  ssRightside.align='right';
  var prevImg=document.createElement('img');  prevImg.id="prevImg";  prevImg.width=100;  prevImg.height=(100/ previewWidth * previewHeight);
  prevImg.onclick=function() {ssPreviewLarge()};  prevImg.title="Click to enlarge";
  ssRightside.appendChild(prevImg);  
  ssDescCell.appendChild(nwtbl);
  ssPreviewChange();
  if (document.addEventListener) {
     document.modifyForm.skin.addEventListener('change',ssPreviewChange,true);
 } else {
     document.modifyForm.skin.attachEvent('onchange',ssPreviewChange);
 }
 var largePrev=document.createElement('div');
 largePrev.style.display="none";  largePrev.id='ssLargePrev';
 largePrev.onclick=function() {this.style.display='none';};  largePrev.title="Click to hide";
 var lpImg=document.createElement('img');
 lpImg.src=prevImg.src;
 lpImg.width=previewWidth;  lpImg.height=previewHeight;  
 largePrev.appendChild(lpImg);  document.body.appendChild(largePrev);
}

// -->
</script>



Preview: using it on this site (if you have an account)

[wildgoosespeeder]

I noticed Wormopolis made a Skin Selector Preview code when modifying a profile. I tried these codes for myself and they didn't work so well. I decided to mess around with the codes and here's what I came up with:

<script language="javascript">
//Skin selector preview
//by Wormopolis - http://wormocodes.proboards.com
//Keep header intact - do not repost

//Add image previews to this array. Entries should be in order what displays in the skin selector drop-down.
var skinPreviewArray =
[
   "http://i56.tinypic.com/24bt6cn.png",
   "http://i53.tinypic.com/21b3aqt.png",
   "http://i53.tinypic.com/2ia9cf4.png"
];
//Preview dimensions
var previewWidth = 600;
var previewHeight = 267;

// NO NEED TO EDIT BELOW unless you know what you are doing
function ssPreviewChange()
{
  var skinid=document.modifyForm.skin.selectedIndex;
  if(document.getElementById('prevImg') && skinPreviewArray[skinid])
  {
      document.getElementById('prevImg').src=skinPreviewArray[skinid];
  }
}
function ssPreviewLarge()
{
  var sl=document.body.clientWidth/2 - 300;
  var st=document.body.clientHeight/2 + document.body.scrollTop -240;
  var lp=document.getElementById('ssLargePrev');
  var sp=document.getElementById('prevImg');
  lp.style.left=sl;
  lp.style.top=st;
  lp.style.position='absolute';
  lp.style.display='';
  lp.firstChild.src=sp.src;
}
if(pb_action=='modifyprofile' && document.modifyForm && document.modifyForm.skin)
{
   var ss=document.modifyForm.skin;
   var ssCell=ss.parentNode.parentNode;
   var ssDescCell=ssCell.nextSibling;
   nwtbl=document.createElement('table');
   nwtbl.insertRow(0);
   var ssRightside=nwtbl.rows[0].insertCell(0);
   var ssLeftside=nwtbl.rows[0].insertCell(0);  
   ssLeftside.appendChild(ssDescCell.firstChild);
   ssLeftside.width='50%';
   ssRightside.align='right';
   var prevImg=document.createElement('img');
   prevImg.id="prevImg";
   prevImg.width=100;
   prevImg.height=Math.round((prevImg.width*previewHeight)/previewWidth);
   prevImg.onclick=function(){ssPreviewLarge()};
   prevImg.title="Click to enlarge";
   ssRightside.appendChild(prevImg);  
   ssDescCell.appendChild(nwtbl);
   ssPreviewChange();
   if(document.addEventListener)
   {
       document.modifyForm.skin.addEventListener('change',ssPreviewChange,true);
   }
   else
   {
       document.modifyForm.skin.attachEvent('onchange',ssPreviewChange);
   }
   var largePrev=document.createElement('div');
   largePrev.style.display="none";
   largePrev.id='ssLargePrev';
   largePrev.onclick=function(){this.style.display='none';};
   largePrev.title="Click to hide";
   var lpImg=document.createElement('img');
   lpImg.src=prevImg.src;
   lpImg.width=previewWidth;
   lpImg.height=previewHeight;  
   largePrev.appendChild(lpImg);
   document.body.appendChild(largePrev);
}
</script>

I changed the "skinPreviewArray", changed the "ssPreviewChange()" function to use the "selectedIndex" property, and added a dimension option which also affects the scale image you click on to see a larger preview. This code works better I think. ;D

Thanks Wormopolis for making this code!

[Wormopolis]

what didnt work about it? Does it not work for you on THIS site?

[wildgoosespeeder]

The strangest thing about it is that the original code works here but not where I tested...

[Wormopolis]

I used indexed array for the images because not all skin ids will be in order. if you delete a skin, lets say you delete skin 4, and make a new skin, it doesnt get id 4, it gets 5. if you have the array like you have it, they would have to leave a blank entry for the 4th image, and then put a 5th image in.

that goes for the selectedIndex things as well. if you have 5 skins, and you delete one, the drop down will show 4 skins, but the value of the id associated with each option doesnt necessarily correspond with the selected index value of the drop down. they would select the 4th option, but not get the id of the 4th skin, rather the 5th (since 4 was deleted)

I opted to utilize the actual skin id of the skins, because that way the admin would get used to knowing what ids they were working with. many times on PBS I notced they were trying to add in extra stuff for the CSS for skin 4.. when there wasnt a skin 4 anymore. they needed to be working on skin 5.

I have another code that puts the actual skin id number next to the skin name in the dropdown on the modifyskin panel that helps with that.

[Wormopolis]

When you tried it on your site, did it not show any images at all? did the skin ids match in the array? was there an error?q

[wildgoosespeeder]

Oh yeah, forgot about that skin id thing when skins are deleted. That probably explains why it wasn't working. The flaw of ProBoards.

My solution may be easier because once you delete the skin, just remove the element in the array that matches the removed skin. It may also help to put a comment next to each element of the array so that way you know what the skin name is (because I used TinyPic).

Also for the sized down image that appears next to the drop-down, it keeps the image scale to the actual size image specified by the dimension variable options.

[Wormopolis]

you saw that if you click the little image it brings up a bigger one right?

[wildgoosespeeder]

Yeah, it uses "previewWidth" and "previewHeight" directly while the small image next to the drop-down scales it down by using a formula indicated by these lines:

prevImg.width=100;
prevImg.height=Math.round((prevImg.width*previewHeight)/previewWidth);

[Wormopolis]

I see what you did.

I like the addition of customized preview dimensions, but I want to keep the skin id array as is for the reason I mentioned above. Having the admin get used to knowing what id they are referring to will help them in the long run so they are aware of the non-sequential id casting that proboards does.

I will add in the preview dimensions to the OP.

[wildgoosespeeder]

Heh, I wondered where my thread went to. Looks like you merged it with another thread thanks to ProBoards releasing that much needed feature.

Anyways, you may want to use Math.round because (100 * 267) / 600 = 44.5. That isn't a valid dimension (unless assignment to that property automatically changes it to an integer). Math.round will make that 44.5 to 45.

As for the array, might as well have the two versions of the code so that way users can decide which version is easiest.

[wildgoosespeeder]

Just a thought, you should submit this code to ProBoards Support (unless you did and I must have missed it or it was rejected).