Forum Moderators: open
I am trying to expand some functionality to a photo gallery app I wrote some time ago. (The existing site is based on standard ASP.) I could sure use some help either finding or developing a quick bit of code that I am stuck on. I would like the admin user to be able to arrange the display order of the photos.
I store a Photo_DisplayOrder value in a table for each photo and this is used for displaying the images. In the admin screen I would like to display the photo thumbnails in order and provide a "MOVE UP" and "MOVE DOWN" button next to each photo. The user will click on a particular button and then the photo will move to the new position within the browser window. The user should be able to move up and down all the photos before finally clicking a SUBMIT CHANGES button. When submitting the changes the database will update the new Photo_DisplayOrder value for each Photo_ID.
I know I can do it where everytime they click move up or down it submits the page and then reloads it...but I am wanting to avoid this behavior. I currently have a solution where it utilizes a list box and the user can move up and down the filenames and then submit the changes. This works but it would be much better if I could display the thumbnails and let the user see the photos moving up and down.
I think this would involve javascript and DHTML...neither of which I am very proficient writing from scratch. I can hack my way around and learn as I go but I could sure use a starting point. The admin section uses at least IE 5.5 so no need to worry about browser compatibilities.
Here is some "simplified" background info:
TableName: Photos
Columns:
Photo_ID
Photo_FileName
Photo_DisplayOrder
Displayed on the web page based on current Photo_DisplayOrder:
--------------------------------------------
¦--------------¦...Move Up...Move Down
¦--------------¦
Photo Here
¦--------------¦
¦--------------¦
¦--------------¦...Move Up...Move Down
¦--------------¦
Photo Here
¦--------------¦
¦--------------¦
¦--------------¦...Move Up...Move Down
¦--------------¦
Photo Here
¦--------------¦
¦--------------¦
¦--------------¦...Move Up...Move Down
¦--------------¦
Photo Here
¦--------------¦
¦--------------¦
SUBMIT CHANGES BUTTON
--------------------------------------------
Thanks in advance for any help you can provide. I am searching the net and finding bits and pieces but nothing so far that I can build from/understand. I'll keep trudging but could use a boost. THANKS!
Todd
What you would need to do upon posting the form is to dynamically write each of the images top property - which would infer the sort order.
Thanks for the quick reply and the reference link. I've been looking over the example at walterzorn.com and also considering what you recommended. Confused at this point...lol!
Hmmm...guess I have a question or two for you. If I were to write each of the images top property to the db in the DISPLAYORDER column then the values could be like 100, 247, 380, and 500 for the four images depending on how they are layed out on the browser window. These numeric values would then be used for determining the display order by using an "order by DISPLAYORDER desc" clause in my SQL statement. Correct? In the public web page I would not necessarily use the value for true positioning but rather just determining the order they are displayed in rows.
Could you provide any additional help on how to dynamically write each of the images top property when posting the form? How do I obtain the top property and where does this all fit in with the walterzorn DHTML stuff? Sorry for being a bit clueless on this matter. I will continue to look into it myself but could use some help if you are willing. If not, I understand.
Thanks.
Todd
Within the loop you can assign values to variables for the image name and top property- standard stuff using the dom.
Then you can write the values to the querystring or form action , again in javascript.
In theory it should work, though theres probably an esier way :)
Thanks for the additional info. I am not too familiar with interacting with the DOM but I will start to look into it. My old school skills need to be upgraded! LOL!
Thanks again.
Todd
<script language="JavaScript" >
for (var i=0;i < document.images.length; i++)
{strQuery += document.images[i].id
strQuery += "="
strQuery += document.images[i].style.top
strQuery +="&"
}
</script>
Then on the server
For each item in Request.Querystring
strID = item.name
intHeight = clng(item)
' update the db for item strID
Next
