Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    Regular Coder
    Join Date
    Sep 2012
    Posts
    100
    Thanks
    5
    Thanked 3 Times in 3 Posts

    New project image rotation question

    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:

    Code:
    <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.

  • #2
    Regular Coder Custard7A's Avatar
    Join Date
    Jul 2010
    Location
    Australia
    Posts
    286
    Thanks
    32
    Thanked 33 Times in 33 Posts
    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(
        
    => 'images/1.jpg',
        
    => 'images/2.jpg',
        
    => 'images/3.jpg',
        
    // Etc..
        
    );
      
    $image_descriptions = array(
        
    => '<em>1st image</em>, this is filler text.',
        
    => '<em>2nd image</em>, this is filler text.',
        
    => '<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.

  • #3
    Regular Coder
    Join Date
    Sep 2012
    Posts
    100
    Thanks
    5
    Thanked 3 Times in 3 Posts
    Thanks. looks very simple. might have questions after I try it out for tweakability puposes.

  • #4
    Regular Coder
    Join Date
    Sep 2012
    Posts
    100
    Thanks
    5
    Thanked 3 Times in 3 Posts
    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...

  • #5
    Regular Coder
    Join Date
    Dec 2009
    Posts
    173
    Thanks
    24
    Thanked 1 Time in 1 Post
    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(
                    
    => "http://image.naldzgraphics.net/2012/09/15-the-abstract.jpg",
                    
    => "http://www.inspirationmix.com/wp-content/uploads/2010/11/abstract-colorful-background-green-2.jpg",
                    
    => "http://www.kkuodesign.com/wordpress/wp-content/uploads/2010/07/iphone-wallpaper-abstract-design-71.png",
                    
    => "http://cdn.instantshift.com/wp-content/uploads/2012/10/abstract-and-light-effect-tutorials-55.jpg",
                    
    => "http://cdn.instantshift.com/wp-content/uploads/2012/10/abstract-and-light-effect-tutorials-21.jpg"
                
    ),
                
    "descriptions" => array(
                    
    => "Desc1",
                    
    => "Desc2",
                    
    => "Desc3",
                    
    => "Desc4",
                    
    => "Desc5"
                
    )
            ); 
    N this is the jquery function.
    Code:
    $(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.

  • #6
    Regular Coder Custard7A's Avatar
    Join Date
    Jul 2010
    Location
    Australia
    Posts
    286
    Thanks
    32
    Thanked 33 Times in 33 Posts
    Quote Originally Posted by Ctechinfo View Post
    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.

  • #7
    Regular Coder
    Join Date
    Dec 2009
    Posts
    173
    Thanks
    24
    Thanked 1 Time in 1 Post
    Quote Originally Posted by Custard7A View Post
    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
    Last edited by sorlaker; 12-29-2012 at 04:24 AM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •