Image_Order画像リストの作成のためにデータベーステーブルにフィールド[photo_ord]を1つ追加します
<li class="left" id="someId">
<a href="#" >
<img src="image path here" alt="error" id="image_id_here" class="img_thumb"/>
</a>
</li>
関数ハンドラー(画像が移動するときに呼び出されます)
<a href="#" onclick="change_order()" class="btn_1">Save Order</a>
関数はUpdateImage-Orderのajax呼び出しを行います
function change_order()
{
var urlst="";
var co=1;
$('.img_thumb').each(function()
{
urlst=urlst+this.id+'#'+co+'*';
co++;
});
$.ajax(
{
type:"POST",
url:"xhr_change_image_order.php",
data:"orader="+urlst,
success:function(data)
{
if(data=="changed")
alert("Image order changed.");
},
error:function()
{
alert('error occure');
}
});
}
ファイル:xhr_change_image_order.php(データベースを更新します)
<?php
$url = $_POST['orader'];
$photo_arr = explode("*", $url);
foreach ($photo_arr as $k => $ph) {
if (strlen($ph) > 1)
{
// Update Query
// $arr[0] will contain image id
// $arr[1] will contain image order
UPDATE `photo` SET `photo_ord` = $arr[1] WHERE `photo_id` = $arr[0];
}
}
echo "changed";
?>
その後、ギャラリーを作成するときORDERBY句を使用してデータをフェッチするだけです
SELECT * FROM photo ORDER BY photo_ord asc or DESC