Random Rotating Header Image with Javascript
 

After seeing that this issue was noted as solved with Theme version 3.5.3, I installed this theme today...still no change in the behavior...A random image loads on each new page load, then the JS rotating images kick in, but it is always the first image that appears with the rest being in alphanumerical order (not random).

And each time you refresh the page or click any (internal) link this starts all over again (although interestingly the first header image that loads is random but then the script runs...)

...any ideas? Anyone?

http://blog.swansonphotosonline.com/

Where did you see it was solved?

http://wordpress.bytesforall.com/?p=94 and more specifically the included reference to the bug fix for http://forum.bytesforall.com/showthread.php?t=7577

The patch to show the images in a sorted order should be working. There is an enhancement that I'll be moving to the gold forums that will allow you to pick weather you want to see them in sorted or a random order

Atahualpa has always displayed a random image when only one image is shown per page. due to the way different OS's and servers work when using the rotate images option, some times they showed in sorted order and sometimes not.

The patch forces it to always use a sorted order

There is an enhancement that will allow you to select weather you want to have them sorted or show up randomly. It is currently in the diamond forums, but may be moved to the gold forums.

That would be good...I do really like the theme and thank all involved for your hard work, but would leave this feature out or off if a donation of the diamond level were involved...but I do hope this occurs, and if so, I would gladly use it (and donate accordingly)! Although... I do NOT want to have to customize the theme with code that will have to updated/changed each time I upgrade, etc)

On a side note, it is a great feature and I think you folks should put it out there for all as I think folks would gobble up atahualpa! I think it's far superior to any other theme I have seen!

Sven

Turned off the javascript option...does not work....

Hi Sven,

I managed a hack to prevent the 1st random image appearing - may be better ways but details here (read through the thread): http://forum2.bytesforall.com/showth...1185#post41185

I was just searching on the forum to solve the same 'problem' (yes I know its not really a problem, just a feature that I dont want :) )

If I get the requirement - its that the multiple headers are selected randomly, this makes navigating round the site a slightly smoother experience (ie. you don't start at the first header every time you click a link).

That what is what I wanted to happen anyway.

If this is possible via a configuration option, then sorry - I am a proper muppet!

But if it isnt - then this works...

In wordpress admin, go to appearance and edit themes

select bfa_rotating_header_images.php

Which is a smallish file, scroll halfway down until you see the line

sort($files);

and replace it with

shuffle($files);

And click on [update file] at the bottom.

That should do the trick.

I am a wordpress newbie - so forgive me if this is bad practise !

Regards
KK

This will be a theme option in 3.5.4

Super thanks!

So, I finally had time to review all the code changes that need to be made to 3.5.3 to make the rotating header images actually rotate, applied them and it sort of works as anticipated, but....

There are two issues that remain which I do not have a work-around for:

1) Prior to making these changes, the header images were centered using fluid layout 97% or any other setting for layout width - now the images justify to the left, no matter what the option is set to. To work around this, I changed my layout width from fluid 97% to fixed 1280px (the width of my images)...I would prefer the fluid width.

2) Now, instead of pre-loading only the first image, ALL of the images are pre-loaded, no matter what the option is set to...this causes all 60 or so images to load using up bandwidth and slowing the page load time down on some systems, this has been tested on a laptop here just now, the load time was about 12 seconds, prior it was less than 1.5 seconds.

I can live with #1 until 3.5.4 is released, but really would like a work-around for the second issue and want to point these issues out so they can be dealt with prior to 3.5.4.

http://blog.swansonphotosonline.com/

how are you telling that all the images are preloaded?

Using either Chrome (Inspect Element) or IE9 Beta (Dev tools)...I have included screenshots from Chrome Inspect Elements.

Steps:

1. If you do not have Chrome, download it and install it.
2. Open my website (link above)
3. Right click over any part of the page and then click "Inspect Element"
4. In the lower area click Resources and then your choice of the next two options to enable resource tracking.
5. To have the element viewer in a separate window, click the icon on the lower left.
6. Maximize new window.
7. You can reload the page or navigate and the new window will update or you can click on audit and force a page refresh and new resource tracking.

You will see that it loads all the images in the images folder each time a page loads - I can bring the site up on my Android phone prior rather seamlessly, now it takes about two minutes to load, but the image does rotate (so partially there):
http://blog.swansonphotosonline.com/...screenshot.jpg

You can do the same now with IE9 beta dev tools. You can also use Firefox, right click on the page, select view page info and inspect the media tab.

Juggledad,

Let me know if I can provide any additional feedback and please feel free to contact me directly.

do you also use the fade in/out option? If so shut it off and see how it goes

pre-load = no (in all cases)

If:
Rotate header images set to 10
Fade set to 0
=No rotate (except on page load) and no fade.

If:
Rotate header images set to 10
Fade set to 1
=rotate with fade (but loads all images)

If:
Rotate header images set to 10
Fade set to 2
=rotate with fade (but loads all images)

If:
Rotate header images set to 30
Fade set to 4
=rotate with fade (but loads all images)

Make header clickable = Y or N = no change (or any other combination of options - also removed %image and put back with varying options and no change in above)

Can you verify that all header images are being pre-loaded please?

The fade effect = 4 looks nice, hope we can figure this out!

I also changed the layout to 97% fluid with 1280 min and 1920 max - which again, forces the images left.

Had to remove the rotating header for now...will add back in once this is figured out. Note: when it is turned off the header image returns to center justified.

I just rechecked and the rotating works fine with eithor sort or shuffle with fade set to 0

There is a problem with the fade code, it doesn't honor the positioning, it overlays the blog title, it renders clickable image void. We have been recommending that you do not use it,. It was a fairly recent addition and the developer has been notified.

The header image sort/shuffle works fine - I'll take a look at the preload, but I think that may be another issue with the fading code.

Note, when you shuffle the images, it shuffles the order each time the page is refreshed, but will show that order each time the loop ends. IE if you have five images 1, 2, 3, 4, 5 you might get
5, 3, 4, 1, 2 and that would then repeat 5, 3, 4, 1, 2 on and on.
Next time the page is refreshed it could be 4, 1, 5, 2, 3 etc etc

These are my current theme settings:

http://blog.swansonphotosonline.com/images/settings.jpg

I have applied the code changes recommended by manually editing the applicable files.

Even though it is turned on in the settings, I get no rotation of images. If I do turn fade on, I get rotation of images but it pre-loads all the files...where in the code is the switch for pre-load and can you suggest a way to turn pre-load off (manual code)?

Please do an export of your settings and attach it to a replY

File attached.

I have just used your settings and 'as is' my header images rotate. I noticed you said you manually applied the code changes - does this mean you didn't just upload the files provided in the thread?

What version of Wordpress are you testing this with?

And, yes, I manually changed the files, very carefully making sure I both kept a copy of the original files and made only the changes noted:

They include:

http://forum2.bytesforall.com/showth...1185#post41185 #5, #6, #11

and

http://forum.bytesforall.com/showthr...9249#post49249 #7 (leading to above),and #8

Question: Why does first link have forum2 in link?

Also, and again, can we discover how to turn pre-load off?

One more question, not that it is likely the issue, but what are the permissions on the header images folder and files for your test setup?

Two things
1) please download and try the fix in http://forum.bytesforall.com/showthread.php?t=7579
2) the prefetch is part of the jquery that does the fade in/out