How to make 2 different list of images for desktop and mobile?

445 Views Asked by At

I'm making my site with media queries usign different size of pictures so mobiles can download them in hurry. But, sorry, I'm not able to understand how to make different list of images for Fotorama. List for desktop: img1 (1300x867px), img2, img3 .... List for mobile: img1b (480x800px), img2b, img3b, ...

1

There are 1 best solutions below

2
On

I created two Fotorama-div-blocks with different lists of images. First div has class "fotorama low-fi", second div-block — "fotorama hi-fi". CSS with media queries shows only one Fotorama.
Thus, the excess content is not downloaded to the browser

UPD: I'm right, if you are use „Lazy load“ http://fotorama.io/customize/lazy-load/
I'm almost rights without lazy load: big images not loaded at Safari's iPhone. Before I made the two div-blocks, iPhone worked slowly.