Facebook like photo order sorting in mootools

It’s easy to build facebook like photo order sort using mootools. Mootools already has a class (Sortables) to handle this. I’ve built a very simple example by which we can sort photo thumbs order through mouse drag and drop and we can save the orders on database to load the photos later with sorted order. Here are the details -First get mootools core version from http://mootools.net/download. Then get the additional classes(Drag, Drag.Move, Sortables) from http://mootools.net/more. Let’s you have the thumbs page html as

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<link rel="stylesheet" href="styles/styles.css" type="text/css" />

  	<script type="text/javascript" src="js/mootools-1.2.3.js"></script>
  	<script type="text/javascript" src="js/mootools-1.2.3.1-more.js"></script>
  	<script type="text/javascript" src="js/sortThumbs.js"></script>

	<title>Sortables Thumbs</title>
</head>
<body>
<div id="sortable-thumbs">
    	  <img src="images/thumb1.jpg" id="1" alt="" />
    	  <img src="images/thumb2.jpg" id="2" alt="" />
        <img src="images/thumb3.jpg" id="3" alt="" />
    	  <img src="images/thumb4.jpg" id="4" alt="" />
    	  <img src="images/thumb5.jpg" id="5" alt="" /></div>
</body>
</html>

On above the third js script we have to create. See container id which contains thumbs, its important to use later. Let styles of this script
is (optional) -

body{
 margin:0;
 padding:0;
}
#sortable-thumbs{
 width:960px;
 margin:20px auto;
}

#sortable-thumbs img{
 border:1px solid #EEEEEE;
 padding:3px;
 margin: 5px;
 float:left;
 cursor: pointer;

}

Followings are the code of third js script which is pretty easy and straigt forward -

window.addEvent('domready', function() {
      /* create sortables */
    	var sb = new Sortables('sortable-thumbs', {
    		/* set options */
    		clone:true,
    		revert: true,
    		/* initialization stuff here */
    		initialize: function() {

    		},
    		/* once an item is selected */
    		onStart: function(el,cl) {
    			el.setStyle('background','#EEEEEE');
    		},
    		onSort: function(el, clone){
          sorted = true;
        },
    		/* when a drag is complete */
    		onComplete: function(el) {
    			el.setStyle('background','#FFFFFF');

    			if(sorted) {
              sorted = false; // clear it out again

                //build a string of the order
          			var sort_order = '';
          			sort_order = sb.serialize();

          			//do an ajax request
          			var req = new Request({
          					url:'save.php',
          					method:'post',
          					autoCancel:true,
          					data:'sort_order=' + sort_order,
          					onRequest: function() {},
          					onSuccess: function(data) {
          					 	alert(data);
                       //update divs if needed
          					}
          				}).send();

          			}

    		}
    	});

});

Here after sorted the thumbs, i sent an ajax request to save.php page which will update the thumbs order on database to
load the photos in order later (like facebook). Here is the code sample for save.php

<?php
 $sort_order = $_REQUEST['sort_order'];
 $orders = explode(',',$_REQUEST['sort_order']);

	foreach($orders as $order=>$id){
			$query = 'UPDATE photo_table SET sort_order = '.$order.' WHERE id = '.$id;
			//...update query function as needed
	}

print_R($orders);

?>

It’s just sample code, you have to update as you needed. Run this from any webserver. It’s really very simple and exciting stuffs!
Example code Git url –

git clone git://github.com/appskitchen/facebook-like-photo-ordering-mootools.git facebook-like-photo-ordering-mootools

or visit here

Don’t forget to drop your feedback here ;). Thanks

About these ads

22 thoughts on “Facebook like photo order sorting in mootools

  1. Hi, I just found your script after a long google search.

    I would like to use it, to sort about 50 pictures online with someone else.

    Unfortunately my mysql-knowledge is not very great.
    I need to tell the script which database it should use, since I am having more than one.
    Also how do I create the table and values for this task? Can this be done automatically?

    Any help is appreciated .
    Thanks in advance for your answer

    Thomas

    • Hi Thomas,
      To keep the sort order, you have to store the order on database, i used mysql in my example. You don’t have to be expert but you need minimal knowledge of sql, mysql and php connectivity with mysql. You can learn this from here – http://php.net/manual/en/book.mysql.php. To create/manage database/tables you can use free gui tool like sqlyoug, phpmyadmin. Thanks

  2. Thanks for your reply

    Well I own a big mysql book already, but I just couldnt figure out where to set the path to my database in your save.php

    $query = ‘UPDATE photo_table SET sort_order = ‘.$index.’ WHERE id = ‘.$id;

    There it says that the data is stored in the photo_table.
    So if I create this table in my mysql database: web_usr_3 , how do I tell this in the script?

    Because I also have a database: web_usr_1 and web_usr_2 .

    I am used to define which database is used in different cms systems in a config.php, but I have no clue how to write this path entirely myself.

    Maybe you have another hint for me?

    • Thomas,
      First create the table on your target database as you are using multiple databases. You may already coded while to select which database which will be. If not – you can select your database as follow –

      <?php
      $link = mysql_connect('localhost', 'mysql_user', 'mysql_password');
      if (!$link) {
          die('Could not connect: ' . mysql_error());
      }
      
      // make foo the current db
      $db_selected = mysql_select_db('web_usr_1', $link);
      if (!$db_selected) {
          die ('Can\'t use foo : ' . mysql_error());
      }
      
      $query = ‘UPDATE photo_table SET sort_order = ‘.$index.’ WHERE id = ‘.$id;
      $result = mysql_query($query);
      ?>
      

      On above php code, db is selected on line number 8 and query executed on line #14.

  3. Great thank you, I tried something like this before, but I confused mysgl_user with database name. Now it seems I am connected.

    I created already the table: photo_table.
    Now I need to insert id field(s), is`nt it?
    Maybe some other fields also?
    I dont know how and where exactly?

    Thanks for your patience

    • Thomas, if id field is auto incremented, you don’t have to supply any value for this. Keep reading your mysql book, it’s very easy. hope you can get it very easily. Thanks

  4. Hello and thank you for the code.

    I’m looking for some mootools code which will do the same as the Slide Show sorter near the bottom of this page http://tool-man.org/examples/edit-in-place.html.

    It is important that it includeds the edit in place ability also and that additional images wrap and do not overflow. I’m not able to use the tool-man script as it conflicts with mootools in Joomla

    Thanks
    Jokubas

    • Hi Jokubas,
      That can be done easily too, specially using mootools. The tricks is – while click on a title container – need to hide that container and have to show related textbox and once you cursor out of that textbox, get the contents from the textbox, put it to container, hide the textbox and show the container; thats the tricks. Mootools has a very strong selector class. Try to implement as i told with my above example, thanks

  5. Hi,
    In this Query: “$query = ‘UPDATE photo_table SET sort_order = ‘.$index.’ WHERE id = ‘.$id; ”
    I can’t understand variable $index.. help me pls ^^

  6. Hello kodegeek,

    First, thanks to share your code !

    I tried to set it up, but unfortunately it didn’t work. Let me explain, what I need…

    I got a mySql table called photos, with 4 columns : id, id_album, url

    For each column :
    - id = the auto-incremented ID (I don’t want to touch it for some reasons)
    - id_album = a generated timestamp (1290991937 for instance)
    - url = the path to the picture

    Using your script, my needs are : I want to switch between the id_album of the different pictures I manipulate. But I don’t know exactly what to do. For information, I tried to use your script, but it seems to -work- only with “id” and not “id_album”. I say -work- but in fact it’s not really working : it returns an array, but the SQL query has no effect on my DB.

    Please could you take a look to my specific problem ?

    Thanks a lot !

  7. Hey kodegeek !

    As I told you, I’ve found a solution for my pictures and it’s working fine ! Thank you !

    You know, I like this sorting system. So I want to ask you if you could tell me how do sort id’s by manipulating divs instead images ?

    I give you my example :
    - In my database, I’ve got a table called “albums” with 3 columns : id, sort_order, thumb

    - My web page shows each “thumb” of the “albums” table like this :

    My albums

    <?php
    $req = mysql_query("SELECT * FROM albums ORDER BY id ASC") or die ("Erreur sql : ".mysql_error());
    while ($result = mysql_fetch_array($req)) {
    echo '’;
    }
    ?>
     

    So I want to be able to manipulate each DIV and sort order. Any idea? Thanks for your help… ;-)

  8. Ok, finally I got my solution… In fact, it’s easy, I just had to play with id’s, from the div or from the image… Amazing script… :-)

  9. Hey this is a good demo. the only thing I can see is that you have to hold drag then release mouse to see what you are moving then click mouse to drop. Is there away around the click drag and release mouse, the release mouse would be an ideal step to remove

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s