Facebook-style image reordering?

#native_company# #native_desc#

#native_cta#

This site is best viewed in a modern browser with JavaScript enabled.

memerson

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

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

MrNobody;970821 wrote:
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.

<!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

That's great! Thanks very much!!

memerson

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

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

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

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

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

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:

$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

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).