Rotating Banners?

Working on a new template and need help? Come here for support.

Moderator: Help Desk Team

Rotating Banners?

Postby Loverofpiggies » January 1st, 2012, 9:02 pm

Hello! I'm working on a new layout for my comic Gloomverse, and I wanted to try out doing a rotating top banner, so that every time you select a link or a next comic button, a new banner pops up. But I have no idea how to make a rotating banner like that! Could someone help me out please?

And on a similar vein, I'd like to make an icon for Guests who comment as well. Anyone know how to code this? Please, and thank you!

(Site I'm editing up, incase you're interested. Its not finished) http://gvedits.smackjeeves.com/
Vitotamito wrote:Wait, are you sayin that Princess Celestia and Nightmare Moon lezzed out and made Twilight Sparkle?


Image
User avatar
Loverofpiggies
 
Posts: 1381
Joined: June 22nd, 2007, 11:01 pm

Re: Rotating Banners?

Postby trenton_dawn » January 1st, 2012, 11:01 pm

Are you looking for a rotating image or a random image? (e.g. are the images to rotate in any kind of order?) If it's the latter, you can find a good source on how to do this with Javascript here.

For a guest avatar, find the part in your comic page template where it says: "<!-- END switch_poster_avatar -->"
Add this below it:
Code: Select all
<!-- BEGIN switch_poster_no_avatar -->
<img src="guest avatar url">
<!-- END switch_poster_no_avatar -->

You might have to do some tweaking depending on your template but maybe not.
Image
Ghost, an online novel — Sketchbook thread — deviantArt
Need assistance with anything? Feel free to PM me.
Seven Rain wrote:Trenton speaks words of wisdom.
Cave wrote:GOD, trenton.... why u so awesome? :(
User avatar
trenton_dawn
 
Posts: 2595
Joined: December 14th, 2006, 7:59 pm
Location: Auberdine, Darkshore (Alliance Territory)

Re: Rotating Banners?

Postby tveye » January 2nd, 2012, 4:02 am

Is it possible to give guests multiple avatars? Like, could I come up with different designs and depending on the comment order, those would be the avatars given to guests?
Image
User avatar
tveye
 
Posts: 159
Joined: November 17th, 2011, 2:37 pm
Location: Missouri

Re: Rotating Banners?

Postby Loverofpiggies » January 2nd, 2012, 11:33 am

Trenton: Thank you so much! Yes, I wanted random order banners. This is just wonderful, thank you so much!
Vitotamito wrote:Wait, are you sayin that Princess Celestia and Nightmare Moon lezzed out and made Twilight Sparkle?


Image
User avatar
Loverofpiggies
 
Posts: 1381
Joined: June 22nd, 2007, 11:01 pm

Re: Rotating Banners?

Postby Loverofpiggies » January 8th, 2012, 4:56 pm

Alright um, I probably just made silly little mistakes with the code, so forgive me. But I'm not sure why its not working.

Code: Select all
<!-- Begin
// Set up the image files to be used.
var theImages = new Array() // do not change this
// To add more image files, continue with the
// pattern below, adding to the array.

theImages[0] = 'http://i288.photobucket.com/albums/ll178/LunisIsland/Gloomversebanner.jpg'
theImages[1] = 'http://i288.photobucket.com/albums/ll178/LunisIsland/GloomversebannerWallis.jpg'
theImages[2] = 'http://i288.photobucket.com/albums/ll178/LunisIsland/GloomversebannerAssistant.jpg'

// do not edit anything below this line

var j = 0
var p = theImages.length;
var preBuffer = new Array()
for (i = 0; i < p; i++){
   preBuffer[i] = new Image()
   preBuffer[i].src = theImages[i]
}
var whichImage = Math.round(Math.random()*(p-1));
function showImage(){
document.write('<img src="'+theImages[whichImage]+'">');
}

//  End -->
Vitotamito wrote:Wait, are you sayin that Princess Celestia and Nightmare Moon lezzed out and made Twilight Sparkle?


Image
User avatar
Loverofpiggies
 
Posts: 1381
Joined: June 22nd, 2007, 11:01 pm

Re: Rotating Banners?

Postby Amante » January 8th, 2012, 10:02 pm

Loverofpiggies wrote:Alright um, I probably just made silly little mistakes with the code, so forgive me. But I'm not sure why its not working.

Code: Select all
<!-- Begin
// Set up the image files to be used.
var theImages = new Array() // do not change this
// To add more image files, continue with the
// pattern below, adding to the array.

theImages[0] = 'http://i288.photobucket.com/albums/ll178/LunisIsland/Gloomversebanner.jpg'
theImages[1] = 'http://i288.photobucket.com/albums/ll178/LunisIsland/GloomversebannerWallis.jpg'
theImages[2] = 'http://i288.photobucket.com/albums/ll178/LunisIsland/GloomversebannerAssistant.jpg'

// do not edit anything below this line

var j = 0
var p = theImages.length;
var preBuffer = new Array()
for (i = 0; i < p; i++){
   preBuffer[i] = new Image()
   preBuffer[i].src = theImages[i]
}
var whichImage = Math.round(Math.random()*(p-1));
function showImage(){
document.write('<img src="'+theImages[whichImage]+'">');
}

//  End -->

Two things, one, did you add the <SCRIPT LANGUAGE="JavaScript"> before the first code in the <head> tags and end it with the </script>?

Second, did you add the first code into the <head> section and the second part into where you normally link the banner like it asked?
Any SJ related questions? Feel free to look around, and if you can't find an answer, make a topic here and we'll get to you as fast as we can! :D

Image
User avatar
Amante
 
Posts: 2907
Joined: June 5th, 2009, 6:52 pm

Re: Rotating Banners?

Postby Loverofpiggies » January 9th, 2012, 9:22 am

Wonderful! It worked! Now I'll just edit some things and put it in the site. Thanks so much!
Vitotamito wrote:Wait, are you sayin that Princess Celestia and Nightmare Moon lezzed out and made Twilight Sparkle?


Image
User avatar
Loverofpiggies
 
Posts: 1381
Joined: June 22nd, 2007, 11:01 pm

Re: Rotating Banners?

Postby Amante » January 9th, 2012, 4:42 pm

Loverofpiggies wrote:Wonderful! It worked! Now I'll just edit some things and put it in the site. Thanks so much!

Glad to see it worked, I'll have to check it out when you get it up.
Any SJ related questions? Feel free to look around, and if you can't find an answer, make a topic here and we'll get to you as fast as we can! :D

Image
User avatar
Amante
 
Posts: 2907
Joined: June 5th, 2009, 6:52 pm

Re: Rotating Banners?

Postby trenton_dawn » January 17th, 2012, 10:03 pm

Coincidentally I was browsing Gloomverse when I realized that the random image code has a slight flaw which makes the first and last image in the array less likely compared to the others.

The following line should be changed from:
Code: Select all
Math.round(Math.random()*(p-1))

to:
Code: Select all
Math.floor(Math.random()*(p))


(long explanation)
Javascript Math.random() generates a random real number between 0 and 0.99 inclusive, which the script then multiplies by the number of images minus 1. Then it rounds it to an integer to pick an image index. But since it uses round and not floor, the following happens:

0.0-0.49: Image 0
0.5-1.49: Image 1
.
.
other images
.
.
1.5-2.49: Image n - 1
2.5-2.97: Image n

With my fix it would be even like we would expect.
Image
Ghost, an online novel — Sketchbook thread — deviantArt
Need assistance with anything? Feel free to PM me.
Seven Rain wrote:Trenton speaks words of wisdom.
Cave wrote:GOD, trenton.... why u so awesome? :(
User avatar
trenton_dawn
 
Posts: 2595
Joined: December 14th, 2006, 7:59 pm
Location: Auberdine, Darkshore (Alliance Territory)


Return to Template Development & Support

Who is online

Users browsing this forum: Google [Bot] and 2 guests