I currently have a site which displays a long row of images.
I want to be able to add and delete images.
The deletion is simply. Addition would be simply, however i want to be able to add images at a certain point, and also swap images if necessary. The images are stored in a folder, and the information for each image is stored in a MySQL table.
Whats the best way to accomplish this? Dragging the iamges around using AJAX drag and drop? Using check boxes to swap the images?
Much appreciated.
Jamie.
User image sort
Moderator: General Moderators
Indeed. I would prefer to steer clear of using javascript. But AJAX does is so lovely im quite drawn to it. I've done something similar before using check boxes. The user would check 2 boxes corresponding with the images they wish to swap, and then hit a submit button to swap them.feyd wrote:The most intuitive would likely be drag'n'drop. However I would like to impress upon you that Ajax should not be the sole solution for this you implement. I would suggest that you build your system to be able to work without any Javascript first and foremost before prettying it up with Ajax.
You can do this by creating a list with up/down links next to each image. Maybe use some arrows or something.
Each link would include the id of the database record and the direction to move, the logic is as follows
Up
If this has the order of '1' then don't do anything, otherwise take the record that has a value of order-1 and increment it, then decrement the order of the image you are moving.
Down
If this has the order of max(order) (i.e. its the last image) don't do anything. Otherwise increment its value and decrement the value of the record with order+1.
Record deletion
Update the database to have order=order-1 on all records where order is greater than the record you are deleting
Record insert
Set the order to max(order) + 1
After you get that working so that you can move images up and down one spot at a time, then you are ready to tackle drag and drop with ajax or moving an image more than one spot at a time.
Each link would include the id of the database record and the direction to move, the logic is as follows
Up
If this has the order of '1' then don't do anything, otherwise take the record that has a value of order-1 and increment it, then decrement the order of the image you are moving.
Down
If this has the order of max(order) (i.e. its the last image) don't do anything. Otherwise increment its value and decrement the value of the record with order+1.
Record deletion
Update the database to have order=order-1 on all records where order is greater than the record you are deleting
Record insert
Set the order to max(order) + 1
After you get that working so that you can move images up and down one spot at a time, then you are ready to tackle drag and drop with ajax or moving an image more than one spot at a time.