[Webinar] Streamline your web hosting managementRegister Today

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 72
  • Last Modified:

How do I change the order of a directory's files?

My client has the need to be able to shuffle or rearrange the files (image files) of a directory (that lives on the webserver) on a page, so the images are in the order they want them to be, even if that is not the original order in which the files are/were placed in the directory?

image gallery

so in the image above, they need to be able to drag and drop the images listed on the right, [as apposed to highlighting an image name and clicking the "Up" or "Down" button numerous times, (sometimes maybe 100 times depending on the number of images)], in any order they choose irrespective of the original order and they need for the order to change in the directory, and stay changed until they need to (if they need to) change the order again. it would be great, if the images were in a grid that also allowed them the ability to be able to drag and drop the images in the order they chose, with the same results.
0
Michael Sterling
Asked:
Michael Sterling
  • 16
  • 10
  • 2
1 Solution
 
jmcgOwnerCommented:
The order in which files are presented is up to the application.

If this application is not under your control, then the only way to achieve the requested result is to either create a new directory with the files added in the desired order (if the application only presents files in the directory order) or to rename the files so the sort order (as chosen by the application) matches the desired order or, perhaps, modify the images' metadata (if that's what the application uses to decide what order to present them).

If the application is  under your control, you can consider adding a file to the web folder that specifies your preferred order.
0
 
Michael SterlingWeb Applications DeveloperAuthor Commented:
@umgh is there any way I can allow the files to be dynamically ordered by dragging and dropping them in either the list or in a grid and have it maintained that order?
0
 
jmcgOwnerCommented:
Between invocations of the app, the above options are the only ones I could think of.

Within the app, you should be able to manipulate the order by watching for events and invoking methods of the control(s) you've used to display the images.
0
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 
Chris StanyonCommented:
The jQueryUI has the Sortable widget that allows you to drag items to sort them. It also has various events that get fired when certain things happen, and methods that allow you to access the data. Combine all of this with an AJAX request, and you can make a call to your server when the order is changed by dragging. The data you pass back to your server will contain the order of the items, and you can process that however you like, for example, storing it a database.

A very simple example is:

// Make the elements in #sortable sortable.
$("#sortable").sortable({
    // code to run when the order is updated
    update: function(event, ui) {
        // get the order of the items in the list
        var data = $(this).sortable('serialize');
        // pass the data back to your server for processing
        $.ajax({
            data: data,
            type: 'POST',
            url: '/your/url/here'
        });
    }
}); 

Open in new window


You can read the Docs here -> api.jqueryui.com/sortable/
0
 
Michael SterlingWeb Applications DeveloperAuthor Commented:
@ChrisStanyon: So if I were to be able to list the images in some kind of grid, that I would make "sortable" I should be able to make that Ajax call, correct? And any of the other methods/functions that I needed to use, I could, but pretty much I should be able to run with what you have above, for my needs yes?
0
 
Chris StanyonCommented:
Yeah - that's about it. You don't even need to put the images in a grid. Looking at your screenshot above, you could just list them in a UL. You can then just drag them directly.

have a look at this quick demo

http://jsfiddle.net/ChrisStanyon/jqmrpc7n/

Drag the image names around and you'll see the data string that you'd pass back to your server with the AJAX call.

Basically, it would get passed back as a POST array, which you could loop through to update a database
0
 
Michael SterlingWeb Applications DeveloperAuthor Commented:
@ChrisStanyon: I think I could pull that off, but I would have to dynamically generate the HTML code. This application pulls the data from a database and displays different pictures based on an id that is passed to the application. So I think I would have to dynamically generate that HTML, or do you think there's a better way to do that?
0
 
Chris StanyonCommented:
However you implement a solution, it's likely that you'll need to edit the HTML in some way. If this is an application that you've written, then it should be straight forward enough. You'd just pull out the list of images from the database and order them by some kind of sortOrder column. You'd then build your list of images into a UL, with a functional ID and attach the jQuery. The update event would then send the new order back to a server-side script which would update your database.

If you didn't build this app, then you may have to start digging through the code.

The fact that the app is based off a database, the HTML will be dynamically generated anyway - you'll just need to find the right place to hook into.
0
 
Michael SterlingWeb Applications DeveloperAuthor Commented:
@Chris Stanyon: Thank you. I will start working on this today. I'll keep this thread open in case I have questions but I think this will be my solution! Thanks again.
0
 
Michael SterlingWeb Applications DeveloperAuthor Commented:
@Chris Stanyon: Below is my HTML. It won't perform the actual drag and drop. It just highlights the items in the ul list. What am I missing? I downloaded everything from the jQuery UI site.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="Scripts/jquery-1.10.2.min.js" type="text/javascript"></script>
    <link href="Styles/jquery-ui.css" rel="stylesheet" type="text/css" />
    <link href="Styles/jquery-ui.structure.css" rel="stylesheet" type="text/css" />
    <script src="Scripts/jquery-ui.min.js" type="text/javascript"></script>
    <style type="text/css">
        li
        {
            cursor: pointer;
        }
    </style>
    <script type="text/javascript">
        $("#sortable").sortable({
            // code to run when the order is updated
            update: function (event, ui) {
                // get the order of the items in the list
                var data = $(this).sortable('serialize');
                // pass the data back to your server for processing
                $('#data').html(data);
            }
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <ul id="sortable">
            <li id="pic_image1">image1.jpg</li>
            <li id="pic_image2">image2.jpg</li>
            <li id="pic_image3">image3.jpg</li>
            <li id="pic_image4">image4.jpg</li>
        </ul>
        <div id="data">
        </div>
    </div>
    </form>
</body>
</html>

Open in new window


jQueryUI1jQueryUI2jQueryUI3
0
 
Chris StanyonCommented:
You probably need to wrap the jQuery function inside the $(document).ready() block:

<script type="text/javascript">
$(document).ready(function() {
    $("#sortable").sortable({
        // code to run when the order is updated
        update: function (event, ui) {
            // get the order of the items in the list
            var data = $(this).sortable('serialize');
            // pass the data back to your server for processing
            $('#data').html(data);
        }
    });
});
</script>

Open in new window


jQuery works on the DOM (Document Object Model) and wrapping your code inside the document.ready block ensures that the DOM has fully loaded before trying to do anything with it.

Without it, your code would probably try and bind the sortable() to an element that hadn't fully loaded - i.e. your <ul>

You might also consider using a Content Delivery Network (CDN) for the jQuery libraries and styles. Google offers one. Just change your links to:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css" />

Open in new window

0
 
Michael SterlingWeb Applications DeveloperAuthor Commented:
@Chris Stanyon: That was it! It has me started. Thanks. I'll keep this open for a few days while I work on this. Thanks again.
0
 
Michael SterlingWeb Applications DeveloperAuthor Commented:
@Chris Stanyon: This works great. The problem I'm trying to solve could be solved if i was able to drag and drop the pics from, maybe one container to the other, then use an Ajax call to send that order of pictures back to the directory, how would I achieve this? I think this code puts me very close to that solution, I just don't know how to make that jump.
0
 
Chris StanyonCommented:
If you just want to drag the images around to sort them, you can bind the sortable to the images instead of a UL. That way, you'd simply drag the images into place and have no need for the list.

Have a look at this: http://jsfiddle.net/ChrisStanyon/1bxbhvkq/
0
 
Michael SterlingWeb Applications DeveloperAuthor Commented:
@Chris Stanyon: That was it! Last question and I'm done. My images seem to be all over the place when I star to move them how do I stop that from happening? They move other things around and out of place on the page as well, if there are other controls on the page.

images before the move
images after the move
0
 
Chris StanyonCommented:
That's probably down to your styling (css) but impossible to tell without seeing a live link to your page
0
 
Michael SterlingWeb Applications DeveloperAuthor Commented:
@Chris Stanyon: I figured out the issue. The issue is the real (the actual size) of the images. I've manually "squeezed" the images (and probably not proportionally correct either) just to make them "display" or show the size of the place holders that you've shown in your example on jsfiddle. But this doesn't actually change the images actual size. So when I used that placeholder image that you have in your example, it worked just fine. Thanks again. I think I have enough to go on now.
0
 
Michael SterlingWeb Applications DeveloperAuthor Commented:
This development has been put on hold temporarily but I'm still going to keep this thread open.
0
 
Michael SterlingWeb Applications DeveloperAuthor Commented:
@Chris Stanyon: So I'm back on this project now and it is all working with the exception of one thing: When (after) I shuffle the images and either close the window and open it back up or refresh the page, the order doesn't change. How do I effect the actual order of the photos where they live?
0
 
Michael SterlingWeb Applications DeveloperAuthor Commented:
@Chris Stanyon: I saw that I was missing some jQuery code, based on an earlier reply you gave. I put the code in place and am getting an error that maybe you can help me with?

errorScrnShot1
errorScrnShotII
0
 
Chris StanyonCommented:
That's likely to be an issue with your server-side script. The code I posted earlier sugessted that you POST the serialized image order back to your server-side script for processing, such as saving to a database. Looks like you'll need to configure your script to receive the POST request, but I don't know ASP so can't help you on that one.
0
 
Michael SterlingWeb Applications DeveloperAuthor Commented:
Thanks for all your help. I will try to get the other part / piece of this question answered by posting to this group.
0
 
Michael SterlingWeb Applications DeveloperAuthor Commented:
@Chris Stanyon: Why does the underscore: "_" show up as: "[]="?
0
 
Chris StanyonCommented:
I have no idea what you mean !!
0
 
Michael SterlingWeb Applications DeveloperAuthor Commented:
@Chris Stanyon: Sorry I should've given more info. The datastring that is sent to the <div id="data"> looks like :

image[]=image1&image[]=image2&image[]=image5&image[]=image3&image[]=image6&image[]=image7&image[]=image8&image[]=image4

where I'm assuming that the "[]=" is what used to be a "_". Why does this happen?
0
 
Chris StanyonCommented:
Ah, right!

The square bracket indicates an array. While it shows up in the data div like that, when it get's POSTed through to a server-side script, it will be available as an array called image (part of the POST data), containing the order of the images. As I said previously, I don't know ASP at all, but if it was posted to a PHP script then the data would look something like this:

$_POST['image'] = array (
   'image1',
   'image2',
   'image5',
   'image3',
   ...etc...
);

And you could get to the order of the images like so:

foreach ($_POST['image'] as $imageName):
     echo $imageName;
endforeach;

Open in new window


The code above would loop through the image[] array, and echo (print) the name of each image in order, so you would get an output looking something ilke this:

image1
image2
image5
image3
image6
image7
image8
image4
0
 
Michael SterlingWeb Applications DeveloperAuthor Commented:
@Chris Stanyon: So the code above:

foreach ($_POST['image'] as $imageName):
     echo $imageName;
endforeach;

I assume is php? But there is probably an equivalent way to do the same in jQuery / javascript?
0
 
Chris StanyonCommented:
Yeah - it is PHP, but you'd want to do it server-side. Javascript is only for the client-side (browser). For the server-side, you'll probably be using ASP.

The whole point of this is to send the new order of images back to your server, so it can be saved into your database for future reference.
0

Featured Post

The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

  • 16
  • 10
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now