Use a naming scheme
[basename]_[color].png for all Library images.
Use CSR - Client-Side-Rendering on a View, or Display Templates when you use the Search Query WebPart
return empty HTML for non [default] images to display only the default images
record these non-black images in a [basename] array
display [black] image
onclick: display all the images in the associated array
The onclick part is where your UX-design creativity is required, in the simplest form you don't return blank HTML for non-default images but hide them with
I have got an idea, just try it up. Hope it will works
- Create a Image library
- Add two fields to it Front Image -> Single Line of Text, Link to Front Image -> Single line of text. We will be using these fields to query items.
- Add the black image of calculator and set the value of the above fields. Front Image as blackcalculator and Link to Front Image as blackcalculator. The blackcalculator is a token to find the group of images of same family.
- Now add the remaining 14 calculator images of different colors. For all the images set the properties Front Image as empty/blank and Link to Front Image as blackcalculator.
The token 'blackcalculator' should be used as a token to query all the other images for which the Link to Front Image field is set as blackcalculator.
Open a page using modal dialog, which will display all the images that belongs to the blackcalculator family.
Check it out and let me know if it helps you.
HTML Format of front image in the page:
<a href="#" onclick="OpenModalDialog('blackcalculator')"> <img src="/ImageLibrary/calculatorblack.jpg" /> </a>