Sign Up! Login: Password: New User? Forgot? Support
Top Mods!
Wowhead Search
by sonofsamedi
Digital Clock
by Wolfar15
Admin Forums
Welcome to the GuildPortal Help Community! These forums are for admin-to-admin help.
Available Forums
Forums : Pimp My Site! > WoW 3D Armory View Box
Mottie (MVP) 5/24/2009 12:35 PM EST : WoW 3D Armory View Box
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

How to made a WoW 3D Armory viewbox

I thought it would be nice to have a content box that would show the guild leader, officers or class leaders using the 3D armory. This box will let you click on the icons across the top and update the content below. You can pick any icons you want, I just happened to use the class icons.

Below the selection icons, is the character name. The asterisk following allows you to toggle viewing the character details below (if you set the script to show this information).

Check it out on the Help-Site Warcraft tab.

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

<style type="text/css">
#myArmory { margin: 0 auto; text-align: center; }
#charName a { font-size:120%; font-weight:bold; color:#ffcc00; }
#charTitle { font-size:110%; color:#dddddd; }
.toon_layer {display:none;}
.toon_layer object, .charBoxBar { outline: 0; }
</style>
<div id="myArmory"></div>
<script src="http://www.wowhead.com/widgets/power.js"></script>
<script src="http://www.axiomfiles.com/Files/258012/armory-min.js" type="text/javascript"></script>
<script type="text/javascript">
var char = [];
// Add more characters as follows
// char.push(['NAME','TITLE','3D ARMORY INFO','IMAGE OR TEXT LINK']);


char.push(['Wubie','Guild Leader','us/durotan/wubie','<img src="http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/shaman.png">']);
char.push(['Mottie','Silly Priest','us/durotan/mottie','<img src="http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/priest.png">']);
char.push(['Motty','Officer','us/durotan/motty','<img src="http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/druid.png">']);

$('#myArmory').armory(char);
</script>

Customizing
  • You can modify the text color of the character name and title by modifying the accompanying CSS
    #charName a { font-size:120%; font-weight:bold; color:#ffcc00; }
    #charTitle { font-size:110%; color:#dddddd; }
    The character name is a link, so if you want it to change colors while hovering over it, add another line to the CSS as follows:
    #charName a:hover { color:#ffffff; }
  • The size of the 3D character can be adjusted by modifying the following variables in the script. Size is in pixels. You'll need to modify the last line of the code as follows (make sure the last line of the options doesn't have a comma):
    options = {
     charHeight : 400,
     charWidth : 200
    };
    $('#myArmory').armory(char,options);
  • When hovering over the character selection icon a tooltip will popup, the next variable will set the width of the tooltip that pops up. Size is in pixels.
    options = {
      charTooltipWidth : 150
    };
    $('#myArmory').armory(char,options);
  • The 3D armory will include detailed information about the character. If you look at the bottom of the screenshot above you will see the character level, race, class, guild name, talent specs (yes they are all zero LOL), professions and a link to all gear that is equipped.

    If you want to include this information, set the "charDetailedInfo" variable to true. The second variable "charDetailedInfoMinimized" will hide this information initially, and if the user clicks on the asterisk next to the character name, the information window will display/hide this detailed information. Here is how to include all of the options for your armory.
    options = {
     charHeight : 400,
     charWidth : 200,
     charTooltipWidth : 150,
     charDetailedInfo : true,
     charDetailedInfoMinimized : false
    };
    $('#myArmory').armory(char,options);
  • Adding the list of characters to show is done by following this format
    char.push(['NAME','TITLE','3D ARMORY INFO','IMAGE OR TEXT LINK']);
    • NAME = Character Name to display
    • TITLE = Add a title for the character: "Guild Leader", "Class Leader", etc.
    • 3D ARMORY INFO = information used to specify which character 3D armory needs to load. It is broken down as follows: "region/server/name", note each is separated by a slash.

      Example: "us/durotan/wubie" = "US" region, "Durotan" server and character named "Wubie".

      This information is not case sensitive!
    • IMAGE OR TEXT LINK = This is the icon or even text you click on to switch the character being viewed. If you use text, be sure to add a separator like a comma or a pipe "|" (shift-\).
Edit (5/24/2009): Updated to work with IE
Edit (1/7/2010): Updated to work with new tooltips.
Edit (3/11/2010): Modified the code to reduce the amount of coding you need to add and I added a bit of code to replace broken talent and profession icons. I also added the wowhead script to the code.
Edit (3/12/2010): Added CSS to remove the outline from around the 3D viewer when you rotate your character.
TopBottom

Maztex (New Admin) 5/24/2009 2:09 PM EST : RE: WoW 3D Armory View Box
Maztex
Posts: 20
Becoming Adept!

great idea, i realy like it !  i have it set up but the toon picture does not generate i just get a white box. not sure if this is a IE problem or what.
TopBottom

Mottie (MVP) 5/24/2009 5:38 PM EST : RE: WoW 3D Armory View Box
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

Hi Maztex!

Oops, I had to modify the script a bit to work with IE.... it should work now.
TopBottom

Maztex (New Admin) 5/24/2009 6:55 PM EST : RE: WoW 3D Armory View Box
Maztex
Posts: 20
Becoming Adept!

That did it.  you are the man !
TopBottom

ferdy30 (New Admin) 8/12/2009 12:57 AM EST : RE: WoW 3D Armory View Box

ferdy30
Posts: 35
Becoming Adept!

I was trying to use this for my guild website...right now I am having one problem with...how do you get the icon that you click on to work...i have uploaded an icon into photobucket but the file is a jpg and doesnt work.


thanks
TopBottom

Mottie (MVP) 8/12/2009 3:05 PM EST : RE: WoW 3D Armory View Box
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

Hi ferdy30!

The image file type doesn't matter, are you sure the <img> tag is set up correctly and using quotes around the src (in red) and single quotes around the entire thing (in blue)...
char.push(['Wubie','Guild Leader','us/durotan/wubie','<img src="http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/shaman.png">']);
TopBottom

ferdy30 (New Admin) 8/13/2009 3:43 AM EST : RE: WoW 3D Armory View Box

ferdy30
Posts: 35
Becoming Adept!

I actually went home and the box where the 3-D picture was supposed to be in wasnt even showing up (I initially thought it was just the computer I was on at work).  Instead of the picture it just showed a box where the picture was supposed to be with a red X in one of the corners (the same thing that happens when you try to load a picture that isnt there).  I copied and pasted it exactly how you had it in the original post (leaving in the characters that you had originally put in) and it still did the same thing. 
TopBottom

Mottie (MVP) 8/13/2009 9:28 AM EST : RE: WoW 3D Armory View Box
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

Hi Ferdy30!

Is it working now? The 3D Armory site and been working on and off. It's also been pretty laggy for me lately, which is why I replaced the box with an image on my help site page. But I just tested the code and it works fine for me now.

If it still isn't working for you, could you share a link to your site page so it will be easier for me to troubleshoot the problem.
TopBottom

Mottie (MVP) 3/11/2010 1:34 PM EST : RE: WoW 3D Armory View Box
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

Updated!
  • Cleaned up the code and moved it into a separate file so you don't need to add as much code to your site
  • Replaced broken talent and profession icons
  • Added wowhead script so ensure the item tooltips work
TopBottom

Admins Online
There are   members online.
So-and-so has logged on!
%title%
%message%