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


#1

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?


#2

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.


#3

@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.


#4

@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 meteor.com 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!


#5

Anyone able to help with this issue?


#6

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


#7

@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.