Progression Box (Version 3)

PBv3 open

PBv3 closed

I didn't want or have time to make all of these images on my own, so I borrowed images and screenshots from a couple of GuildPortal sites. I hope you're not offended, so I will replace them if you do want me to remove them. I borrowed the progression image from Loch Modan Yacht Club (LMYC). It's beautifully done. Click this link to see the original image. And, I obtained the boss kill screenshots (thumbnails only) from the Horde Honor Guard website. The other images I made with photoshop.

I chopped up the LMYC progression image to make it work with this progression box. The image on the small image on the right is the progression box closed and the far right image is what you see after you click on Hyjal Summit. When you click on a boss image, a pop up window will appear with either a screenshot of the boss or an information box (click on Black Temple > Illidan) - an example of this progression box can be found on my "Warcraft" tab of my test website.

*Note: Some of the progression images are faded out. This was LMYC's method of showing a boss that hadn't been killed as of yet. I left these images as they were, since I was more worried about making this work than making all the images perfect. It's also why I didn't add the other nine instances of The Burning Crusade... utter laziness, I admit it, I have accepted it and now I have made it my own... Procratinators of the world Unit....

Content Box

<div align="center">
<style type="text/css">
/* Some list and link styling */
#instances { width: 220px; margin: 0px; }
ul#instances { margin-left:0px; }
ul#instances li { width: 200px; list-style-type: none; margin:0px; }
ul#instances ul { margin-top:5px; }
ul#instances ul li { width: 175px; border: 0px; margin: 0px auto; padding-right:20px; }

/* Header links styling */
h3 { border: 0px; margin: 0px; padding-left:0px; padding-right:20px; }
h3.head { background: url(http://i259.photobucket.com/albums/hh311/hotwow/themes/icons/forum_bottom.png) right center no-repeat; }
h3.selected { background: url(http://i259.photobucket.com/albums/hh311/hotwow/themes/icons/forum_top.png) right center no-repeat; }

/* A few IE bug fixes */
* ul,li { margin: 0; padding: 0; }
* html ul#instances li { height: 100%; list-style-type: none; }
* html ul#instances ul { margin-top:5px; }
* html ul#instances ul li { height: 100%; margin: 0px auto; }
* html ul#instances h3 { padding-right: 20px; }
</style>
<script type="text/javascript">
$(document).ready(function(){
 $('#instances h3').click(function(){
     var active = $(this).html();
  $(this).toggleClass('selected').next().toggle(300);
  $('#instances h3').each(function(){
   if ($(this).html()!=active) {
    $(this).removeClass('selected').next().hide(300);
   }
  })
 }).next().hide();
});
</script>

<ul id="instances">

<h3 class="head"><img src="http://i201.photobucket.com/albums/aa236/Mottie1/testsite/screenshots/MH.jpg"></h3>
 <ul style="display: none;">
  <li>
   <a rel="facebox" href="http://i201.photobucket.com/albums/aa236/Mottie1/testsite/screenshots/winterchill.jpg">
    <img src="http://i201.photobucket.com/albums/aa236/Mottie1/testsite/screenshots/MH-Rage.jpg">
   </a>
  </li>
  <li>
   <a rel="facebox" href="http://i201.photobucket.com/albums/aa236/Mottie1/testsite/screenshots/anetheron.jpg">
    <img src="http://i201.photobucket.com/albums/aa236/Mottie1/testsite/screenshots/MH-Anetheron.jpg">
   </a>
  </li>
  <li>
   <a rel="facebox" href="http://i201.photobucket.com/albums/aa236/Mottie1/testsite/screenshots/kazrogal.jpg">
    <img src="http://i201.photobucket.com/albums/aa236/Mottie1/testsite/screenshots/MH-Kaz.jpg">
   </a>
  </li>
  <li>
   <a rel="facebox" href="http://i201.photobucket.com/albums/aa236/Mottie1/testsite/screenshots/azgalor.jpg">
    <img src="http://i201.photobucket.com/albums/aa236/Mottie1/testsite/screenshots/MH-Azgalor.jpg">
   </a>
  </li>
  <li>
   <a rel="facebox" href="http://i201.photobucket.com/albums/aa236/Mottie1/testsite/screenshots/bosskilled.jpg">
    <img src="http://i201.photobucket.com/albums/aa236/Mottie1/testsite/screenshots/MH-Archimonde.jpg">
   </a>
  </li>
 </ul>

<h3 class="head"><img src="http://i201.photobucket.com/albums/aa236/Mottie1/testsite/screenshots/BT.jpg"></h3>
 <ul style="display: none;">
  <li>
   <a rel="facebox" href="http://i201.photobucket.com/albums/aa236/Mottie1/testsite/screenshots/najentus.jpg">
    <img src="http://i201.photobucket.com/albums/aa236/Mottie1/testsite/screenshots/BT-Naj.jpg">
   </a>
  </li>
  <li>
   <a rel="facebox" href="http://i201.photobucket.com/albums/aa236/Mottie1/testsite/screenshots/supremus.jpg">
    <img src="http://i201.photobucket.com/albums/aa236/Mottie1/testsite/screenshots/BT-Supremus.jpg">
   </a>
  </li>
  <li>
   <a rel="facebox" href="http://i201.photobucket.com/albums/aa236/Mottie1/testsite/screenshots/akama.jpg">
   <img src="http://i201.photobucket.com/albums/aa236/Mottie1/testsite/screenshots/BT-Shade.jpg">
   </a>
  </li>
  <li>
   <a rel="facebox" href="http://i201.photobucket.com/albums/aa236/Mottie1/testsite/screenshots/gorefiend.jpg">
   <img src="http://i201.photobucket.com/albums/aa236/Mottie1/testsite/screenshots/BT-Teron.jpg">
   </a>
  </li>
  <li>
   <a rel="facebox" href="http://i201.photobucket.com/albums/aa236/Mottie1/testsite/screenshots/bossattempted.jpg">
    <img src="http://i201.photobucket.com/albums/aa236/Mottie1/testsite/screenshots/BT-Gurtogg.jpg">
   </a>
  </li>
  <li>
   <a rel="facebox" href="http://i201.photobucket.com/albums/aa236/Mottie1/testsite/screenshots/bossattempted.jpg">
    <img src="http://i201.photobucket.com/albums/aa236/Mottie1/testsite/screenshots/BT-RoS.jpg">
   </a>
  </li>
  <li>
   <a rel="facebox" href="http://i201.photobucket.com/albums/aa236/Mottie1/testsite/screenshots/bossnoattempt.jpg">
    <img src="http://i201.photobucket.com/albums/aa236/Mottie1/testsite/screenshots/BT-Shahraz.jpg">
   </a>
  </li>
  <li>
   <a rel="facebox" href="http://i201.photobucket.com/albums/aa236/Mottie1/testsite/screenshots/bossnoattempt.jpg">
    <img src="http://i201.photobucket.com/albums/aa236/Mottie1/testsite/screenshots/BT-Council.jpg">
   </a>
  </li>
  <li>
   <a rel="facebox" href="#info1">
    <img src="http://i201.photobucket.com/albums/aa236/Mottie1/testsite/screenshots/BT-Illidan.jpg">
   </a>
  </li>
 </ul>

</ul>
</div>

<!--
****************
Illidan Info Box!
(this part is optional)
**************** -->

<div style="display:none;">
<div id="info1">
<strong>ACK</strong><br>
Blah blah blah...
More info about this boss...
<br>
Illidan Strategy - watch this!!
<object width="638" height="516"><param name="movie" value="http://www.youtube.com/v/7iMbx0RbDY4&hl=en&fs=1"></param><param name="allowFullScreen" value="true"></param><embed src="http://www.youtube.com/v/7iMbx0RbDY4&hl=en&fs=1" type="application/x-shockwave-flash" allowfullscreen="true" width="638" height="516"></embed></object>
</div>
</div>

Customizing

• Updated this script to work without the accordion script since the newer updates to GuildPortal broke it. I also removed some of the HTML and CSS for hovering over the image since it only worked properly in Firefox. But I did find a way to make the arrows work with IE and Chrome. So an improvement overall I think.
• *DANGER WILL ROBINSON!* Errr, I'm going to start off with a word of caution, this CSS is very touchy. It wasn't changed much from the original CSS. I wouldn't mess with the very top part (just below the /* A few IE bug fixes */ unless you have to.
• The ID, "#instances" defines the entire content box. The instance images are 200px wide, but with the added up and down arrows, it was widened to220px to make room (ummm don't ask me why the arrows don't show up with IE LOL). *Works now!
• "ul#instances li" is set to 200px to match the width of the instance image.
• "ul#instances ul li" is set to 175px to match the width of the boss image.
• "ul#instances ul li a:hover" has the highlight color (border and background) of "#333333" that you can modify to your liking. *Removed link
• There is a right padding set to 20px to make room for the arrow on the side in two places in the CSS. (Damn you IE for hidhing my cool arrows!)
• The image URLs in green are for the up and down arrows that change when you expand or contract an instance group.
  
  

• The accordian script is set, by default, to allow the instance boxes to collapse. You can have them always open by setting "alwaysOpen" to "true".*Removed
  
  
• If you want to turn off the animation, set "animated" to "false". But it's too purdy to do that! * Removed
• To adjust the speed of the box animation, modify the "300" inside the "toggle" and "hide" parts of the code (in red)
• "showSpeed" and "hideSpeed" I believe is the time in milliseconds that it takes to expand and contract the instance box. So "100" would be extremely fast, while "1000" would be slow (1 second).
  
  

• In the HTML above, each element is on a new line to make it easier to read because the URL to the image is so long. In the HTML below, each section is compressed and colorized to make it easier to see how the elements fit together.
• The overview:
  
  
  • The entire list of instances needs to have a <ul id="instances"> at the top and a </ul> at the bottom.
  • Each instance starts out with:
    
    <h3 class="head"><img src="URL TO INSTANCE IMAGE"></h3>
     <ul style="display: none;">
  • Each boss line will look like this:
    
    <li><a rel="facebox" href="URL TO BOSS IMAGE"><img src="URL TO BOSS KILL SCREENSHOT"></a></li>
    
  • When put all together, you should see this basic format:
    
    <ul id="instances">
    <!-- Instance #1 -->
    <h3 class="head"><img src="URL TO INSTANCE IMAGE #1"></h3>
     <ul style="display: none;">
      <li><a rel="facebox" href="URL TO BOSS KILL SCREENSHOT #1"><img src="URL TO BOSS IMAGE #1"></a></li>
      <li><a rel="facebox" href="URL TO BOSS KILL SCREENSHOT #2"><img src="URL TO BOSS IMAGE #2"></a></li>
     </ul>
    <!-- Instance #2 -->
    <h3 class="head"><img src="URL TO INSTANCE IMAGE #2"></h3>
     <ul style="display: none;">
      <li><a rel="facebox" href="URL TO BOSS KILL SCREENSHOT #3"><img src="URL TO BOSS IMAGE #3"></a></li>
      <li><a rel="facebox" href="URL TO BOSS KILL SCREENSHOT #4"><img src="URL TO BOSS IMAGE #4"></a></li>
      <li><a rel="facebox" href="URL TO BOSS KILL SCREENSHOT #5"><img src="URL TO BOSS IMAGE #5"></a></li>
     </ul>
    
    </ul>
• Each boss line (in grey above) can be set up in several different ways (both use facebox, the popup window that's now part of GuildPortal - read this post on how to modify it):
  
  
  1. Screentshot: Clicking on the boss image opens up a popup window of the boss kill screenshot. Most of the lines in the above code are set up this way. The blue text is the boss kill screenshot and the teal text is to the mini boss image in the bar.
     
     <li>
      <a rel="facebox" href="URL TO BOSS KILL SCREENSHOT">
       <img src="URL TO BOSS IMAGE">
      </a>
     </li>
  2. Information Box: Clicking on the boss image opens a popup window with information and/or a video about the boss.
     
     
     • The href points to the ID of the info box (in purple), so these must match (the href uses a number sign "#" to point to the ID). The example below used "info1", you can use any ID as long as it is unique.
     • The URL to the boss image in the bar is in teal.
     • Add any text, images or even embeded videos between the top two <div> and the last two </div> in grey. 
       
       In the embded video example I have in the "Content Box" section, you'll see the the height and width are 1.5x bigger. The height was modified to from 344 -> 516 and the width was modified from 425 -> 638 - because the default size of the embeded youtube videos needs to be bigger
     
     <li>
      <a rel="facebox" href="#info1">
       <img src="URL TO BOSS IMAGE">
      </a>
     </li>
     
     <!-- Info Box -->
     <div style="display:none;">
     <div id="info1">
     <strong>ACK, Kill it!</strong>
     <br>
     More info about this boss...
     <br>
     <img src="URL TO ANY IMAGE">
     
     Watch this strategy video!
     <PASTE YOUTUBE EMBED CODE HERE>
     
     </div>
     </div>