WoW 3D Armory Links for the Roster



This script will add an icon next to the next to the character's name in the World of Warcraft roster. Clicking the icon will open popup window with that character's 3D armory profile. Add the script below into a free form text/HTML content box on your roster page (It will still work in the Banner HTML or Footer HTML).

UPDATE: I've updated the code so you don't have to add as much to your site, and added a fix for the broken talent and profession icons.

** Add any of this code to the editor while it is in Raw/Script mode (upper right corner) **

Code (default options)

<script src="http://www.axiomfiles.com/Files/258012/armory-min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 addArmoryPopups();
})
</script>

Code (all options shown, at default value)

<script src="http://www.axiomfiles.com/Files/258012/armory-min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 options = {
  armoryWidth  : 250,
  armoryHeight : 400,
  popupWidth   : 350, // size of the popup window, 350 = width of wowhead tooltips
  popupHeight  : 580, // add about 180px for the extra info below the 3D image
  popupBodyCSS : "background:#000000;color:#ffffff;",
  popupLinkCSS : "color:#ffffff;text-decoration:none;",
  armoryIcon   : "http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/3darmory.png"
 }
 addArmoryPopups(options);
})
</script>

Customizing
If you are ok with the default options, then use the code (default options). If you want to modify any or all of the options, you only need to add the options you want to change from the default value (defaults seen above in the Code (all options at default value) section).  I've tried to add a few more examples below. If it is too confusing please tell me where you are having trouble, so I can both help you and improve my instructions.

*WARNING* When adding options, be sure to remove the comma from the last line of the options! Not removing it is ok in most browsers, but IE will throw a fit and spit monitor parts at you.

• armoryWidth & armoryHeight - These variables set the size of the actual armory 3D image. Change the numbers in red to match your desired size. Here is an example of how to change just the armory window size. Here is an example:
  

  <script src="http://www.axiomfiles.com/Files/258012/armory-min.js"></script>
  <script type="text/javascript">
  $(document).ready(function(){
   options = {
    armoryWidth  : 125,
    armoryHeight : 200
   }
   addArmoryPopups(options);
  })
  </script>
  

• popupWidth" & popupHeight - These variables set the size of the actual popup window. It must be at least 350 pixels wide to allow users to see the Wowhead tooltips. The height should be at least 180 pixels more in height than the "armoryHeight" to accomodate the extra information below the image. Change the numbers in red to match your desired window size. Here is an example (changing the armory size as well):
  

  <script src="http://www.axiomfiles.com/Files/258012/armory-min.js"></script>
  <script type="text/javascript">
  $(document).ready(function(){
   options = {
    armoryWidth  : 125,
    armoryHeight : 200,
    popupWidth   : 550, // size of the popup window, 350 = width of wowhead tooltips
    popupHeight  : 780  // add about 180px for the extra info below the 3D image
   }
   addArmoryPopups(options);
  })
  </script>
  

• popupBodyCSS & popupLinkCSS - These variables are added into the CSS of the popup window. You can leave these blank if you want to keep the default black text on white background. Modify the variables that contain the CSS in blue to match your site theme. You can add as much CSS as you want here.  Here is an example:
  

  <script src="http://www.axiomfiles.com/Files/258012/armory-min.js"></script>
  <script type="text/javascript">
  $(document).ready(function(){
   options = {
    popupBodyCSS : "background:#ddd;color:#000;",
    popupLinkCSS : "color:#ffcc00;text-decoration:none;"
   }
   addArmoryPopups(options);
  })
  </script>
  

  *Note* The popupLinkCSS is set to only define the "a {}" class, so it isn't set up to define the a:link, a:hover, a:active or a:visited pseudo classes separately, it adds style to them all at once.
  
  
• armoryIcon - This variable will allow you to set the icon URL (in orange) for the 3D armory that is added to the roster... because quite frankly the icon they have for the site is fugly.
  

  <script src="http://www.axiomfiles.com/Files/258012/armory-min.js"></script>
  <script type="text/javascript">
  $(document).ready(function(){
   options = {
    armoryIcon : "http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/wow-3.png"
   }
   addArmoryPopups(options);
  })
  </script>

Edit (3/12/2010): Updated to reduce the amount of code you need to add and fixed the broken talent and profession icons.

Hi Svtcolossus!

I have no idea why, but your roster has links to the WoW armory that have the server name as "Cenarius+". That seems to have broken all your armory links as well. I would definitely submit a ticket about this, but make sure you note that you have a script installed that fixes the links.

So to fix your armory links and to get the 3D armory working for your site, I had to reorder the script a little and add one line to remove the from all the links.

If anyone else out there is having a similar problem with their armory links and you notice this extra plus sign, you can use this script as well. It's not specific for any server. Also, you won't need to replace or change this script once GP fixes your links.

<script type="text/javascript">
$(document).ready(function() {

 var armoryWidth = 250; // size of the 3D armory image
 var armoryHeight = 400;
 var popupWidth = 350; // size of the popup window, 350 = width of wowhead tooltips
 var popupHeight = 580; // add about 180px for the extra info below the 3D image
 var popupBodyCSS = "background:#000000;color:#ffffff;";
 var popupLinkCSS = "color:#ffffff;text-decoration:none;";
 var threeDArmoryIcon = "http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/3darmory.png";

// ****************************
// Don't change anything below
// ****************************
 $('a[href*="wowarmory.com"]').each(function(){
     var tmp = '<img src="' + threeDArmoryIcon + '" style="cursor:pointer" title="View ' +
   $(this).html() + ' on 3D Armory" rel="' + $(this).html() + '" width="18" height="18"> ';
  $(this).before(tmp);
  $(this).attr('href', $(this).attr('href').replace(/(\+&)/,'&')); // Fix for the messed up "Cenarius+" realm link
 })
 var popupOptions = 'toolbar=0,status=0,width=' + popupWidth + ',height=' + popupHeight;
 var tmp = $('a[href*="wowarmory.com/character-sheet"]').attr('href');
 if (tmp != null) {
  var server = tmp.replace(/http:\/\//,'').split('.')[0];
  if (server == 'www') server = 'us';
  var realm = gup('r',tmp);
 }
 $('img[title*="3D Armory"]').click(function(){
  var tmp = '<style>body{' + popupBodyCSS + '} a {' + popupLinkCSS + '}</style><scr' +
   'ipt src="http://www.wowhead.com/widgets/power.js"></scr' + 'ipt><scr' + 'ipt ' +
   'src="http://www.3darmory.com/api/toon_detailed/' + server + '/' + realm + '/' + $(this).attr('rel') +
   '/' + armoryWidth + '/' + armoryHeight + '" type="text/javascript"/></scr' + 'ipt>';
  var ap = window.open('','3DArmory',popupOptions);
  ap.focus();
  ap.document.write(tmp);
 })
 function gup(name, myString) {
  name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
  var regexS = "[\\?&]"+name+"=([^&#]*)";
  var regex = new RegExp( regexS );
  var results = regex.exec( myString );
  if( results == null )
   return "";
  else
  return results[1];
 }
});
</script>

Updated this script so you don't need to add as much code to your site and replaced the broken talent and profession icons.