How do I display product images with thumbnail filmstrips similar to amazon?


Want to modify my meteor js app to display product images with thumbnail filmstrips so that user can switch to different views for a single product - basically something like amazon provides. Is there a package that would provide this kind of functionality or how would I go about it?


I would suggest CollectionFS for managing the images, and then linking them by ID to the items. Then you can create an image upload form, and install Imagemagick/Graphicsmagick to resize them to thumbnail size. If you’re using a UI framework they usually have some type of carousel component. Otherwise you could search for “carousel” or “slideshow” on Atmosphere, NPM or Google, or just make one yourself.


@herteby thanks for info. Started playing around with udondan:slick from atmospherejs which seems to provide what I need. Will look at CollectionFS and Imagemagick/Graphicsmagick too.


@herteby I am made some headway but stuck with some aspects including getting thumbnails to be side-by-side and aligned with displayed image instead of aligned by page width. I posted to stackoverflow based on direction that best to put Qs there - this is the post how to create a product view with slideshow in meteor js

Any help would be appreciated. Thanks!


Anyone able to help with this issue?


So you’ve got everything working except the CSS then? It’s difficult to help with that without seeing your site.


@herteby haven’t added it to site yet - still a standalone app. But I put code in stackoverflow post and due to lack of views I added a bounty. My JS/CSS is admittedly pretty basic and it does appear that CSS is the issue. I am going to inspect code to see what CSS is laying it out and play around with it some more.