This is a general question on how to go about building a project I have in mind, and the best way to set off on the right foot. I am fairly new to JS, please be gentle.
I want to use isotope.js (or a similar script) to display a page with multiple items (about 30 different plants found in a garden) and the ability to sort them by seasons of the year + "what is most beautiful now" + and "view all" (a total of 6 categories) .
On load, or when sorted by either "what is beautiful now" or "view all", I need each item to reflect the image of the current season we are in.
When sorted by season, I need those "current" images to switch over to a designated seasonal image of that plant. Therefore, each sortable item will ultimately have 4 different versions with 4 different images in the background ready to surface when plants are sorted. (perhaps 5 if it makes more sense to have a "current" version besides the 4 seasonal versions.)
My question: what approach can I take to achieve this effect in a manageable way?
Can isotope apply a class to items sorted? Assuming it can:
Should each item have 4 inline images, each with a css class,
that I then control by using display:inline; and display:none;
properties from my stylesheets? (I worry that this approach would
significantly increase load times)
Would it make more sense to create a blank dummy div who's
background I control similarly to the example above -relying mostly
on CSS.
Or is there some other way involving JS I am overlooking?
Any help would be appreciated. Examples of what you suggest would be immensely helpful.
