Array of images with searching features?

[zocheyado]

So I am working on a project and really am confused on how even to get started, What I am trying to do is create a grid of images and then have a search bar where you can enter in tags that will then highlight each of the images if they have that tag. So say an image had a tree and a tire, the image would have this info either in a Database or something else and then upon searching it would filter the images and then highlight the selected ones as shown below. or leave only the selected ones highlighted. My main concerns are how could I get the images displayed in such a way and then do the highlighting / dimming and what would be the best way to store the tags about the images. I could do a DB and have a column for image src and then tags but I was hoping there would be a way that might be easier? any thoughts on anything? Thanks for any info at all.

[scootstah]

You'll have to decide if you want it to work without refreshing the page. If you don't care, then a simple form pointing to the same page would be fine. Every page load you'd just check for the form data and then highlight/dim accordingly.

 

If you don't want the page to refresh, now you'll need some AJAX to call the PHP script. You can then either highlight/dim the images with Javascript or just replace the entire HTML with something returned from PHP. The former would be a little faster, but either works.

 

As for the database, I would probably have at least two tables. One for storing image data, then one for tags. Since each image can have multiple tags, it makes sense to have a one-to-many relationship in the database. That is, one "image" row can have multiple "tag" rows. The "tags" table could just be something simple like: id, image_id, tag_name - with image_id being a FOREIGN KEY reference back to the image's PRIMARY KEY column.

[Christian F.]

Actually, the image-tags relation would be many-to-many. Since the same tag can be used on many pictures, and each picture has many tags.

 

I would also recommend building this up to work without AJAX first. After you've gotten that to work, adding AJAX is quite simple and will ensure that your site works regardless of the browser the user is browsing with.