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! > Rotating Banner Image
Mottie (MVP) 7/18/2008 9:45 AM EST : Change your banner image (or flash header) for each tab
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

Here is the code that will display a set image or flash file for a specific tab!

Banner Image/Flash per tab
<script type="text/javascript">
var images = [];
/* ********************************
 Add images: images.push (["TabID","Add URL here"]);
 Add Flash:  images.push (["TabID","Add URL here","Width","Height"]);

- TabID is from the URL of your site, below the TabID is 2222222
 "http://www.guildportal.com/Guild.aspx?GuildID=111111&TabID=2222222"
 
 - If the TabID has no match, the script will default to the first image.

- Make sure you have brackets "[]" around the TabID and URL
 ******************************** */

images.push (["2222220","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/bkgd_cobblestone.gif"]);
images.push (["2222221","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/bkgd_dirt.gif"]);
images.push (["2222222","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/bkgd_floor.gif"]);
images.push (["2222223","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/bkgd_grass.gif"]);
images.push (["2222224","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/bkgd_lava.gif"]);
images.push (["2222225","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/bkgd_outland2.gif"]);
images.push (["2222226","http://70.85.12.163/albino_flash06s/badger(www.albinoblacksheep.com).swf","400","350"]);

// banner builder background image
var replaceBannerBackground = true;

// ********************************
// Don't change anything below this line
// ********************************
var img = '', inc = 0, j = 0, currentTab = gupw('TabID');
for (var j=0; j < images.length; j++) {
 if ( images[j][0] == currentTab ) { inc = j; }
}
if (images[inc][1].match('.swf')) {
 img = '<object width="' + images[inc][2] + '" height="' + images[inc][3] +
  '"><param name="movie" value="' + images[inc][1] + '"></param><embed src="' +
  images[inc][1] + '" type="application/x-shockwave-flash" width="' + images[inc][2] +
  '" height="' + images[inc][3] + '"></embed></object>';
 $('#bannerCell').html(img);
} else if (replaceBannerBackground) {
 $('#bannerCell').css('background-image','url("'+ images[inc][1] + '")');
} else {
 $('#containedBanner').attr('src', images[inc][1]);
}
function gupw(n){
 n = n.replace(/[\[]/,"\\[").replace(/[\]]/,"\\]");
 n = (new RegExp("[\\?&]" + n + "=([^&#]*)")).exec(window.location.href);
 return n == null ? "" : n[1];
}
</script>
Customizing
  • UPDATE: Several important notes about the code update:

    1. This above code now needs to be placed at the bottom of the page (in the Footer Area : Control Panel > Custom HTML & Script > Footer Area). It should replace the banner image/background before the page is loaded, so you won't see a flash when the image changes. And it also needs to be in the footer to ensure that jQuery has loaded.
    2. It now assumes that you have used the banner builder. The banner builder works with two images: one for the banner background (set as a background image) and the second for your guild name image (it's an image that floats above the background). This code allows you to replace one or the other by setting the "replaceBannerBackground" variable to true or false, depending on how you have set up your banner builder.

  • TabID: Find the TabID for each tab of your site, it is the end of the URL for your site. The TabID of the example below is 2222222

    "http://www.guildportal.com/Guild.aspx?GuildID=111111&TabID=2222222"

    Insert this number into the images variable - the text in green.

    images.push (["TabID",....]);

  • Images: Replace the URL in orange with your image URL. Add and remove the lines as needed.

    images.push (["TabID","Add URL here"]);

  • Flash: Add flash by replacing the URL in orange, then add the width and height of your flash in red, as follows:

    images.push (["TabID","Add URL here","Width","Height"]);
*Note: You MUST have the brackets "[]" (in blue) around the data for this to work!
Edit (4/17/2010): Updated the code to replace the banner background or image that is part of the banner builder. Please read the note added above in the customization area.
TopBottom

HaleGnomeMage (New Admin) 7/25/2008 2:25 AM EST : RE: Change your banner image (or flash header) for ea...

HaleGnomeMage
Posts: 805
Zomgawsh Poster

I am using that Rotating banner with the flash option.  Some of my users that are using IE7 say that the banners do not load at all now.  Any ideas?
TopBottom

Mottie (MVP) 7/25/2008 3:21 AM EST : RE: Change your banner image (or flash header) for ea...
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

My apologizes, I thought I had tested the script with Internet Explorer. Did I ever mention how much I dislike IE? LOL.

Anyway, the script is updated in the original post. All you need to do is add brackets around the image url to make it work.
Add images: images.push (["Add URL here"]);
Add Flash:  images.push (["Add URL here","Width","Height"]);
TopBottom

HaleGnomeMage (New Admin) 7/29/2008 1:06 AM EST : RE: Change your banner image (or flash header) for ea...

HaleGnomeMage
Posts: 805
Zomgawsh Poster

Great, thanks for the help.  I am not a fan of IE7 either.
TopBottom

Mottie (MVP) 12/28/2008 6:50 AM EST : Assign a theme for each tab
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

How to assign a theme to each tab

This version allows you to assign a CSS stylesheet as well as a banner image to each tab of your site. The banner image (or flash file) is placed inside the <div id="banner"></div> to allow you to customize the remainder of your banner area.

Banner Area Code
<div id="banner" align="center"></div>
<script type="text/javascript">
var images = new Array();

/* ********************************
 Add images: images.push (["TabID","URL to CSS","Add URL here"]);
 Add Flash:  images.push (["TabID","URL to CSS","Add URL here","Width","Height"]);

- TabID is from the URL of your site, below the TabID is 2222222
 "http://www.guildportal.com/Guild.aspx?GuildID=111111&TabID=2222222"
 
 - If the TabID has no match, the script will default to the first image.

- Make sure you have brackets "[]" around the TabID and URL
 ******************************** */
var inc = 0; // default theme

images.push (["2222220","http://www.axiomfiles.com/Files/243007/style-bold2.css","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/bkgd_cobblestone.gif"]);
images.push (["2222221","http://www.axiomfiles.com/Files/243007/style-black2.css","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/bkgd_floor.gif"]);
images.push (["2222222","http://www.axiomfiles.com/Files/243007/style-ne2.css","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/bkgd_grass.gif"]);
images.push (["2222223","http://www.axiomfiles.com/Files/243007/style-grey2.css","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/bkgd_rez2.jpg"]);
images.push (["2222224","http://www.axiomfiles.com/Files/243007/style-blue2.css","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/bkgd_outland2.gif"]);
images.push (["2222225","http://www.axiomfiles.com/Files/243007/style-wv2.css","http://70.85.12.163/albino_flash06s/badger(www.albinoblacksheep.com).swf","400","350"]);
images.push (["2222226","http://www.axiomfiles.com/Files/243007/style-parch2.css",""]);

// ********************************
// Don't change anything below this line
// ********************************
var img = "";
var currentTab = gup("TabID");
 for (var j=0; j < images.length; j++) {
  if ( images[j][0] == currentTab ) inc = j;
 }
 if (images[inc][2].match(".swf")) {
  img = "<object width='" + images[inc][3] + "' height='" + images[inc][3];
  img += "'><param name='movie' value='" + images[inc][2];
  img += "'></param><embed src='" + images[inc][2] + "' type='application/";
  img += "x-shockwave-flash' width='" + images[inc][3] + "' height='" + images[inc][4];
  img += "'></embed></object>";
 } else {
  img = (images[inc][2]=="") ? "" : "<img src=" + images[inc][2] + " border=0>";
 }
 if (images[inc][1] != "") {
  img += "<link rel='stylesheet' type='text/css' media='screen' href='";
  img += images[inc][1] + "'>";
 }
document.getElementById("banner").innerHTML = img;
function gup(name) {
 name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
 var regexS = "[\\?&]"+name+"=([^&#]*)";
 var regex = new RegExp( regexS );
 var results = regex.exec(window.location.href);
 if( results == null )
  return "";
 else
  return results[1];
}
</script>
Customizing
  • See the post above for details on customizing this script. Below are the instructions on the changes

  • Add the link to your custom CSS (in purple) file in the script above, following these examples:

     Add images: images.push (["TabID","URL to CSS","Add Image URL here"]);
     Add Flash:  images.push (["TabID","URL to CSS","Add Flash URL here","Width","Height"]);

  • Set the default theme using "var inc = 0;". The number points to the "images" array, zero being the first line and number increases sequentially from there.

  • You can leave out the image/flash URL from the "images" array, but you cannot leave out the "URL to CSS", leaving out a "TabID" will set the CSS to the default definition that is set by the "var inc = 0;".

  • If you need instructions on how to make a CSS file, please read this post. For a newer & better method of adding custom HTML for your content boxes, refer to this post.

  • If this isn't quite what you're looking for, there is also a theme selector that allows users to pick their own theme for the site.
TopBottom

Chosen3001 (Guild Admin) 4/2/2009 11:56 AM EST : RE: Assign a theme for each tab

Chosen3001
Posts: 56
Posts With Wolves


TopBottom

shadowstts (Guild Admin) 4/14/2010 9:58 PM EST : RE: Assign a theme for each tab
shadowstts
Posts: 364
Fingers of Fury!

wont work for me plz help! all it ods ei duplicate the default banenr wile theo ne i put in to rpelace the 2nd tab is just a X box witch makes no sence as i uploaded it to the guild files

Asylum RULES!

TopBottom

Mottie (MVP) 4/15/2010 7:54 AM EST : RE: Assign a theme for each tab
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

Hi Shadowstts!

I don't see the script on your site, so I can't troubleshoot the problem... but it could be an extra comma at the end (inside the brackets) or mismatched quotes (using a single quote instead of a double quote around an entry).

TopBottom

shadowstts (Guild Admin) 4/16/2010 10:11 PM EST : RE: Assign a theme for each tab
shadowstts
Posts: 364
Fingers of Fury!

theres more at the top but i cant add it as GP sez it wont alow it alos i cnat put bk on site as its to big of an eye saw is there anything wrong with it 

images.push (["2892276","http://www.axiomfiles.com/Files/345464/banner%20asylum.jpg"]);
images.push (["2900088","http://www.axiomfiles.com/Files/345464/Code Of Conduct copy.jpg"]);
images.push (["2901190","http://www.axiomfiles.com/Files/345464/banner%20asylum.jpg"]);
images.push (["2892277","http://www.axiomfiles.com/Files/345464/banner%20asylum.jpg"]);
images.push (["2892278","http://www.axiomfiles.com/Files/345464/banner%20asylum.jpg"]);
images.push (["2892280","http://www.axiomfiles.com/Files/345464/banner%20asylum.jpg"]);
images.push (["2892279","http://www.axiomfiles.com/Files/345464/banner%20asylum.jpg"]);
images.push (["2892281","http://www.axiomfiles.com/Files/345464/banner%20asylum.jpg"]);
images.push (["2913966","http://www.axiomfiles.com/Files/345464/banner%20asylum.jpg"]);
images.push (["2892283","http://www.axiomfiles.com/Files/345464/banner%20asylum.jpg"]);
images.push (["2958666","http://www.axiomfiles.com/Files/345464/banner%20asylum.jpg"]);


// ********************************
// Don't change anything below this line
// ********************************
var inc = 0; // default image
var img = "";
var currentTab = gup("TabID");
 for (var j=0; j < images.length; j++) {
  if ( images[j][0] == currentTab ) inc = j;
 }
 if (images[inc][1].match(".swf")) {
  img = "<object width='" + images[inc][2] + "' height='" + images[inc][3];
  img += "'><param name='movie' value='" + images[inc][1];
  img += "'></param><embed src='" + images[inc][1] + "' type='application/";
  img += "x-shockwave-flash' width='" + images[inc][2] + "' height='" + images[inc][3];
  img += "'></embed></object>";
 } else {
  img = "<img class='randomImg' src=" + images[inc][1] + " border=0>";
 }
document.getElementById("banner").innerHTML = img;
function gup(name) {
 name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
 var regexS = "[\\?&]"+name+"=([^&#]*)";
 var regex = new RegExp( regexS );
 var results = regex.exec(window.location.href);
 if( results == null )
  return "";
 else
  return results[1];
}
</script>

Asylum RULES!

TopBottom

Mottie (MVP) 4/17/2010 11:43 AM EST : RE: Assign a theme for each tab
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

Hi Shadowstts!

I've updated the code above to replace the banner builder images instead of adding it's own banner image. Since you aren't using the banner background image, you'll need to set the "replaceBannerBackground" variable to false. But otherwise, I think it should work for you now.
TopBottom

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