Facebook-style image reordering?

**memerson** · 01-20-2009 02:34 PM

I'm currently working on a photography web site, and so far I have a scrolling div with the thumbnails in:

http://www.amitypixels.com/zoom/gallerytest.php

The links at the top left (ScrollDown, ScrollUp etc) move the div content up and down respectively.

However my problem is that the client wants to be able to reorder the images in the div (currently they are listed in alphabetical order) similar to the way Facebook does it in their Ranking applications (if anyone is unaware of what I refer to, basically it's a list of your friends with UP and DOWN arrows so you can move them up or down the ranks by clicking on the arrows). Is there an easy way of doing this using Javascript? I don't really want to resort to Flash as this is only a budget job and Flash it kind of outside my knowledge.

Any help appreciated, thanks
Michael

**MrNobody** · 01-20-2009 06:40 PM

If you're keeping a lit of the images in an array, it is easy to change positions in the array. Of course, the DOM also allows you to remove a child element from the document and insert it at a different point within the same parent -- much like an array.

**MrNobody** · 01-20-2009 08:44 PM

Originally Posted by MrNobody

Of course, the DOM also allows you to remove a child element from the document and insert it at a different point within the same parent -- much like an array.

I was bored, so I accepted my own challenge in order to prove I tell no lies. I even made it a bit fancy.

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                      "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Move HTML Elements</title>
<style type="text/css">
<!--
.button {
	cursor: pointer;
}
#container {
	float: left;
	padding: 10px;
	position: relative;
	text-align: center;
}
.moveable {
	border: 2px solid black;
	margin: 5px;
	padding: 5px;
	position: relative;
	width: 50px;
	height: 50px;
	text-align: center;
	line-height: 36pt;
}
.reverse {
	color: #FFFFFF;
	font-weight :bold;
}
-->
</style>
<script type="text/javascript">
<!-- //
function MoveObject(evt)
{
	var target = (evt.target) ? evt.target : evt.srcElement;
	if (target.blur) target.blur();
	if (SelectedObject)
	{
		var ParentObject = SelectedObject.parentNode;
		var child, children = ParentObject.getElementsByTagName("DIV");
		var x, len = children.length;
		for (x=0; x<len; ++x) { if (children[x] == SelectedObject) break; }
		if (x<len) {
			if (target.alt == 'up') {
				if (x>0) {
					child = ParentObject.removeChild(children[x]);
					ParentObject.insertBefore(child, children[x-1]);
				}
				else alert("Top of list.");
			}
			else {
				if (x<(len-1)) {
					child = ParentObject.removeChild(children[x]);
					if (x==(len-2)) ParentObject.appendChild(child);
					else ParentObject.insertBefore(child, children[x+1]);
				}
				else alert("Bottom of list.");
			}
		}
		else alert("Child not found.");
	}
	else alert("No object selected.");
	return false;
}
function SelectObject(evt)
{
	var target = (evt.target) ? evt.target : evt.srcElement;
	if (target.blur) target.blur();
	StopSelection();
	StartSelection(target);
	return false;
}
var SelectedObject = null;
function StartSelection(obj)
{
	if (0 <= obj.className.indexOf('moveable'))
	{
		SelectedObject = obj;
		SelectedObject.style.borderColor = "#FF7FFF";
		SelectedObject.style.borderStyle = "dashed";
		SelectedObject.style.borderWidth = "2px";
		SelectionTimer = window.setTimeout("AlterSelection()", 333);
	}
}
function StopSelection()
{
	if (SelectionTimer) window.clearTimeout(SelectionTimer);
	if (SelectedObject)
	{
		SelectedObject.style.borderColor = "";
		SelectedObject.style.borderStyle = "";
		SelectedObject.style.borderWidth = "";
	}
	SelectedObject = null;
}
var SelectionTimer = null;
function AlterSelection()
{
	if (SelectedObject) {
		if (SelectedObject.style.borderStyle.indexOf("dashed") < 0) {
			SelectedObject.style.borderColor = "#FF7FFF";
			SelectedObject.style.borderStyle = "dashed";
		} else {
			SelectedObject.style.borderColor = "#7F7FFF";
			SelectedObject.style.borderStyle = "dotted";
		}
		SelectionTimer = window.setTimeout("AlterSelection()", 333);
	}
}
// -->
</script>
</head>

<body>
<div id="container" onclick="return SelectObject(event)">
  <div class="moveable" style="background-color:#FFFF00">Div1</div>
  <div class="moveable" style="background-color:#00FF00">Div2</div>
  <div class="moveable" style="background-color:#00FFFF">Div3</div>
  <div class="moveable" style="background-color:#FF00FF">Div4</div>
  <div class="moveable reverse" style="background-color:#0000FF;">Div5</div>
  <div class="moveable reverse" style="background-color:#FF0000;">Div6</div>
</div>
<div id="controls" style="margin:100px; width:100px; text-align:center;">
  <p>Select Object<br>
	at left...</p>
  <p><img src="../images/VolUpA.gif" alt="up"
	 border="0" class="button" width="32" height="32"
	 onmousedown="this.src='../images/VolUpB.gif'; return true;"
	 onmouseup="this.src='../images/VolUpA.gif'; return true;"
	 onclick="return MoveObject(event)"><br>
	<img src="../images/VolDnA.gif" alt="down"
	 border="0" class="button" width="32" height="32"
	 onmousedown="this.src='../images/VolDnB.gif'; return true;"
	 onmouseup="this.src='../images/VolDnA.gif'; return true;"
	 onclick="return MoveObject(event)"></p>
  <p>...then Change<br>
	their Order</p>
</div>
</body>
</html>

**memerson** · 01-23-2009 07:06 AM

That's great! Thanks very much!!

**memerson** · 01-23-2009 07:16 AM

Just a quick question -

Although this works great, I need the page to be able to save the order in which the images look after moving them around. Is there a way of overwriting the file with the new list ordering? Currently the images I have are pulled in from a directory in alphabetical order, so I guess really the names of the images would have to be changed in order to reflect the position changes...

**MrNobody** · 01-23-2009 10:13 AM

You can save the images, in their current order, into your database (using AJAX) as follows:

Code:

StopSelection();
var htmlString = document.getElementById("container").innerHTML;

Then, you can restore that order, from your database, as follows:

Code:

document.getElementById("container").innerHTML = htmlString;

I purposely wrote it with no events on the children so that it is easy to manipulate them this way.

**memerson** · 01-25-2009 07:03 AM

I see. However, the page uses a file list function to grab the images from a directory of thumbnails on the server, which contains a further directory called "fullsize". That way, when someone clicks on the thumb is opens the fullsize picture relating to it.

Here's the page code:

Code:

$str='<div id="gallery"><ul style="width:720px;height:300px;">';

function File_List($path,$forget){

$dir_handle = @opendir($path) or die("Unable to open $path");
$i=1;
$output = array();
while ($file = readdir($dir_handle)){ 
if($file!="." && $file!=".." && $file!=$forget){
$output[$i]= $file;	
$i++;
}
}
closedir($dir_handle);
sort($output);
return $output;
}

$mypics = File_List('gallery/','gallery.php');

for($i=1;$i<=count($mypics)-1;$i++){

$str.='<li><a rel="milkbox" href="http://www.amitypixels.com/zoom/gallery/fullsize/'.$mypics[$i].'" title="Image '.$i.'"><img class="noscale" src="http://www.amitypixels.com/zoom/gallery/'.$mypics[$i].'" border="0" title="Image '.$i.'" alt="Image'.$i.'"></a></li>';
}

$str.="</ul></div>";

echo $str;

I admit, it's a bit of an archaic way of doing it, but I don't currently have a database on this account. I don't suppose there is a way of re-naming the images so that they will get pulled in to the page in a new order? Like I said, it's automatically alphabetically (or numerically) in order. I'm probably asking the impossible here! I guess I'd have to change it to a database...

**MrNobody** · 01-25-2009 11:33 AM

Via AJAX, you can save the user's order anywhere you like -- it doesn't have to be a database. Flat files are fine, too. You just need some method of connecting the saved file to a particular user (no different than having a method to connect particular database rows to a particular user).

Thread: Facebook-style image reordering?

Thread Tools

Display

Facebook-style image reordering?

Thread Information

Users Browsing this Thread

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions