Random Header Background Images...

[caniol]

Is there a mod or add-on to randomly rotate through a series of background images in the header?

[caniol]

Anyone?

 

Is there a mod or add-on to randomly rotate through a series of background images in the header?

[FIMBLE]

Hello

Try this

 

http://addons.oscommerce.com/info/3274

 

Nic

[caniol]

Hello

Try this

 

http://addons.oscommerce.com/info/3274

 

Nic

 

Thanks. What I want is that the image changes only when the page is refreshed.

[caniol]

Anyone?

 

Thanks. What I want is that the image changes only when the page is refreshed.

[Guest]

did you try google?

 

Random Image Display

[germ]

In your /includes/header.php find the line that displayes your logo.

 

It will look something like this:

 

	<td valign="middle"><?php echo '<a href="' . tep_href_link(FILENAME_DEFAULT) . '">' . tep_image(DIR_WS_IMAGES . 'oscommerce.gif', 'osCommerce') . '</a>'; ?></td>

Change the code to something like this:

 

<?php

/* coded for 6 images */
 $br = rand(0,5);

 switch ( $br ) {

 case 0:
  $random_image ='image0.gif'; /* change the image name here */
  break;

 case 1:
  $random_image ='image1.gif'; /* change the image name here */
  break;

 case 2:
  $random_image ='image2.gif'; /* change the image name here */
  break;

 case 3:
  $random_image ='image3.gif'; /* change the image name here */
  break;

 case 4:
  $random_image ='image4.gif'; /* change the image name here */
  break;

 case 5:
  $random_image ='image5.gif'; /* change the image name here */
  break;
}
?>
<td valign="middle"><?php echo '<a href="' . tep_href_link(FILENAME_DEFAULT) . '">' . tep_image(DIR_WS_IMAGES . $random_image, 'osCommerce') . '</a>'; ?></td>

 

This line in the code you may need to alter besides the image names:

 

  $br = rand(0,5);

 

That returns a random integer from 0 to 5 (inclusive).

 

Then for each random possibility you'll need a corresponding "case".

 

I've done the "random image thing " on jbmoonwalkrentals.com , a simple site I did for some family members.

 

It's not an osC store site, and I use the random image as a background in the stylesheet, but the concept is the same.

[germ]

there a mod or add-on to randomly rotate through a series of background images in the header?

Gee....

:blush:

 

I just noticed something.

 

You asked for a random background image, and I posted code that randomizes the logo instead.

 

I'll need a link to your store to do the code you want.

 

You can post it or PM it to me (your URL) if you want me to help.

[caniol]

Gee....

:blush:

 

I just noticed something.

 

You asked for a random background image, and I posted code that randomizes the logo instead.

 

I'll need a link to your store to do the code you want.

 

You can post it or PM it to me (your URL) if you want me to help.

 

PM sent...

[germ]

Got it.

;)

 

Can you PM me the other image names you plan on using?

:unsure:

 

What we'll do is create a different class in the stylesheet for each image, then put a chunk of PHP code simliar to what I posted in the header.

 

The difference being well have it change the style instead of the image name.

 

We'll be randomizing this line in the code:

 

  <tr class="header">

Well have classes like:

 

<tr class="header">

<tr class="header1">

<tr class="header2">

 

And so on.

[burt]

Another way:

 

Use an ID or class in stylesheet.

 

Call the stylesheets like this: bg_style1.css, bg_style2.css, bg_style3.css and so on.

In each of these you'd have the css to display the chosen image.

 

Now call the stylesheet randomly in your page code - you'd add this code underneath <link rel="stylesheet" type="text/css" href="stylesheet.css">.

 

$style = glob("bg_*.css"); shuffle($style);
echo '<link rel="stylesheet" type="text/css" href="' . $style[0] . '">';

[caniol]

Another way:

 

Use an ID or class in stylesheet.

 

Call the stylesheets like this: bg_style1.css, bg_style2.css, bg_style3.css and so on.

In each of these you'd have the css to display the chosen image.

 

Now call the stylesheet randomly in your page code - you'd add this code underneath <link rel="stylesheet" type="text/css" href="stylesheet.css">.

 

TR.header {
 background: #ffffff;
 background-image: url("images/rid/bt_banner_1.jpg");
 height: 150px;
}

 

 

Correct?

[germ]

You give up, or should I send you the code to do it my way?

:unsure:

[caniol]

You give up, or should I send you the code to do it my way?

:unsure:

 

By all means, continue. I was just experimenting (unsuccessfully) until I heard back from you.

 

Thanks!

[germ]

And I was thinking you guys were going to iron things out here.

 

In any case, the PM with the code has been sent.

 

Let me know if you have any problems.

;)

[cg180659]

If you mean random by the fact that the image chages everytime the page refeshes, there is a contribution for that:

 

http://addons.oscommerce.com/info/1934

 

it worked for me. but i decided to make my own conrtib because i THOUGHT i need this contrib.

[caniol]

And I was thinking you guys were going to iron things out here.

 

In any case, the PM with the code has been sent.

 

Let me know if you have any problems.

;)

 

Germ,

 

The code workd great!! Very cool! Thanks a million.

 

Thanks again.

[germ]

Look at your site using Firefox.

 

There's a blank spot at the top because you didn't change the code like I said.

:blush:

 

Looking at it in IE it's fine.

 

You left the original "class" line in there, so now you have TWO <tr class= lines which causes a blank header in Firefox:

 

<tr class="header">
<tr class="header5">

Re-read my directions.

 

The first line needs to go.

[RichardPryor]

You are a life saver, germ! This is exactly what I was looking for, and your code is straight forward which is always appreciated.

 

Was wondering if the code could be kicked up a notch and set a few additional parameters. I wanted to load a specific image on certain pages. So when the customer clicks on About Us, just to say a name, the image you specified will load instead of a random one. Hope I'm making myself clear.

[germ]

If you wanted an image based on page name, change this code:

 

  case 5:
  $random_image ='image5.gif'; /* change the image name here */
  break;
}
?>
<td valign="middle"><?php echo '<a href="' . tep_href_link(FILENAME_DEFAULT) . '">' . tep_image(DIR_WS_IMAGES . $random_image, 'osCommerce') . '</a>'; ?></td>

to:

 

  case 5:
  $random_image ='image5.gif'; /* change the image name here */
  break;
}

// added code for image based on page name

switch ( basename($PHP_SELF) ) {

 case FILENAME_REVIEWS : $random_image = 'image_1.gif';
					   break;

 case FILENAME_SHOPPING_CART : $random_image = 'image_2.gif';
							 break;

 default: $random_image = 'oscommerce.gif';
}
?>
<td valign="middle"><?php echo '<a href="' . tep_href_link(FILENAME_DEFAULT) . '">' . tep_image(DIR_WS_IMAGES . $random_image, 'osCommerce') . '</a>'; ?></td>

In this part of the code:

 

switch ( basename($PHP_SELF) ) {

 case FILENAME_REVIEWS : $random_image = 'image_1.gif';
					   break;

 case FILENAME_SHOPPING_CART : $random_image = 'image_2.gif';
							 break;

 default: $random_image = 'oscommerce.gif';
}

Use entries from /catalog/includes/filenames.php for the "case" statements.

 

You might be interested in a similar thread:

 

Click Me

[germ]

Better leave this line OUT:

 

  default: $random_image = 'oscommerce.gif';

:blush:

[RichardPryor]

I came back here to give thanks and was gonna mention that I kept that line out :) Only took one mistake to figure out it was that line which was causing problems. Plus, to combine all three modifications (including the one you gave the link to), you need to replace '$show_me' with '$random_image'.

 

You are a genius man!

 

 

PS: I tried to take it up yet another notch but was unsuccessful. I hope that you understand what I want to do when you see my mistake:

 

 

// added code for image based on category name

 

switch ( $cPath ) {

 

case '23' : $random_image = 'case_23_1.jpg';

break;

 

case '23' : $random_image = 'case_23_2.gif';

break;

 

 

 

Can I have more than one image to choose from for the same category?

[germ]

Try this:

 

switch ( $cPath ) {

case '23_1' : $random_image = 'case_23_1.jpg';
break;

case '23_2' : $random_image = 'case_23_2.gif';
break;

[RichardPryor]

No, that resets category 23's random image to the ones used in the first code. Here's my code (modified to 2 cases to make it shorter)

 

<?php

/* coded for 2 images */
 $br = rand(0,1);

 switch ( $br ) {

 case 0:
  $random_image ='logo0.jpg';
  break;

 case 1:
  $random_image ='logo1.jpg';
  break;
}

// added code for image based on page name

switch ( basename($PHP_SELF) ) {

 case FILENAME_CHECKOUT_SHIPPING : $random_image = 'pixel_trans.gif';
					   break;

 case FILENAME_SHOPPING_CART : $random_image = 'pixel_trans.gif';
					   break;
}

// added code for image based on category name

switch ( $cPath ) {

 case '23_1' : $random_image = 'case_23_1.jpg';
		 break;

 case '23_2' : $random_image = 'case_23_2.jpg';
		 break;
}
?>

[RichardPryor]

Tried this but didnt work

 

$cPath = rand(0,1);