Advertisement:

Author Topic: How would you add rotating background images  (Read 12609 times)

Offline tampaba1

  • Jr. Member
  • **
  • Posts: 120
    • Th3Forum
How would you add rotating background images
« on: September 20, 2008, 09:07:13 PM »
I have designed a template which uses transparent elements and would like to rotate the background images on page refresh. I want to hard code into the template so no special mods are needed. Does anyone know how I would do this?
www.lightamillioncandles.com
Light a candle against online child abuse!!

Offline brianjw

  • SMF Hero
  • ******
  • Posts: 2,154
  • Gender: Male
Re: How would you add rotating background images
« Reply #1 on: September 20, 2008, 10:59:42 PM »
You wouldn't be able to do this via CSS *I THINK*. But you should be able to do this through a table background. It actually is possible to do this. Just add:
Code: [Select]
background-image: url(images/background/random.php);to any style inside of your themes style.css AFTER FOLLOWING THE BELOW INSTRUCTIONS

Here are instructions on how to do it:

1.) Open up your favorite web page editor. (SOMETHING OTHER THAN A WORD PROCESSOR)

2.) Copy the below code, paste in a php format page.
Code: [Select]
<?php

/*

AUTOMATIC IMAGE ROTATOR
Version 2.2 - December 4, 2003
Copyright (c) 2002-2003 Dan P. Benjamin, Automatic, Ltd.
All Rights Reserved.

http://www.hiveware.com/imagerotator.php

http://www.automaticlabs.com/


DISCLAIMER
Automatic, Ltd. makes no representations or warranties about
the suitability of the software, either express or
implied, including but not limited to the implied
warranties of merchantability, fitness for a particular
purpose, or non-infringement. Dan P. Benjamin and Automatic, Ltd.
shall not be liable for any damages suffered by licensee
as a result of using, modifying or distributing this
software or its derivatives.


ABOUT
This PHP script will randomly select an image file from a
folder of images on your webserver.  You can then link to it
as you would any standard image file and you'll see a random
image each time you reload.

When you want to add or remove images from the rotation-pool,
just add or remove them from the image rotation folder.


VERSION CHANGES
Version 1.0
- Release version

Version 1.5
- Tweaked a few boring bugs

Version 2.0
- Complete rewrite from the ground-up
- Made it clearer where to make modifications
- Made it easier to specify/change the rotation-folder
- Made it easier to specify/change supported image types
- Wrote better instructions and info (you're them reading now)
- Significant speed improvements
- More error checking
- Cleaner code (albeit more PHP-specific)
- Better/faster random number generation and file-type parsing
- Added a feature where the image to display can be specified
- Added a cool feature where, if an error occurs (such as no
  images being found in the specified folder) *and* you're
  lucky enough to have the GD libraries compiled into PHP on
  your webserver, we generate a replacement "error image" on
  the fly.

    Version 2.1
        - Updated a potential security flaw when value-matching
          filenames

    Version 2.2
        - Updated a few more potential security issues
        - Optimized the code a bit.
        - Expanded the doc for adding new mime/image types.

        Thanks to faithful ALA reader Justin Greer for
        lots of good tips and solid code contribution!


INSTRUCTIONS
1. Modify the $folder setting in the configuration section below.
2. Add image types if needed (most users can ignore that part).
3. Upload this file (rotate.php) to your webserver.  I recommend
   uploading it to the same folder as your images.
4. Link to the file as you would any normal image file, like this:

<img src="http://example.com/rotate.php">

5. You can also specify the image to display like this:

<img src="http://example.com/rotate.php?img=gorilla.jpg">

This would specify that an image named "gorilla.jpg" located
in the image-rotation folder should be displayed.

That's it, you're done.

*/




/* ------------------------- CONFIGURATION -----------------------


Set $folder to the full path to the location of your images.
For example: $folder = '/user/me/example.com/images/';
If the rotate.php file will be in the same folder as your
images then you should leave it set to $folder = '.';

*/


$folder '.';


/*

Most users can safely ignore this part.  If you're a programmer,
keep reading, if not, you're done.  Go get some coffee.

    If you'd like to enable additional image types other than
gif, jpg, and png, add a duplicate line to the section below
for the new image type.

Add the new file-type, single-quoted, inside brackets.

Add the mime-type to be sent to the browser, also single-quoted,
after the equal sign.

For example:

PDF Files:

$extList['pdf'] = 'application/pdf';

    CSS Files:

        $extList['css'] = 'text/css';

    You can even serve up random HTML files:

    $extList['html'] = 'text/html';
    $extList['htm'] = 'text/html';

    Just be sure your mime-type definition is correct!

*/

    
$extList = array();
$extList['gif'] = 'image/gif';
$extList['jpg'] = 'image/jpeg';
$extList['jpeg'] = 'image/jpeg';
$extList['png'] = 'image/png';


// You don't need to edit anything after this point.


// --------------------- END CONFIGURATION -----------------------

$img null;

if (
substr($folder,-1) != '/') {
$folder $folder.'/';
}

if (isset(
$_GET['img'])) {
$imageInfo pathinfo($_GET['img']);
if (
    isset( $extListstrtolower$imageInfo['extension'] ) ] ) &&
        
file_exists$folder.$imageInfo['basename'] )
    ) {
$img $folder.$imageInfo['basename'];
}
} else {
$fileList = array();
$handle opendir($folder);
while ( false !== ( $file readdir($handle) ) ) {
$file_info pathinfo($file);
if (
    isset( $extListstrtolower$file_info['extension'] ) ] )
) {
$fileList[] = $file;
}
}
closedir($handle);

if (count($fileList) > 0) {
$imageNumber time() % count($fileList);
$img $folder.$fileList[$imageNumber];
}
}

if (
$img!=null) {
$imageInfo pathinfo($img);
$contentType 'Content-type: '.$extList$imageInfo['extension'] ];
header ($contentType);
readfile($img);
} else {
if ( function_exists('imagecreate') ) {
header ("Content-type: image/png");
$im = @imagecreate (100100)
    or die ("Cannot initialize new GD image stream");
$background_color imagecolorallocate ($im255255255);
$text_color imagecolorallocate ($im0,0,0);
imagestring ($im255,  "IMAGE ERROR"$text_color);
imagepng ($im);
imagedestroy($im);
}
}

?>


3.) Save as rotate.php

4.) Upload to your ./<dir_to_smf>/Themes/<your_theme>/images/background
If you need to make a folder called background than make one inside of Themes/<your_theme/images

5.) Upload roate.php to the new folder called background inside of your theme. Choose background images you want to randomly rotate and put them in /background/ as well. It doesn't matter what the image files are called. The only requirement is they must be one of these image formats: gif, jpg, jpeg, png

6.) Inside wherever you want the images to rotate. Probably in a table. Use a code like below:
Code: [Select]
<table background="', $settings['images_url'], '/background/rotate.php">

It should now rotate through all images inside of the background as long as you link it to the php file. This should work, and I know the code I provided works because I use it on my site for different purposes.

To test the actual rotation of the images, just run this url directly in your browser.

http://www.your-site.com/<dir_to_smf>/Themes/<your_theme>/images/background/rotate.php

Hope this helps ;D
« Last Edit: September 20, 2008, 11:03:36 PM by brianjw »

Offline tampaba1

  • Jr. Member
  • **
  • Posts: 120
    • Th3Forum
Re: How would you add rotating background images
« Reply #2 on: September 21, 2008, 03:44:03 AM »
Thank you. That's basically the script I've been working with. Apparently, I was using the wrong image call code. Works like a charm now.

Thanks again.
www.lightamillioncandles.com
Light a candle against online child abuse!!

Offline WaveZtream

  • Semi-Newbie
  • *
  • Posts: 34
Re: How would you add rotating background images
« Reply #3 on: March 09, 2010, 05:13:41 PM »
I know this post it old but it seems to work to some part. Well the rotator works but can't get step 6 to work :/