Forums

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
    Posts
  • #210300
    m.bug
    Participant

    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?

    #210305
    Paulie_D
    Member

    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.

    #210307
    Beverleyh
    Participant

    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 http://www.dynamicdrive.com/forums/entry.php?320-Content-Filter-(JavaScript-amp-CSS3-filter-by-class) and here’s the final demo http://fofwebdesign.co.uk/template/_testing/filter-js.htm

    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.

    #210308
    Paulie_D
    Member

    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.