search

codrops / Elastislide

Elastislide is a responsive image carousel that will adapt fluidly in a layout. It is a jQuery plugin that can be laid out horizontally or vertically with a pre-defined minimum number of shown images
362 stars 111 forks source link

How to support Retina graphics? #7

Open futuretap opened 11 years ago

futuretap commented 11 years ago

I'd like to support high resolution images for iOS and Mac. I tried to use Foresight in conjunction with Elastislide:

http://www.cdnconnect.com/docs/foresightjs

This is how I tried to load the images:

<li><a href="#"><img data-src="/images/gallery1.jpg" alt="" data-width="100" data-height="100" class="fs-img"><noscript><img src="/images/gallery1.jpg" alt="" width="100" height="100"></noscript></a></li>

Unfortunately, the images aren't loaded. I assume there's a conflict in the image loading code. If I change the HTML to just the plain img tag, Elastislide works correctly. Outside of Elastislide Foresight works correctly.

Any other solution than Foresight is welcome too (although I like Foresight because it avoids fetching the low resolution images first).