Random/Shuffle Images in PHP - Fast Help

Hello guys!

I have something like this: 4 images with links in my website header...and I want these images with links be shuffled every time the visitor loads a page of my website.

For example:

Visitor enters first time on my website. The images loads in this order:


<a href="http://www.site.com/1"><img src="http://www.site.com/image1.jpg" width="175" height="90" /> </a>
<a href="http://www.site.com/2"><img src="http://www.site.com/image2.jpg" width="175" height="90" /> </a>
<a href="http://www.site.com/3"><img src="http://www.site.com/image3.jpg" width="175" height="90" /> </a>
<a href="http://www.site.com/4"><img src="http://www.site.com/image4.jpg" width="175" height="90" /> </a>

Visitor loads another page. The images shuffle and loads, for example:
<a href="http://www.site.com/1"><img src="http://www.site.com/image1.jpg" width="175" height="90" /> </a>
<a href="http://www.site.com/3"><img src="http://www.site.com/image3.jpg" width="175" height="90" /> </a>
<a href="http://www.site.com/4"><img src="http://www.site.com/image4.jpg" width="175" height="90" /> </a>
<a href="http://www.site.com/2"><img src="http://www.site.com/image2.jpg" width="175" height="90" /> </a>



And so on...


Any ideas?


Thanks!!!

 

An easy way is to use an array to store your link/image code, use shuffle to randomize it and then print it.

For example:

$links=array('Your code 1','Your code 2','Your code 3', 'Your code 4');
 
shuffle($links);
 
foreach ($links as $link) {
    echo $link;
}

PHP:

Something like this should work for you.

 

Just first question is do you want to SHUFFLE them or to have them in that order loaded?

Can it be image like 1 3 5 2 4 5 6 7 3 5 7
or you want to load them as 1 2 3 4 5 6 7 ... and then again 1 2 3 4 5 6 7

I would suggest that you make simple .txt file and call it like headerimageDB.txt and then in it put following (each in new row):

http://www.site.com/1###http://www.site.com/image1.jpg
http://www.site.com/2###http://www.site.com/image2.jpg
http://www.site.com/3###http://www.site.com/image3.jpg
http://www.site.com/4###http://www.site.com/image4.jpg

And then go and open that file and read each line from that file, and use simple explode function to get URL and image source.

 

Here's a simple example with images in a db, use this on a test area only or test database if trying. Works fine on localhost using XAMPP. You have to add images to the database, with id and filename. I tested it with 3 images, works fine.

First you'll need a database before inserting this following table, so make sure you have one made, then:

CREATE TABLE IF NOT EXISTS `test` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `filename` varchar(255) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8 AUTO_INCREMENT=1 ;

Code (markup):

test.php - you have to make changes as desired

<?php
 
// database settings
 
$host = "localhost";
$user = "root";
$password = "";
$db = "news";
$table = "test";
 
$dbconn = mysql_connect("{$host}","{$user}","{$password}");
if (!$dbconn)
  {
  die('Could not connect: ' . mysql_error());
  }
 
mysql_select_db("{$db}",$dbconn)
  or die("Could not select db");
 
 
// slideshow settings
 
$height = "300px"; // height of images
// or
//$width = ""; // width of images
$transition = "fade"; // choose your transition type, ex: fade, scrollUp, shuffle
$limit = "3"; // number of images to display
$pathtoimages = "http://localhost/";
 
$HTMLOUT = '';
 
$HTMLOUT .= "
<script type=\"text/javascript\" src=\"js/jquery.js\"></script>
<script type=\"text/javascript\" src=\"js/jquery.cycle.all.js\"></script>
<script type=\"text/javascript\">
$(document).ready(function() {
    $('.slideshow').cycle({
        fx: '{$transition}'
    });
});
</script>";
 
 
    $orderby = "ORDER BY RAND () LIMIT {$limit}";
    $res = mysql_query("SELECT COUNT(*) FROM {$table}") or die(mysql_error());
    $row = mysql_fetch_array($res,MYSQL_NUM);
    $count = $row[0];
 
    if ($count)
    {
      $query = "SELECT * FROM {$table} $orderby";
      $res = mysql_query($query) or die(mysql_error());
    }
    else
    {
      unset($res);
    }
 
 
$HTMLOUT .= "
<div class=\"slideshow\" style=\"width: 100%; margin: auto; text-align: center;\">";
 
    if ($count)
    {
 
    $i = 0;
 
    while($row = mysql_fetch_assoc($res))
    {
      $filename = $row['filename'];
 
      $HTMLOUT .= "<img src=\"{$pathtoimages}{$filename}\" height=\"{$height}\" title=\"{$filename}\" alt=\"Missing Image \n\" />";
 
      $i++;
    }
 
    }
 
else
    {
    $HTMLOUT .= "Nothing Found";
    }
 
 
$HTMLOUT .= "</div>";
 
 
    print $HTMLOUT;
 
 
?>

PHP:

I tried to make it as simple as possible depending on what you want, which I'm not sure exactly. This selects images from a table and displays in a random order as a slideshow. It can be changed and manipulated to whatever you want.

For javascript files: http://malsup.github.com/jquery.cycle.all.js
jquery.js: http://pastebay.com/1184471

 

Look up the rand function, and if you can't find it the php documentation should be able to help you with this. The php documentation is the bible of all php coders, it's only after reading it in full you ask help from the community, php docs cover almost everything !