The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript click and populate images in grid view

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #210300

    We have a html/css website for our association.

    We have more then 400 factories as members under our association.

    We want to create a way to shortlist those factories by the size of tiles they are making.

    e.g. out of all 50 factories makes 30x30cm tiles.

    So when a user clicks a link for 30x30cm she should see the grid list of logos of all 50 factories which manufactures that size.

    How is it possible?


    You’re going to need javascript.

    Other than that we don’t really code things for you although we’re happy to help you with your own code.

    You could either filter all the images based on selections or only lost the requested images after the selection is made.

    I’m no expert in javascript so there may be other options.


    You would typically do it with a database that stores the available sizes against each factory name, and then on clicking a link, a query is made to the database that outputs the factories matching the requested criteria. This would be done with a server-side language like PHP and MySQL and would require knowledge (and the means) to setup/populate a suitable database structure, and write the appropriate code to communicate with the database and manipulate the data. If you don’t have that knowledge already, or the time to learn yourself, you’d probably need to hire somebody.

    If you’re limited to CSS/HTML, you could also create something similar(ish) and less complex using JavaScript. I wrote an article on a JavaScript filter that uses classes to filter criteria – you might be able to make use of it and fudge around with it to suit your needs. Here’s the article and here’s the final demo

    Instead of the coloured boxes, you would have your factory logos, and the radios/classes would be the sizes of your tiles. Be aware that classes shouldn’t begin with numbers though, so for your 30 X 30cm tile, the class you use might be ‘cm30x30′ instead of ’30x30cm’.

    Hope it helps.


    I was on a mobile device before but now moving this to the JS section…for now.

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.