Forums

bparks

Is it possible with either Jquery or PHP to create a homepage with a changing background image and tagline/copy on reload.

I'm using a full image background on a client website and I have specific headlines and copy that go with each background image. My plan was to used 4-6 images and taglines/copy.

I don't want to make the text part of the background image because that will do me no favors with the search engines.

I know how to code it to change the background image on reload or the copy but not both at the same time. And I've had little luck finding a solution that satisfies both of these requirements.

I'm really a designer and not a programmer, so go easy on me, But if anyone knows of a solution, I'd appreciate it. Thanks.

bparks

Someone helped me out with this code but I still can't seem to get the headings and paragraph to change with the background. Help.

Before my HTML:

<?php

    // Generate a random number.
    $random = rand(0, 2);

    // Set up messages, and fetch a random one.
    $messages = array(
        array("heading" => "foo", "body" => "123"), 
        array("heading" => "bar", "body" => "456"),
        array("heading" => "bad", "body" => "789")
    );
    $message = $messages[$random];

?>

Then In my HTML

<body class="background-<?= $random ?>">
    <h1><?= $message['heading'] ?></h1>
    <p><?= $message['body'] ?></p>
</body>

Then in the CSS for the changing background images or colors

body.background-0 { background: red; }
body.background-1 { background: green; }
body.background-2 { background: blue; }

Mellowfellon

Can you use straight JQ for this or does if have to be php ?

You have various options like random images with jquery titles pulled from the 'title' or 'alt' attributes..

I'm not really into php or much of a coder, but perhaps creating a array for each heading,image combo might work put into case switches. --> http://php.net/manual/en/control-structures.switch.php

$randomizer = rand(0,2); // random statement
switch($randomizer) { // returned value is loaded into the switch. The returned value loads the relevant data

	case ($randomizer == '1'):
		$title = 'Alpha dog';
	 	$bg = '../img/dog1.jpg'
		break;

	case ($randomizer == '2'):
		$title = 'Beta dog';
	 	$bg = '../img/dog2.jpg'
		break;

	default:
		$title = 'Default dog';
	 	$bg = '../img/dog-default.jpg'
		break;
}

echo '<h1>'.$title.'</h1><img src='.$bg.'/>'

Something like that. I'm sure someone with a little more php expertise can help you out here.

mweldan

I'm second on that.

just an idea.

1. an array of images and title
2. use jquery or direct php to get current image and title, save it in session
3. the next time page loading just manipulate session to get current image etc.

treehouse : what would you like to learn today?

Forums

Homepage that changes headline copy and background image on Reload/Refresh. CODE ADDED, HELP!