WoW 3D Armory Links for the Roster

GuildPortal admin site link to original post



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.

Thanks for adding the roster implementation as well; i've got both active on www.efr-wow.com now and they work spledidly!
Mottie 2012
d

Hi MorpheusDead!

Thanks for the compliment! 

I've updated the code in the original post, I've moved the majority of the code to an external file ( I actually combined it with the viewbox code ). And I fixed the talent and profession icons. I even posted on the 3D armory forums about their broken icons LOL. Hopefully the instructions are clear and concise. Please tell me if you have any problems.