Galerie images avec plusieurs menu

Bonjour à tous,
Afin de m’entraîner à développer en web, j'ai commencé à fouiller un peu partout sur le net pour me perfectionner et apprendre de nouvelles choses.
Aujourd'hui je me retrouve face à un problème j'aimerais réaliser une galerie d'images comme sur une ancienne version du site Apple que je vous joints juste ici (précision : mon but n'est pas de copier mais d'apprendre) : https://web.archive.org/web/20141216...6/accessories/

L'image de la galerie en question :
Pièce jointe 312222

Alors voilà je viens à vous car je ne comprends pas vraiment le fonctionnement de ce script, j'ai fouiné un petit peu et je me suis rendu compte que la galerie est faite d'autant de div qu'il n'y a d'images, et que dès lorsque je clique sur une couleur la div en question ainsi que la précédente change de style (z-index et opacity).
J'ai déjà réussi à gérer ce genre de galerie avec un seul téléphone grâce à un switch et pour chaque cas l'image en question (je pense qu'il est inutile de vous montrer ce code), mais le problème c'est que si j'avais 8 téléphones différents et 15 couleurs j'arriverais vite à 200 lignes de code.
C'est pour ça que je vous demande votre aide afin de mieux comprendre comment gérer les deux menus (menu iPhone et menu couleur) ?
En vous remerciant d'avance :) ,
Cordialement,

PS : je joints le fichier HTML de la partie en question

s'il y a des éléments qui se répètent, vous pouvez les générer dynamiquement.
Cela peut se faire côté serveur, avec du PHP par exemple, ou côté client avec du JavaScript.