www.webdeveloper.com
Results 1 to 8 of 8

Thread: Facebook-style image reordering?

Hybrid View

  1. #1
    Join Date
    Jul 2008
    Location
    Bristol
    Posts
    77

    Facebook-style image reordering?

    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

  2. #2
    Join Date
    Feb 2008
    Posts
    1,666
    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.

  3. #3
    Join Date
    Feb 2008
    Posts
    1,666
    Quote Originally Posted by MrNobody View Post
    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>
    Last edited by MrNobody; 01-20-2009 at 09:38 PM. Reason: Adjustments for Firefox

  4. #4
    Join Date
    Jul 2008
    Location
    Bristol
    Posts
    77
    That's great! Thanks very much!!

  5. #5
    Join Date
    Jul 2008
    Location
    Bristol
    Posts
    77
    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...

  6. #6
    Join Date
    Feb 2008
    Posts
    1,666
    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.

  7. #7
    Join Date
    Jul 2008
    Location
    Bristol
    Posts
    77
    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...

  8. #8
    Join Date
    Feb 2008
    Posts
    1,666
    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 Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles