Zen Cart Logo
Forums / Templates, Stylesheets, Page Layout / How to randomly rotate header background image on refresh?

How to randomly rotate header background image on refresh?

Views: 670

Results 1 to 5 of 5
30 Jun 2015, 5:52 AM
#1
scott_ease avatar

scott_ease

New Zenner

Join Date:
Jun 2012
Posts:
68
Plugin Contributions:
2

How to randomly rotate header background image on refresh?

Greetings-

A few threads discussed the issue but seems no solution yet.
Code in https://www.zen-cart.com/showthread.php?109898-Rotating-Header-Image will work but not as background.
Image Rotator (rotate.php) in https://www.zen-cart.com/showthread.php?85904-rotate-header-background-image&highlight=random+background does not work (with Zen Cart).

How to randomly rotate header background image on refresh? Please help, Zen guru.
Thank you.

30 Jun 2015, 6:50 PM
#2
schoolboy avatar

schoolboy

Totally Zenned

Join Date:
Jun 2005
Location:
Cumbria, UK
Posts:
10,327
Plugin Contributions:
0

Re: How to randomly rotate header background image on refresh?

I'm wondering why you would want this... If it's just "for show", then don't bother... focus rather on putting product in front of the customer.

When I first started using zencart (11 years ago) I also looked for all sorts of gimmicks and fancy functions - only to realise (often painfully) that the MAIN REASON people go to a webshop is to BUY STUFF, and the less you distract them with superfluous nonsense, the better they like you and the greater the chance they will buy something.

We are in the process of a complete re-design of one of our main sites, and guess what... ?

NO rotating banners
NO slideshows
NO scrolling sideboxes
NO waffling on about "like me on facebook please..." or "see what crap we're saying on Twitter..."
NO outbound links to blogs or social pages.
etc...

We're using our WWP (Wider Web Presence) for that sort of stuff - ie: harvesting the punters and then funneling them to where they finally make the purchase, but when they arrive at the webshop, it is little more than a cash register. The quicker they can fill their basket with what they are after and the faster they can check-out, the better they like it - especially on mobile devices...

1 Jul 2015, 9:05 AM
#3
scott_ease avatar

scott_ease

New Zenner

Join Date:
Jun 2012
Posts:
68
Plugin Contributions:
2

Re: How to randomly rotate header background image on refresh?

I agree. If it's painful, then skip it, although many people like the feature. (Quite a few similar threads here.)
Thanks.

2 Jul 2015, 11:34 AM
#4
scott_ease avatar

scott_ease

New Zenner

Join Date:
Jun 2012
Posts:
68
Plugin Contributions:
2

Re: How to randomly rotate header background image on refresh?

I was about to skip this point after a few more try (before it would become painful). Here is the solution:

① Copy code from http://ma.tt/scripts/randomimage/ and save it as ‘rotate.php’;
② Put the file into a new folder ‘header’, along with images you want to rotate;
③ Upload the folder to your ROOT directory;
④ Add following to your ‘stylesheet.css’ (/includes/templates/your_template/css):
#logoWrapper { background: url(http://your_domain/header/rotate.php); }

See effect at our websites:
http://www.angelcorp.cn/ (China) or http://angelcorp.net/store/ (U.S.)

Enjoy your site building but avoid painful decoration.

2 Jul 2015, 12:07 PM
#5
mc12345678 avatar

mc12345678

Totally Zenned

Join Date:
Jul 2012
Posts:
16,908
Plugin Contributions:
2

Re: How to randomly rotate header background image on refresh?

Minor mod to below (in bold) to prevent mixed content security warnings on secure pages.

scott_ease:

I was about to skip this point after a few more try (before it would become painful). Here is the solution:

① Copy code from http://ma.tt/scripts/randomimage/ and save it as ‘rotate.php’;
② Put the file into a new folder ‘header’, along with images you want to rotate;
③ Upload the folder to your ROOT directory;
④ Add following to your ‘stylesheet.css’ (/includes/templates/your_template/css):
#logoWrapper { background: url("//your_domain/header/rotate.php"); }

See effect at our websites:
http://www.angelcorp.cn/ (China) or http://angelcorp.net/store/ (U.S.)

Enjoy your site building but avoid painful decoration.