Random Image Rotate

Started by bmgxc9, March 02, 2015, 12:41:56 AM

Previous topic - Next topic

bmgxc9

Hello all,

I am attempting to make my website more interactive by having the background up near the logo (the red and black one) rotate to a random image on every refresh. Website: www.leftistvoice.com

I am attempting this through the index.css file in the stylesheets page, and I am having no luck.
Anybody have any suggestions?

I have tried methods from these websites.
http://sonspring.com/journal/easy-random-css-backgrounds
http://stackoverflow.com/questions/15231812/random-background-images-css3
https://css-tricks.com/snippets/php/randomize-background-image/

None of which seem to be working, unless I am just not doing something right.

Thank you!

bmgxc9

Side note, I tried using a mod. It also did not have the same effect I was expecting.

Kindred

well, as it says in one of those links...
http://stackoverflow.com/questions/15231812/random-background-images-css3
Quote
You cant use only html & css for this purpose. You should do it client side(like with javascript) or server side(like a php script)

which means that you need to add the randomizer script into your index.template.php


or, do what the first link suggests
http://sonspring.com/journal/easy-random-css-backgrounds

and use the separate randomizer script....
Quote
    Download rotator.txt from A List Apart, rename it rotator.php.
    Put the images to be rotated in the same directory as rotator.php.
    Upload all the files via FTP.
Слaва
Украинi

Please do not PM, IM or Email me with support questions.  You will get better and faster responses in the support boards.  Thank you.

"Loki is not evil, although he is certainly not a force for good. Loki is... complicated."

Sir Osis of Liver

This does something similar -

index.template.php



// Choose random topr pic
$pic = rand(1,5);
echo '
<div id="linktree">' , theme_linktree2() , '</div>
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td><img src="',$settings['images_url'],'/img/topl.jpg" alt="" /></td>
<td width="99%" style="background: url(',$settings['images_url'],'/img/topm.jpg) repeat-x;">&nbsp;</td>
<td><img src="',$settings['images_url'],'/img/topr', $pic ,'.jpg" alt="" /></td>



Pay attention to the first and last lines.  Image files are named topr1.jpg, topr2.jpg, etc.
Ashes and diamonds, foe and friend,
 we were all equal in the end.

                                     - R. Waters

bmgxc9

Quote from: Kindred on March 02, 2015, 12:11:22 PM
well, as it says in one of those links...
http://stackoverflow.com/questions/15231812/random-background-images-css3
Quote
You cant use only html & css for this purpose. You should do it client side(like with javascript) or server side(like a php script)

which means that you need to add the randomizer script into your index.template.php


or, do what the first link suggests
http://sonspring.com/journal/easy-random-css-backgrounds

and use the separate randomizer script....
Quote
    Download rotator.txt from A List Apart, rename it rotator.php.
    Put the images to be rotated in the same directory as rotator.php.
    Upload all the files via FTP.

I have the rotator.php script from http://sonspring.com/journal/easy-random-css-backgrounds
But I can't get the CSS to call the php file. If that makes sense.
The rotator.php is calling the right directory for the images, but when I try and put it in the CSS none of the images load.

bmgxc9


bmgxc9

#6
#header { background: url(../rotate.php) 50% 0 repeat; background-size: cover;}

That is the CSS code I'm using to call the PHP. I know I am not doing something right...

Kindred

well there's your problem.

Where is the rotate.php file? I would bet that it is NOT in the .. directory

I'd recommend using the FULL URL instead of the relative URL/
Слaва
Украинi

Please do not PM, IM or Email me with support questions.  You will get better and faster responses in the support boards.  Thank you.

"Loki is not evil, although he is certainly not a force for good. Loki is... complicated."

bmgxc9

And if it still does not work even with the full directory link?  :-\

bmgxc9

Quote from: Kindred on March 02, 2015, 03:25:24 PM
well there's your problem.

Where is the rotate.php file? I would bet that it is NOT in the .. directory

I'd recommend using the FULL URL instead of the relative URL/

Attached is the files I am using.
rotate (2) is simply because of a double download, I assure you I am calling the full directory. :/

bmgxc9

Might it have something to do with file permissions?


Kindred

If you are using the css line exactly as you posted above, then you are not calling the full url of the randomizer script
Слaва
Украинi

Please do not PM, IM or Email me with support questions.  You will get better and faster responses in the support boards.  Thank you.

"Loki is not evil, although he is certainly not a force for good. Loki is... complicated."

bmgxc9

#header { background: url(http://www.leftistvoice.com/portal/Themes/skyline_20a/scripts/random.php) 50% 0 repeat; background-size: cover;}

So I have changed it to that, @Kindred
It still does not seem to be working.

bmgxc9

I know I'm missing a blatantly obvious detail.

Shambles

QuoteNot Found

The requested URL /portal/Themes/skyline_20a/scripts/random.php was not found on this server.

You sure....?

bmgxc9

I've moved the file itself. Sorry, I'm trying a lot of things to get this to work.

I am getting an error generated though.

[02-Mar-2015 21:56:06 UTC] PHP Warning:  Cannot modify header information - headers already sent by (output started at /home/bmgxc9/public_html/lvportal/portal/Banner/random.php:2) in /home/bmgxc9/public_html/lvportal/portal/Banner/random.php on line 192

bmgxc9

Part of the error was the file it was contained in not having the correct permissions to execute the script, now it is generating the error message I posted above. So that means the script is now executing. Step in the right direction.

bmgxc9

Problem fixed.
Code Editor was auto-correcting lines numbers...

Thank you to everyone for your help.

Advertisement: