By using jQuery, PHP and MySQL you can create a clever an image sort script to allow users to choose the order of images in their advert for example.

Once you have your jQuery Sortable plug-in installed (available here: http://jqueryui.com/demos/sortable/) and it is successfully posting the image order to MySQL you can load that order and display the images in that order.

Step 1

First of all you need to find all images that match the id of the record you are currently looking at e.g. example.com/advert.php?cid=17 and call this ‘a’.

1
2
3
4
5
6
7
8
9
10
11

// Find all images relating to this item
$querya = "SELECT * FROM images WHERE cid ='$cid'";
$resulta = mysql_query($querya) or die(mysql_error());
 
$a = array(); // Define an Array
$i=0; // Start the image count at 0 so the first result equals 1
 
while($rowa=mysql_fetch_array($resulta)){ 
    $keya=$i++;
    $a[$keya] = $rowa['imgdata'];
}

// Find all images relating to this item
$querya = "SELECT * FROM images WHERE cid ='$cid'";
$resulta = mysql_query($querya) or die(mysql_error());

$a = array(); // Define an Array
$i=0; // Start the image count at 0 so the first result equals 1

while($rowa=mysql_fetch_array($resulta)){ 
    $keya=$i++;
    $a[$keya] = $rowa['imgdata'];
}

This will produce an array of image file names stored in the MySQL table with a corresponding number starting with 1.

Step 2

Next we need to find the image order for the current id of the record we are looking at. The image order should be saved in the MySQL table a comma separate list e.g. 3,1,4,2,5 so we must also explode this list too and call it ‘b’.

1
2
3
4
5
6
7
8
9

// Find order of images relating to this item
$queryb = "SELECT * FROM images_order WHERE cid = $cid";
$resultb = mysql_query($queryb) or die(mysql_error());
 
while($rowb = mysql_fetch_array($resultb)){
    $b = $rowb['order'];
}
 
$b = explode(',', $b);

// Find order of images relating to this item
$queryb = "SELECT * FROM images_order WHERE cid = $cid";
$resultb = mysql_query($queryb) or die(mysql_error());

while($rowb = mysql_fetch_array($resultb)){
	$b = $rowb['order'];
}

$b = explode(',', $b);

Step 3

Next we need to match the order of the images to the actual images for this item. So we first define a new array called ‘c’. Then we link the image order ‘b’ with the list of images in ‘a’. This will then display the images ‘a’ in the order specified in ‘b’.

1
2
3
4
5
6

// Match order of images to the actual images for this item
$c = array(); // Define an Array
 
foreach($b as $index) {
    $c[$index] = $a[$index];
}

// Match order of images to the actual images for this item
$c = array(); // Define an Array

foreach($b as $index) {
    $c[$index] = $a[$index];
}

Step 4

Now we have the images in the correct order ‘c’. We now need to display this to the user.

1
2
3
4
5
6
7
8
9

echo("<ul>");
 
foreach($b as $index) {
 
    echo("<li><img src='image-uploads/$a[$index]' /></li>");
 
}
 
echo("</ul>");

echo("<ul>");

foreach($b as $index) {

    echo("<li><img src='image-uploads/$a[$index]' /></li>");

}

echo("</ul>");

This will then display the images on the page in the correct order in a <ul> list.

If you have any questions about this script then please feel free to comment below.