New project image rotation question

[Ctechinfo]

I am currently working on a project site for my mother. One of the ideas I came up with is to have a spot on the front page that contains an image with a description that will change (i.e. rotate through a number of photos/descriptions). I tried adapting a random quote script to do the job but unfortunate it kinda sucked at the quote rotation, and sucks even worse for rotation pictures.


I don't know what the best option is for such an idea. To give you a general idea of the codeblock should be processed by the browser:

<td valign="top" width="10%" bgcolor="#99aa22"><p style="text-align: center;"><img src="images/coverphoto.jpg" /><br /><em>Hesperis matronalis</em>, commonly known as Dame's Rocket
</td>

Its a botany website. The idea is to have pictures with the names underneath each image. The maximum I would probably say would be 10 images/description..

Thanks for the input.

[Custard7A]

Hi,

If you're expecting to update this manually, then something along these lines should work fine:

PHP Code:


<?php

  $number_of_images = 10;

  $image_locations = array(
    1 => 'images/1.jpg',
    2 => 'images/2.jpg',
    3 => 'images/3.jpg',
    // Etc..
    );
  $image_descriptions = array(
    1 => '<em>1st image</em>, this is filler text.',
    2 => '<em>2nd image</em>, this is filler text.',
    3 => '<em>3rd image</em>, this is filler text.',
    // Etc..
    );

  // Gets a random number between 1 and the number of images, in this case 10.
  $select = rand(1, $number_of_images);

  $result = '<td valign="top" width="10%" bgcolor="#99aa22"><p style="text-align: center;"><img src="' . $image_locations[$select] . '" /><br />' . $image_descriptions[$select] . '</p></td>';

  print $result;

  ?>

Hopefully that is quite self-explanatory. To change the images that will show up you need only add or remove values to the two arrays, and remember to keep the number_of_images variable current. This isn't the most efficient script of course. It doesn't have error-handling, and it should be counting the number of images for you. I'm not sure how much PHP you know, but maybe you could improve it to your own liking.

Also, the paragraph tag was not closed in the HTML you posted. Good luck.

[Ctechinfo]

Thanks. looks very simple. might have questions after I try it out for tweakability puposes.

[Ctechinfo]

Well I got this code tested on my local server and my live test page and it works well although not exactly what I looking for. Although, I discovered that if only having 3 images in the list there is an error thrown got that sorted out.. LOL!!

Yes, this code changes the image/description on page reload. I was hoping for like a slideshow feature where it flipped through by itself while not having a reload needed...

[sorlaker]

Well u can do something like this.
Whole code here -> http://pastebin.com/Xxx4urR9
Demo here -> http://sorlakertest2.hostzi.com/1-sliderndescription/
This is an example code of your slider contents.

PHP Code:

$div = array(
            "images" => array(
                0 => "http://image.naldzgraphics.net/2012/09/15-the-abstract.jpg",
                1 => "http://www.inspirationmix.com/wp-content/uploads/2010/11/abstract-colorful-background-green-2.jpg",
                2 => "http://www.kkuodesign.com/wordpress/wp-content/uploads/2010/07/iphone-wallpaper-abstract-design-71.png",
                3 => "http://cdn.instantshift.com/wp-content/uploads/2012/10/abstract-and-light-effect-tutorials-55.jpg",
                4 => "http://cdn.instantshift.com/wp-content/uploads/2012/10/abstract-and-light-effect-tutorials-21.jpg"
            ),
            "descriptions" => array(
                0 => "Desc1",
                1 => "Desc2",
                2 => "Desc3",
                3 => "Desc4",
                4 => "Desc5"
            )
        ); 


N this is the jquery function.

$(function (){		
		var numberOfImages = <?php echo count($div['images']); ?>;
		var images = new Array();
		var descriptions = new Array();
		<?php
		for($i = 0; $i < count($div['images']); $i++) {
			echo "images[".$i."] = \"".$div['images'][$i]."\";\n";
			echo "descriptions[".$i."] = \"".$div['descriptions'][$i]."\";\n";
		}
		?>
		function sortImages(){	
			var randomNumber = Math.floor((Math.random() * numberOfImages)); //this will get a random number from 0 -> numberOfImages - 1
			//alert(randomNumber);
			$('#slider').css("background-image", 'url("'+ images[randomNumber] +'")');
			$('#sliderDescription').html(descriptions[randomNumber]);
		}
		sortImages();
		setInterval(function (){sortImages()}, 1000); // the background will change every 5 seconds.
	});

Another way is to display all the images n do that .hide() .show() .fadeIn() .fadeOut thing as we do in jquery.

[Custard7A]

Originally Posted by Ctechinfo

I was hoping for like a slideshow feature where it flipped through by itself while not having a reload needed...

Ah, you forgot to mention that. As sorlaker has implied above, that would be in a Javascript job. Actually, it would most likely be simpler to have the whole thing in Javascript (That's if you have trouble understanding / using sorlaker's code).

P.S. The interval in your code sorlaker is not 5 seconds, I expect you speed it up for testing and forgot to change it back, or some-such. Also, I get some issues with the images not loading, or loading after a long time (I watched that page for half a minute, all blank. I checked back in 5 minutes, 2 were showing. I checked back in 10 minutes, 3 were showing.) I don't know if pre-loading should be involved or if it's something else.

[sorlaker]

Originally Posted by Custard7A

Ah, you forgot to mention that. As sorlaker has implied above, that would be in a Javascript job. Actually, it would most likely be simpler to have the whole thing in Javascript (That's if you have trouble understanding / using sorlaker's code).

P.S. The interval in your code sorlaker is not 5 seconds, I expect you speed it up for testing and forgot to change it back, or some-such. Also, I get some issues with the images not loading, or loading after a long time (I watched that page for half a minute, all blank. I checked back in 5 minutes, 2 were showing. I checked back in 10 minutes, 3 were showing.) I don't know if pre-loading should be involved or if it's something else.

yaya my bad (about the 5 seconds ops!) ^^
I've just figured that issue. So the best way is make the user download all the images then shuffle them each 5 seconds. Using jquery's document.ready function. http://api.jquery.com/ready/

Check demo n code here :
Demo : http://sorlakertest2.hostzi.com/1-sl...ion2/index.php
Code : http://pastebin.com/seRpurgm