Sign Up! Login: Password: New User? Forgot? Support
Code 
 
 
Forums 
Forums : Banner > Random Banner Image
Mottie (SuperAdmin) 7/1/2008 6:49 AM EST : Random Banner Image
ACK!
Mottie
Posts: 3883

0
Like

0
Dislike

How to add a banner image that changes when you reload the page

GuildPortal admin site link to original post

This will work for a banner image or any image box on your site. If you want to use it for your banner image, just add it to your bannerarea HTML (Control Panel > Style & Colors > Banner Area) orpaste it into a "free form text/HTML" box for your random images. Theonly problem with this is it doesn't detect your image sizes, so makesure your images don't blow out the sides of your content box 
<script type="text/javascript">
var images = new Array();

// ********************************
// Add images below
// images.push ("Add URL here");
// ********************************

images.push ("http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/bkgd_cobblestone.gif");
images.push ("http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/bkgd_dirt.gif");
images.push ("http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/bkgd_floor.gif");
images.push ("http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/bkgd_grass.gif");
images.push ("http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/bkgd_lava.gif");
images.push ("http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/bkgd_outland2.gif");

// ********************************
// Don't change anything below this line
// ********************************
var inc = Math.floor( Math.random() * images.length );
var img = "<center><img src=" + images[inc] + " border=0></center>";
(img);
</script>
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

Mottie (SuperAdmin) 7/17/2008 11:24 AM EST : Random Banner Image or Flash
ACK!
Mottie
Posts: 3883

0
Like

0
Dislike

Here is the code that will put up either a random image or flash!

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

/* ********************************
 Add images: images.push (["Add URL here"]);
 Add Flash:  images.push (["Add URL here","Width","Height"]);
 note for flash, add brackets around the three parts
 ******************************** */

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

// ********************************
// Don't change anything below this line
// ********************************

var inc = Math.floor( Math.random() * images.length );
var img = "";
 if (images[inc][0].match(".swf")) {
  img = "<object width='" + images[inc][1] + "' height='" + images[inc][2];
  img += "'><param name='movie' value='" + images[inc][0];
  img += "'></param><embed src='" + images[inc][0] + "' type='application/";
  img += "x-shockwave-flash' width='" + images[inc][1] + "' height='" + images[inc][2];
  img += "'></embed></object>";
 } else {
  img = "<img src=" + images[inc][0] + " border=0>";
 }
document.getElementById("banner").innerHTML = img;
</script>
</div>
Customizing
  • Images: Add the image as before, replace the URL in orange with your image URL. Add and remove the lines as needed.

    images.push (["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 (["Add URL here","Width","Height"]);
*Note: You MUST have the brackets "[]" (in blue) around the parts for this to work!

Enjoy!

Edit: (7/25/2008) Updated the script to work with IE =/... sorry I missed it before
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

Mottie (SuperAdmin) 6/2/2010 1:01 AM EST : Timed Random Banner Background Image
ACK!
Mottie
Posts: 3883

0
Like

0
Dislike

Timed Random Banner Background Image

GuildPortal admin site link to original post

I put this script together that will randomly replace the banner builder background image every 5 seconds. Of course you can change the time interval and the number of random images.

Add this script to your Banner or Footer Area (Control Panel > Custom HTML & Script > Banner (or Footer) Area)

Code
<script type="text/javascript">
 var images = [];
 /*********************************
  Add images: images.push (["Add URL here"]);
 **********************************/

 var bannerInterval = 5000; // time until next random image in milliseconds
 var bannerBkgdposition = 'center center no-repeat';

 images.push (["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/bkgd_cobblestone.gif"]);
 images.push (["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/bkgd_dirt.gif"]);
 images.push (["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/bkgd_floor.gif"]);
 images.push (["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/bkgd_grass.gif"]);
 images.push (["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/bkgd_lava.gif"]);
 images.push (["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/bkgd_outland2.gif"]);

 // ********************************
 // Don't change anything below this line
 // ********************************
 $(document).ready(function(){
  randomBannerImage();
  setInterval( randomBannerImage, bannerInterval );
 });
 function randomBannerImage(){
  var rand = images[Math.floor( Math.random() * images.length )];
  // preload the image
  $('<img />')
   .attr('src', rand)
   .load(function(){
    $('#bannerCell').css('background', 'url(' + rand + ') ' + bannerBkgdposition);
   });
 }
</script>
Customizing
  • Change the time interval to change the image (in red). Time is in milliseconds (so, 5000 = 5 seconds).

  • Add more images using this template. Make sure you are using both the parenthesis, brackets and quotes around the URL (in orange)

    images.push (["full image URL"]);

  • Position and repeat the background image as desired by modifying the "bannerBkgdposition" variable (in blue) which follows CSS styling.

    'x-position y-position repeat'
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

Mottie (SuperAdmin) 4/9/2011 12:00 PM EST : Random Banner Background Image on Page Reload
ACK!
Mottie
Posts: 3883

0
Like

0
Dislike

Random Banner Builder Background Image on Page Reload

GuildPortal admin site link to original post

This script will randomly replace the banner builder background image on page reload.

Add this script to your Banner or Footer Area (Control Panel > Custom HTML & Script > Banner (or Footer) Area)

Code
<script type="text/javascript">
 var images = [];
 /*********************************
  Add images: images.push (["Add URL here"]);
 **********************************/

 images.push (["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/bkgd_cobblestone.gif"]);
 images.push (["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/bkgd_dirt.gif"]);
 images.push (["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/bkgd_floor.gif"]);
 images.push (["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/bkgd_grass.gif"]);
 images.push (["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/bkgd_lava.gif"]);
 images.push (["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/bkgd_outland2.gif"]);

 // ********************************
 // Don't change anything below this line
 // ********************************
var inc = Math.floor( Math.random() * images.length );
$('#bannerCell').css('background-image', 'url(' + images[inc] + ')');
</script>
Customizing
  • Add more images using this template. Make sure you are using both the parenthesis, brackets and quotes around the URL (in orange)

    images.push (["full image URL"]);
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

Mottie (SuperAdmin) 4/9/2011 12:15 PM EST : Random Banner Builder Title Image on Page Reload
ACK!
Mottie
Posts: 3883

0
Like

0
Dislike

Random Banner Builder Title Image on Page Reload

GuildPortal admin site link to original post

This script will randomly replace the banner builder title image on page reload. And yes, you can combine it with the background image code above. 

Add this script to your Banner or Footer Area (Control Panel > Custom HTML & Script > Banner (or Footer) Area)

Code
<script type="text/javascript">
 var images2 = [];
 /*********************************
  Add images: images.push (["Add URL here"]);
 **********************************/

 images2.push (["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/HelpSite.png"]);
 images2.push (["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/title.png"]);
 images2.push (["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/test-site3.png"]);
 images2.push (["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/test-site4.png"]);
 images2.push (["http://www.axiomfiles.com/Images/Dynamic/3780.png"]);

 // ********************************
 // Don't change anything below this line
 // ********************************
var inc = Math.floor( Math.random() * images.length );
$('#containedBanner').attr('src', images2[inc]);
</script>
Customizing
  • Add more images using this template. Make sure you are using both the parenthesis, brackets and quotes around the URL (in orange)

    images2.push (["full image URL"]);
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

 
 
Key 
New posts No new posts
New posts ( popular ) No new posts ( popular )
New posts ( sticky ) No new posts ( sticky )
New posts ( locked ) No new posts ( locked )
 
 
Who's Online 
There are   members online.
 
 
So-and-so has logged on!
%title%
%message%