View Single Post
Old 12-24-2012, 01:59 PM   PM User | #5
sorlaker
Regular Coder

 
Join Date: Dec 2009
Posts: 166
Thanks: 23
Thanked 1 Time in 1 Post
sorlaker has a little shameless behaviour in the past
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.
sorlaker is offline   Reply With Quote