Wordpress Themes - WP Forum at BFA
Click here to register or to donate.
Auto self-registration is not available here - far too many spammers. This forum has many, many backlinks and because of that there is an intense desire among spammers to drop their links here.

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme » Header configuration & styling »

[SOLVED] How to get a header image to rotate every 'N' seconds


  #1  
Old Apr 17, 2009, 12:10 PM
juggledad's Avatar
juggledad
 
23,762 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
Update: This got dropped in the 3.4 and 3.4.1 versions, but is back in 3.4.2

UPDATE: this is now included in Atahualpa 3.3.3, see
Atahulapa Theme Options -> Header Image -> Rotate Header images with Javascript
You will also have to back out the changes you made per this post


I really love the Atahualpa Theme and think Flynn has a real winner here. It amazes me to see how many differrent 'looks' we users have come up with. But...

I wanted one more thing. While I love the fact that the header image randomly changes on each page, I wanted to get the image to change while I was sitting on a page. So I took up the chalange and with a little help from Flynn, I did it! So here is method 1 - using an embedded Java script. (this was done on Wordpress 2.7.1 using Atahualpa 3.3.20

To use this method you will
1) customize a Java script
2) add the code to the theme (theme options -> HTML/CSS Inserts -> HTML Inserts: Header)
3) add a body tag (theme options -> HTML/CSS Inserts -> HTML Inserts: Body Tag)
4) edit bfa_header_config.php (a 1 line change)
5) sit back and enjoy

STEP 1 - customize a Java script
There are a couple things that have to be customized in the Java script: the time interval, the address of your blog, the location of your images and the names of your images. Copy the Java script below to a text editor.

Change the number of milliseconds to the interval youi want. Remember, 1000 milliseconds = 1 seconds.

Next, change the blog_address from 'http://mysite.org/wordpress/' to your blog address and change 'wp-content/themes/atahualpa332/images/header/' if your images are in another folder.

Then add the names of your images to the array. In the example the images are called 1.jpg, 2.jpg, 3.jpg and 4.jpg - if yours were blue.jpg, green.jpg, house.jpg and dog.jpg, those are the names you would use. Maybe someday I or someone else will figure a way to read the directory and automatically populate the array, but for now this is the way it must be done. You can add more images if you want.

+++++++++++++++++++++++++++++++++++
start of Java code snippet
+++++++++++++++++++++++++++++++++++++
<SCRIPT LANGUAGE="JavaScript">

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->

<!-- Begin
// (C) 2001 www.CodeLifter.com
// http://www.codelifter.com
// Free for all users, but leave in this header

// =======================================
// set the following variables
// =======================================

// Set speed (milliseconds)
var speed = 10000
// Set your site address
blog_address = 'url(http://mysite.org/wordpress/'
// only change this if your images are somewhere else
rh_start = blog_address + 'wp-content/themes/atahualpa332/images/header/'
rh_end = ') no-repeat 50% 0%'

// Specify the image files
var Pic = new Array() // don't touch this
// to add more images, just continue
// the pattern, adding to the array below

Pic[0] = rh_start + '1.jpg' + rh_end
Pic[1] = rh_start + '2.jpg' + rh_end
Pic[2] = rh_start + '3.jpg' + rh_end
Pic[3] = rh_start + '4.jpg' + rh_end

// =======================================
// do not edit anything below this line
// =======================================

var t
var j = 0
var p = Pic.length

var preLoad = new Array()
for (i = 0; i < p; i++){
preLoad[i] = new Image()
preLoad[i].src = Pic[i]
}

function runBGSlideShow(){
if (document.body){
h_image = document.getElementById('imagecontainer');
h_image.style.background = Pic[j];
j = j + 1
if (j > (p-1)) j=0
t = setTimeout('runBGSlideShow()', speed)
}
}
// End -->
</script>
+++++++++++++++++++++++++++++++++++++
end of Java code snippet
+++++++++++++++++++++++++++++++++++++

STEP 2 - add the code to the theme
Copy the code and paste it into 'HTML Inserts: Header' and save the changes.
(Atahualpa theme options -> HTML/CSS Inserts -> HTML Inserts: Header)

STEP 3 - add a body tag
Copy the following line:

onload="runBGSlideShow()"

Add it to the 'HTML Inserts: Body Tag' and save the changes
(Atahualpa theme options -> HTML/CSS Inserts -> HTML Inserts: Body Tag)

Step - 4 edit bfa_header_config.php
First you will have to get a copy of the file bfa_header_config.php (which is located in wp-content/themes/atahualpa332/functions). Edit this file and locate teh line (about line 190 in the code)

$header_image = '<div class="header-image-container" style="background: url(' . $selected_header_image . ') ' .

and replace it with

$header_image = '<div id="imagecontainer" class="header-image-container" style="background: url(' . $selected_header_image . ') ' .

Now save the file and upload it back to the server.

STEP 5 - sit back and enjoy

go visit your site and enjoy watching the headers change and while your at it, send Flynn a donation!

Last edited by juggledad; Jul 27, 2009 at 06:11 PM. Reason: added UPDATE notice
  #2  
Old May 11, 2009, 09:53 AM
judyksp
 
1 posts · May 2009
Hi, this sounds great. Would you be able to add the coding to show different header images with different pages?
  #3  
Old May 12, 2009, 06:41 PM
Tarzanna77
 
10 posts · Apr 2009
I have upgraded to the newest version to try out this new rotating header. Looks great. 2 issues I've run into, #1 It appears to only work (ie rotate continuously) in IE, I use firefox and it does not rotate when viewing in there.

#2 is there a way to specify in which order the images come up? I would like to be able to specify the order of the 3 images I've placed in the folder. I currently have them named 1,2 & 3 but it appears that they are being pulled at random.

Thanks!
  #4  
Old May 14, 2009, 07:28 AM
juggledad's Avatar
juggledad
 
23,762 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
First off, remember this code is now built into Atahualpa 3.3.3

Tarzanna77
#1 make sure you have javascript enabled in Firefox
#2 The code is just a simple loop. It loads the images into an array and then displays them in the order they are in the array. It might be possible that they are being loaded into the array in a strange order, but that would be a javascript issue and I didn't write the code, just lifted it and got it working to rotate the images.

judyksp
I assume you mean, one set of images for one page and naother set of images for another page. It might be possible to do that, (I think I've seen posts where people want a different header on different pages) but that's not what I was trying to do.

If you figure out how to impliment that ability, please let us all know. I'd like to try it myself.

and don't forget to give Flynn a donation

Last edited by juggledad; May 14, 2009 at 07:37 AM.
  #5  
Old May 14, 2009, 09:02 AM
Tarzanna77
 
10 posts · Apr 2009
Thanks juggledad, Just to clarify, I'm not trying to use the code you were working with, I'm am using the built-in functionality of the 3.3.3 theme.

I've looked at my Firefox settings and both Enable Java & Enable Javascript are checked. Not sure why it's not rotating. Works beautifully in IE. Sucha neat built-feature. I'd love to be able to use it.

In case it matters, I am using a different page template for my home page to be able to have the 4 columns below with photos, however, the rotating doesn't happen on ANY pages.

Last edited by Tarzanna77; Jan 21, 2010 at 01:28 PM.
  #6  
Old May 14, 2009, 02:04 PM
juggledad's Avatar
juggledad
 
23,762 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
I notice the jpgs have a space in the names 'Toni Header2.jpg' try changing the space to an underscore so the name would be Toni_Header2.jpg. Spaces can do some odd things.
  #7  
Old May 15, 2009, 10:43 AM
Tarzanna77
 
10 posts · Apr 2009
That was it! Thank you! Such a simple little fix.
  #8  
Old May 19, 2009, 02:47 AM
ciocchi
 
28 posts · Mar 2009
hi
this is amazing but i would like to know if it possible to cross dissolve image when sliding...
  #9  
Old May 19, 2009, 05:22 PM
juggledad's Avatar
juggledad
 
23,762 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
If you look thru the header Configuration & styling, there is a post I put in about using a NextGen slideshow which has dissolving. I got it to work and would have used that, but I wanted the top corners to be rounded and haven't yet figured out how to do it with Nextgen

see: http://forum.bytesforall.com/showthread.php?t=1197
  #10  
Old May 25, 2009, 09:11 AM
5280Fan's Avatar
5280Fan
 
7 posts · Feb 2009
Good Morning!

I'm using 3.3.3 on WP 2.7.1 and I have a 'small' little issue I cannot seem to find the answer for. I'm sure it's me...

I have 16 jpg's that rotate fine for what appears to be 1 "cycle" after which no image shows. Refresh and things are fine again for another cycle.

Is this normal? Thank you so much for your wonderful work.

Russ
  #11  
Old May 25, 2009, 01:48 PM
juggledad's Avatar
juggledad
 
23,762 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
Hmmm, Haven't seen that. What's your url? can you install the WP Security Scan plugin (http://semperfiwebdesign.com/custom-...y-scan/#more-9) and then copy and paste the information in the System Information Scan.
  #12  
Old Jun 4, 2009, 03:58 PM
thetravelchronicle
 
90 posts · May 2009
Quote:
Originally Posted by juggledad
First off, remember this code is now built into Atahualpa 3.3.3

Tarzanna77
#1 make sure you have javascript enabled in Firefox
#2 The code is just a simple loop. It loads the images into an array and then displays them in the order they are in the array. It might be possible that they are being loaded into the array in a strange order, but that would be a javascript issue and I didn't write the code, just lifted it and got it working to rotate the images.

judyksp
I assume you mean, one set of images for one page and naother set of images for another page. It might be possible to do that, (I think I've seen posts where people want a different header on different pages) but that's not what I was trying to do.

If you figure out how to impliment that ability, please let us all know. I'd like to try it myself.

and don't forget to give Flynn a donation
I'm having the opposite problem - header doesn't rotate in IE8, but works fine in Firefox. All the Add-Ons under Sun Microsystems are enabled. Is anyone else experiencing this?
  #13  
Old Jun 4, 2009, 04:38 PM
juggledad's Avatar
juggledad
 
23,762 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
do you have java turned on in IE8?
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #14  
Old Jun 4, 2009, 05:34 PM
thetravelchronicle
 
90 posts · May 2009
I guess I don't understand the question. I thought I had pre-answered with: All the IE8 Add-Ons under Sun Microsystems are enabled.
If there is any other way to "turn on" java it's unknown to me.
I looked some more and find that I am using my current virtual machine for java.
Know of something else?
  #15  
Old Jun 4, 2009, 05:48 PM
juggledad's Avatar
juggledad
 
23,762 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
Sorry, I issed that. I've got an instance of IE8 running and the image is rotating. can you post the url so I can take a look on my IE8?
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #16  
Old Jun 4, 2009, 06:20 PM
thetravelchronicle
 
90 posts · May 2009
http://www.yellowstonetravelchronicle.com/
  #17  
Old Jun 4, 2009, 07:19 PM
juggledad's Avatar
juggledad
 
23,762 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
the problem is caused by something that generates the following code
HTML Code:
<!-- GBCF -->
<link rel="stylesheet" type="text/css" media="screen" href="http://www.yellowstonetravelchronicle.com/wp-content/plugins/wp-gbcf/wp-gbcf_themes/default.css">
<!--[if IE]><script src="http://www.yellowstonetravelchronicle.com/wp-content/plugins/wp-gbcf/wp-gbcf_focus.js" type="text/javascript"></script><![endif]-->
<!-- GBCF -->
When I remove that code, the image starts rotating in IE8

Also, there is a funny bit of CSS that is in the code
HTML Code:
<!-- Right Sidebar -->
<style type="text/css">
<!--
.style1 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: large;
}
-->
</style>
<td id="right">
Have you made any changes to the code? does this 'style1 ring a bell?
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #18  
Old Jun 4, 2009, 09:08 PM
thetravelchronicle
 
90 posts · May 2009
I would guess, since it refers to text in the right sidebar, that "the funny bit of CSS" has to do with the WordPress widget called "Text" that allows you to write in the sidebar.
I'm not sure where I should be looking for this code - index.php?
I assume you're recommending the removal of the GBCF stuff, and that it is in header.php. So, I'll go looking for it and try to see if anything disappears along with it.
It sounds vaguely like it might have something to do with the "Secure and Accessible PHP Contact Form" plugin I installed, but can't imagine what that would be doing in the header.
Thanks.
  #19  
Old Jun 5, 2009, 06:37 AM
juggledad's Avatar
juggledad
 
23,762 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
Quote:
Originally Posted by thetravelchronicle
I would guess, since it refers to text in the right sidebar, that "the funny bit of CSS" has to do with the WordPress widget called "Text" that allows you to write in the sidebar.
I'm not sure where I should be looking for this code - index.php?
look in the dashbaord->appearance->widgets Right Widgets, text and see what you put there.

Quote:
I assume you're recommending the removal of the GBCF stuff, and that it is in header.php. So, I'll go looking for it and try to see if anything disappears along with it.
It sounds vaguely like it might have something to do with the "Secure and Accessible PHP Contact Form" plugin I installed, but can't imagine what that would be doing in the header.
Thanks.
Umm, I didn't say anything about header.php, I got this info from looking at the generated source of the web page. This code is probably created by one of the plugins you are using. Try deactivating them all and see if theheader image starts rotating. If it does, add a couple back till it stops rotating. You should be able to find the plugin that is causing the issue this way.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #20  
Old Jun 5, 2009, 11:18 AM
thetravelchronicle
 
90 posts · May 2009
Quote:
Originally Posted by juggledad
look in the dashbaord->appearance->widgets Right Widgets, text and see what you put there.



Umm, I didn't say anything about header.php, I got this info from looking at the generated source of the web page. This code is probably created by one of the plugins you are using. Try deactivating them all and see if theheader image starts rotating. If it does, add a couple back till it stops rotating. You should be able to find the plugin that is causing the issue this way.
Yes, context is everything. I had spent the earlier part of my day mucking around in the header.php file trying to make the resize instructions from "Automatic resizing of the header image" work.
http://forum.bytesforall.com/showthread.php?t=301
Although it might should be the subject of another thread, I concluded that unless I could string together five different URLs in the above instructions, there is no way to have header resizing and rotating headers at the same time.

Getting back to the original subject with another tangent, it didn't occur to me that you were referring to the source page file because you talked about removing a section of it to test what happened. HOW THE HECK DO YOU DO THAT TRICK? Dinner's on me at the nearest Burger King just for that tutorial.

Yes, it is the "Secure and Accessible PHP Contact Form" plugin that is causing the non-rotation problem. My options include living with no rotation in IE8, or convincing you guys or the plugin developers to find a fix. Alternatively, can you recommend an email contact plugin that will work?

As for the text I included in the right sidebar, it is "Site Search". I also just remembered that "Style 1" is terminology that Dreamweaver uses, and that there is some Style 1 text in the footer - the two links that I added.
  #21  
Old Jun 5, 2009, 01:51 PM
juggledad's Avatar
juggledad
 
23,762 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
here is something to try, edit wp-gbcf_focus.js, at the bottom you will find
HTML Code:
 for(var i in objEvt){
  temp = document.getElementsByTagName(i), tempLen = temp.length;
   for(var j=0; j<tempLen; j++){
    for(var k=0; k<objEvt[i].length; k++){
     if(objEvt[i][k] == 'hover'){
      temp[j].onmouseover = hoverFunc;
      temp[j].onmouseout  = unHoverFunc;
     } else if(objEvt[i][k] == 'focus'){
      temp[j].onfocus = focusFunc;
      temp[j].onblur  = unFocusFunc;
     }
    }
   }
 }
change 'i' to 'ii' and 'j' to 'jj' so you have
HTML Code:
 for(var ii in objEvt){
  temp = document.getElementsByTagName(ii), tempLen = temp.length;
   for(var jj=0; jj<tempLen; jj++){
    for(var k=0; k<objEvt[ii].length; k++){
     if(objEvt[ii][k] == 'hover'){
      temp[jj].onmouseover = hoverFunc;
      temp[jj].onmouseout  = unHoverFunc;
     } else if(objEvt[ii][k] == 'focus'){
      temp[jj].onfocus = focusFunc;
      temp[jj].onblur  = unFocusFunc;
     }
    }
   }
 }
both java scripts are using 'i' and 'j as variables and I'll bet they are messing each other up.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support

Last edited by juggledad; Jun 5, 2009 at 01:59 PM.
  #22  
Old Jun 5, 2009, 03:31 PM
thetravelchronicle
 
90 posts · May 2009
Nope - as soon as I re-activate the plugin, rotation stops.
  #23  
Old Jun 5, 2009, 07:53 PM
thetravelchronicle
 
90 posts · May 2009
I downloaded and installed a new email contact form - problem solved. Any reason to go back and edit out the extra "i"s and "j"s? I assume they won't affect anything/
  #24  
Old Jun 5, 2009, 09:10 PM
juggledad's Avatar
juggledad
 
23,762 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
Since they are part of the code in "Secure and Accessible PHP Contact Form" and your not using it, no need to change it back, but you might want remove the plugin from the plugin folder
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #25  
Old Jul 5, 2009, 07:09 AM
TarheelRambler
 
7 posts · Dec 2008
Raleigh, NC
I am not able to get the header image to rotate in any browser. I've verified that Java is enabled in both IE8 and Firefox, renamed images to remove spaces, and looked for conflicting plugins, to no avail. Any ideas? My site is http://www.tarheelramblings.com. Oh, and I'm on version 3.4 of Atahualpa. :D

Last edited by TarheelRambler; Jul 5, 2009 at 07:10 AM. Reason: Added final comment.

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
Can Rotate Header and Resize Header work together? thetravelchronicle Forum How-To 10 Jun 24, 2009 08:24 PM
site auto-reloads every 3 seconds mrshannigan Atahualpa 3 Wordpress theme 7 Jun 17, 2009 06:56 PM
Header Images Fail to Rotate Yarrokon Header configuration & styling 10 Jun 8, 2009 11:17 AM
Pls help with - How to get a header image to rotate every 'N' seconds (sticky) HavaLyon Header configuration & styling 9 Apr 27, 2009 09:30 AM
nextGen gallery with image rotator as header image shatchp Header configuration & styling 1 Feb 13, 2009 08:40 PM


All times are GMT -6. The time now is 03:56 AM.


Powered by vBulletin® Copyright ©2000 - 2021, Jelsoft Enterprises Ltd.