Advice needed with displaying imgs on a page.

[funkyapache]

Hi,

 

I've got a rough page that I'm hoping to improve.

 

At the moment I have a form. This form has a select list which is populated with a list of categories from a mysql table. It has a submit button which when pressed posts the selected category back to the page. This is fine for the moment.

 

I have another mysql table that stores the href's of images stored on my server. Once the user presses the submit button the page then outputs all images for that category.

 

Now what I would like to do is create a "Next" and "Previous" button which would display the next image for that category.

 

These are some options that I was thinking of but I'm not sure which method would be better.

 

1. When Next or previous is pressed to submit the page but pass an id to it to connect to the database and fetch the next image. I think this would be quiet bandwidth/intensive option.

 

2. Connect once to the server when the select list value has changed and retrive a list of images and store them in an array. When Next/Previous button is pressed to retrive the next href in the array. This seems more sensibly.

 

I am hoping to have a next/previous button that will not need any page submits to get the image so was hoping to maybe use javascript or if need be ajax. Some fade in/out effects would be good as well. Also not to display the "Next" button if its the last image and not to display the "Previous" button if its the first image.

 

Which method would you recommend or perhaps another method that would be better?

 

Any assistance is most appreciated.

 

[Psycho]

I would not consider hitting the database to get an image reference an intensive operation. There are benefits and drawbacks to both methods you described. Only you can determine which is the most appropriate for your users. The best solution may be one or th eother - or even both!

 

Refreshing the page for each image.

Yes, this does require the page to be submitted to retrieve the next image. Resulting in a database call and a page refresh. Plus, fancy page transitions would still require JavaScript. Unless you have done some stress testing on your server you can't determine if this will have a negative impact on performance. The benefit of this solution is that it will work 100% of the time because it would be plain old HTML.

 

Putting all images into a JavaScript Array

This would require only once access to the DB to get all the images in the category and you could build in fancy transistions with the JS (however, you could still use transitions with the first method using onload, but it would have a page refresh). But, and this is a big one in my opinion, it relies on Javascript. So, you would effectively block any user that does not have JS enabled. That isn't a large percentage, but how many users are you willing to lose (don't forget about users who may be accessing via a device that is not a PC). Plus, you need to ensure the JS is interpreted correctly by all browsers.

 

The third option is to build option #1, then layer Javascript on top. For example, go ahead and create the JS array and all the functions needed to run the images through JS. But, create the Next/Prev links as you would for option #1. Then have an onload function that will modify those links to call the JS functions instead of calling the HREF link. Then if the user does not have JS enabled the links will work. If the user has JS enabled then they get the JS version.

[funkyapache]

Thanks for the quick reply,

 

I do like your suggested option #3. At least then I would have all bases covered.

 

With retrieving the next href value text in the table. What is the best way of doing this? I've heard that using an id is a good option but it can also break if your id is removed from the table.

 

This is the sql I have at the moment which is returning all images for the selected category I was wanting to show 1 at a time..

 

Select * from tbl_pictures where cat_id= {$cat_id}

 

This returns my id and href value.

 

[Psycho]

Why would you ever remove the id from the table. Almost every table I have has a unique ID field. The exception is for tables that are used only for correlating data between two tables. Anyway, you need to determine in what order you want the results returned: by ID, by name, or what? use an "ORDER BY" to always have them returned in that order. Then use an index number to determine which image to be displayed and use "LIMIT" to get the record you want.

 

Also, jsut ran across this today. If you are worried about database performance issues, do the query and cache it. Look at item #7 on this page: http://www.goodphptutorials.com/out/10_Advanced_PHP_Tips_Revisited