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
Liberty Rose (New Admin) 4/17/2010 8:48 PM EST : RE: Rotating images thru a Free Form Text/HTML box
Liberty Rose
Posts: 1781
Zomgawsh Poster

Perhaps because I'm not java-sava - (I've barely got basic HTML under my belt) - I'm having some trouble with this script.

1. Currently on my Union Supreme site, it shows 2 of the images, one standing on the head of the next, rather than one.

That may be -- likely is -- related to:

2. I also have a problem that, when I save the code you've written, into my HTML/text box, something automatically puts - right after the </script> that ends the Don't change-anything-below-this-line section
code similar to:

<center><img alt="" src="http://i395.photobucket.com/albums/pp36/Sheryl_Knowles/Little%20Covers/NewCouncillors.jpg" style="border-width: 0px;border-style: solid;" /></center> <center><img alt="" src="http://i395.photobucket.com/albums/pp36/Sheryl_Knowles/Little%20Covers/NewCouncillors.jpg" style="border-width: 0px;border-style: solid;" /></center>

I suspect that is NOT something that is wanted in that position, but I do not seem to have any control over its appearance. I select and delete it and then save... and yet a similar addition will be there when I check the code.
Insight would be much appreciated.

3. That all was before I added the square brackets indicated in the last post on the first page of this thread. At that point, no image shows up in my box. I really would like to get the images working correctly. I'm feeling very confused. Forgive me for being a noob.
Insight would be appreciated.
TopBottom

Mottie (MVP) 4/18/2010 12:55 AM EST : RE: Rotating images thru a Free Form Text/HTML box
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

Hi Liberty Rose!

Hopefully, I can answer your questions as there is some of it I'm not quite sure how to answer given what you described.
  1. You are getting two images because the script is set up to look for a <div> in the BannerArea with an ID of "banner" and it's not replacing or removing the image that is already there. Try removing the banner image completely before using this script. Oh, and put this script in the Banner Area ( Control Panel > Custom HTML & Script > Banner Area )

  2. I'm guessing from the way you described this you are adding the script into a free form text/HTML type widget. Try putting it in the banner area instead. I didn't quite understand what you meant here though... what is being automatically added? Is it adding a random image at the end?

  3. Adding the brackets shouldn't stop the code from working. I'm not sure what the problem could be. But I would recommend you set up a testing site (and don't bother subscribing it) where you can play around with new code/widgets and break your page without worrying about your guild members not being able to use the site. Then once all the kinks are worked out, transfer the code to your main site. Also, you could leave the code you are having trouble with in place, so I could get a better look at it and help find the problem 
TopBottom

Liberty Rose (New Admin) 4/18/2010 6:10 AM EST : RE: Rotating images thru a Free Form Text/HTML box
Liberty Rose
Posts: 1781
Zomgawsh Poster

Hm.
One of my problems apparently is that I don't want to use the graphics as a banner in the banner area.  Mea culpa.
I'm not actually interested in using the banner box; I'm just trying to set up a second Gallery of sorts.
It sounded as though, in the early part of the thread, that the code you first posted could be used in any Free Format Text/HTML box, and it was only the later code that was specifically designed for the Banner Box.  I must have misunderstood that completely.

I started with the first chunk of code.  And that was when I got the two-for-one images. <smile>

As I tried to figure that out, I thought I understood that the square brackets needed to be added for a certain type of browser to accept the code, so I added them, figuring they were unrelated to my double image problem.  That is what is currently sitting at the upper right (below the banner) of the Union Supreme front page.  It show no images.

I guess it's back to the drawing table for me to try to figure out how to make the Gallery work correctly.

Thank you.

Still... for debugging purposes... this is the code, without the square brackets.  
...
<sigh> Turns out I'm not savvy enough to make the code show up here.

So... assume you're looking at the code on page one, post 5 of this thread.
The only changes are (1) there are 10 "images.push" lines, and they point to 10 photobucket images of mine, rather than your samples;
AND, (2) at the bottom of that code, there are two more lines:
<center><img alt="" src="http://i395.photobucket.com/albums/pp36/Sheryl_Knowles/Little%20Covers/GG.jpg" style="border-width: 0px;border-style: solid;" /></center> <center><img alt="" src="http://i395.photobucket.com/albums/pp36/Sheryl_Knowles/Little%20Covers/Sol.jpg" style="border-width: 0px;border-style: solid;" /></center>

You will note that those final two lines are not in your original code.  Nor were they there when I hit the SAVE button on the Content Editor:Free Form Text/HTML box.  Nonetheless, there they are.  It sounds like they are completely unrelated to the double-image problem.   They do, as it happens, show (rather, the 2nd line shows ) one of the URLs for one of the two pictures (the 2nd one, as it happens) displayed at the time I grabbed the code to show here.  So I now suspect that the code, rather than the editor box put them there, indicating something about the images being "pushed".  Just a guess. <smile>

 
TopBottom

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

i tryed it with usen the file manager url image of for second page but its same pic as home page it sohuld be 


Asylum RULES!

TopBottom

Mottie (MVP) 4/18/2010 5:39 PM EST : RE: Rotating images thru a Free Form Text/HTML box
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

Hi Liberty Rose!

Oh yes, you can use the code for a separate image gallery. I didn't realize that is what you meant.

Ok I see what the problem is now, the code adds the image immediately after it is run and when you are using the editor, you add the code in <> HTML mode, and when you switch it to design mode, it runs the script - adding an image to its content. After you save it, that image is included there. That's why when you see it in place you get two images - one that doesn't change (because it was saved) and another that does change every time you reload your page. I've changed the code slightly to bypass this problem. This is your new code:
<img class="randomImage" align="center" alt=""/>
<script type="text/javascript">
 var images = [];
 /* ********************************
 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
 ******************************** */
 
 
 // ********************************
 // Don't change anything below this line
 // ********************************
 $('.randomImage').attr('src',images[Math.floor( Math.random() * images.length )]);
</script>
There are two ways you can post code in the forums: (1) You have to trick the editor by italicizing certain tags like <html>, <head>, <body> or <script>, or (2) you could just use the "Format Code Block" button in the editor toolbar (it's two to the left of the add internet link button) that's what I used above so you can see the difference. I normally don't use this option because I like to color the key parts of the code to make it easier for everyone to find.

And finally, the reason for the brackets. I didn't clearly state this before, but when "push"ing a single string (or url in this case) you don't need the brackets. But if there is more than one string (e.g. images.push(["my link title","my url"]) <- notice the brackets around both) you need brackets for the code to not break in Internet Explorer.
TopBottom

Mottie (MVP) 4/18/2010 5:42 PM EST : RE: Assign a theme for each tab
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

Hi Shadowstts!

Taking a quick glance at your site, I see you are still using the original code. Try replacing all the code below the "Don't change anything below this line" and try again.
TopBottom

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

Mottie said:
Hi Shadowstts!

Taking a quick glance at your site, I see you are still using the original code. Try replacing all the code below the "Don't change anything below this line" and try again.


omg thx mottie ur a life saver didnt relise u change the other part of the code tohught u just added the banner bit thx mottie ur the best 

Asylum RULES!

TopBottom

Liberty Rose (New Admin) 4/19/2010 9:14 AM EST : RE: Rotating images thru a Free Form Text/HTML box
Liberty Rose
Posts: 1781
Zomgawsh Poster

Thank you ever so much!
TopBottom

torralaq (New Admin) 6/1/2010 4:21 PM EST : RE: Random Banner Image (now with Flash!)
torralaq
Posts: 33
Becoming Adept!

Ok I figured out my original question, but I guess what threw me off is that the title says "Rotating Banner Image" and really this is a random image, or image selected for the particular page.  Does anyone have a random image rotator, that could replace the banner script as this one does?  thanks!
TopBottom

Mottie (MVP) 6/2/2010 12:56 AM EST : RE: Random Banner Image (now with Flash!)
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

Hi torralaq!

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'
TopBottom

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