Custom Image sort

Results 1 to 2 of 2

Thread: Custom Image sort

  1. #1
    Join Date
    Dec 1969

    Default Custom Image sort

    I jave an ASP app that interfaces with an Access db and part of it displays thumbnail images sorted in a different order such as by Image Name , Title, etc. <BR><BR>We now have a need to be able to sort on a custom order. Rather than just having a display order field with a number of the order to be displayed I&#039;d like to be able to have the thumbnails displayed in a window and then select an image and then be able to click on a placeholder or something between other images and move the selected image to that location. Then we would need to be able to save the new order in the database.<BR><BR>Has anyone seen some code that would do this or know of the best way to handle it?<BR><BR>Thanks,<BR><BR>Stephen

  2. #2
    Join Date
    Dec 1969

    Default Interesting project...

    Won&#039;t be too hard to do; just means you need cooperation between your JS code in the client and your ASP code on the server.<BR><BR>I&#039;d add a "customSort" numeric field to the DB table, right off, of course. Give it a default value of NULL. And if somebody sorts on in, use<BR> ORDER BY customSort, imageName<BR>or some such, so that if all the values are still NULL at least you get some sensible ordering.<BR><BR>As for the client-side code... Well, here&#039;s where your ingenuity comes in. Ideally, you&#039;d like to be able to simply drag-and-drop an image on top of another one. Doing so would put the dropped image in that slot and "slide" all the other images "down" one. Doing drag and drop cross-browser might be tricky. I&#039;ve never tried it.<BR><BR>A hacky solution would be to have the user click on one image and then click on a second one. You&#039;d put the first-clicked-on into the place of the second-clicked-on and slide the rest down. That would be pretty easy to implement so that it would even work in NS 4.x browsers. No browser-specific code needed.<BR><BR>As for the ordering: If you just name the image tags:<BR> &#060;IMG Name="Image_1" Src="whatever.jpg"&#062;<BR>then, when the page is ready and the user hits a "SUBMIT" button, you simply scan all the <BR> document.images[ ]<BR>and put the number/src pair into a hidden form field. Parse the hidden form field on the server and you&#039;re ready to update the DB. Pretty easy.<BR> var imageList = "";<BR> for ( var ix = 0; ix &#060; document.images.length; ++ix )<BR> {<BR> var image = document.images[ix];<BR> if (,6) == "Image_" )<BR> {<BR> var imageNumber =;<BR> var imageSource = image.src;<BR> imageList += ";" + imageNumber + ":" + imageSource<BR> }<BR> }<BR> document.YourForm.HiddenField.value = imageList;<BR> document.YourForm.submit( );<BR><BR>Then ASP code:<BR> &#060;%<BR> images = Split( Request("HiddenField"), ";" )<BR> &#039; there is nothing in front of first semicolon, element 0 is blank<BR> For ix = 1 To UBound(images)<BR> temp = Split( images(ix), ":" )<BR> imageNumber = CINT( temp(0) )<BR> imageFile = temp(1)<BR> SQL = "UPDATE table SET customSort = " & imageNumber _<BR> " WHERE imageFile = &#039;" & imageFile & "&#039;"<BR> conn.Execute SQL<BR> Next<BR> %&#062;<BR><BR>Something like that.<BR><BR>Just wish we could make the drag-and-drop cross browser. You might check out and their JS FAQ and see if they have any ideas.<BR><BR>

Posting Permissions

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