Fotorama - how to generate thumbnails when using CSS Sprites?

Question

I'm using http://fotorama.io/ to make a slideshow and it's increasing my page load time due to # of imgs.

Fotorama can auto-generate thumbnails from your images. To help load speed I combined the images into a CSS sprite. It seems to need an "img" tag to generate the thumbnail.

Any ideas on how to get it to display the thumbs when the "img" tag is not used?

Answer 1

Maybe a bit old the question but here is a fiddle that uses <div style='background: url()'> as thumbs. It doesn't use sprites, but if you know how to do sprites, thats an easy step. Just add .thumbs a div { background: url(myimage.jpg);} to your CSS and background-position:-30px -150px; and so on to every div.

The code is copied from the custom-thumbs example and only the css is changed to style the div instead of an img.

BTW: Thanks for introducing me to fotorama, thats basically the gallery I was just coding. Except for the css-sprites.

If you need any help with the sprites, I made a small js-library and shellscript to autogenerate the sprites and code for an image folder.