How do I load all images and thumbnail for a multivalued image field in node view? I have a content type with a multivalued image field. I want to make the image field render with one main image and all the thumbnail. When any of the thumbnail is clicked then it's respective image takes over the main image section. Something like amazon product images.    

What I have thought about so far is to create a preprocess function for the field to load all images along with all the thumbnail then, with custom CSS and JS, customize its rendering, is this the right way to go about it? And how do I load all the thumbnails for the image field in node view?
You can use galleryformatter and then a bit css if you want