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:

1. 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)
2. 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.
3. 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.