im using jquery picture in IE8 and it's not working..
i am using the figure option and what happens is that the images don't show where they're supposed to show, and one out of two pictures (i used it only for two pics) is shown at the bottom of the page.
i tried display:none for the figure's wrapper div and well, figure is not shown anymore but it chops off the end of my website.. this is weird. wondering if anyone had the same problem

Great plugin!
But I expected that it is not working with Android.
Is that because of my complex setup within my project or isn’t there any Android support implemented yet?
Thanks.

Hey there,

Getting broken images in IE8, IE9, using picture element.
img src is coming back 'undefined'

Tried in jQuery version 1.8.3, as well as 1.9.1 with the migrate plugin.

figure works fine in both browser versions.

Crap. And I'm on a private production / dev server on a site that is undergoing client review, so I need to revert back and not use this code. Can't share out a sample. !(*$!

Hello,

Chrome is throwing this error for the picture tag.

<source src> with a <picture> parent is invalid and therefore ignored. Please use <source srcset> instead. Hope it can be resolved.

Thanks for the contribution.

First of all, thanks for this great script.

It's working very well.

My problem is how can I give a link to images ? I tried with data-link="" but it didn't work. Any suggestion?

Thanks....

The script won't work with break points higher than 999px.

just noticed that the picture option simply doesnt work in ie9

This is already documented, but jQuery Picture doesn't work with Internet Explorer 8 or under due to the fact that these older versions of IE have no support for media queries. That said, there are other scripts written to add this support specifically, including:

Respond by Scott Jehl
https://github.com/scottjehl/Respond

css3-mediaqueries-js by Wouter van der Graaf
http://code.google.com/p/css3-mediaqueries-js/

Combining one of these with jQuery Picture would probably do the trick.

I've got a more complex figure than the standard variety, and could do with the option (or set as default) for the script to replace the noscript tag with the new image tag, rather than appending it to the end of the figure.

For example; I have a wrapper around the image which shows a zoom icon when you hover over it - with the current script, the image is placed outside of the wrapper and thus breaks the functionallity;

<figure class="responsive zoomhover" 
data-media="img_320.jpg" 
data-media480="img_480.jpg" 
data-media768="img_620.jpg"
data-media992="img_620.jpg">

<span class="zoomhover__wrapper">

  <a href="#"><noscript>
    <img src="img.jpg" alt="Hello" />
  </noscript></a>
  <a class="zoomhover__icon is-lowlight" href="#" title="View larger"><i class="icon-search"><span class="visuallyhidden">Zoom</span></i></a>

</span>

<figcaption class="zeta">Hello responsive!</figcaption>

</figure>

Hi,

a quick one about the explanation text - do you mean 440 rather than 400 - "with no number is for the 0-400 area" as the next data-media is 440 . Not being a pedant, just worried I'm missing something.

Cheers

For some strange reasons I can't see the image who I placed as header image in a private phpBB board.
It works great under Safari or Opera, but FF didn't show anything. The image is completely removed without any spacer.

When building a responsive slide show using figure elements as slides, and figcaptions as descriptions, it works so long as I don't have any 'a' tags in the figcaption. If the description contains a link then the responsive image is added to the link instead of the figure.

Would be great if there's a way to do this.

Hi,

I've used Picture to handle images on one of my websites.

When viewed on a desktop computer, everything shows up as expected. However, when viewing on a mobile device, both portrait and landscape views show the next size up. So, when I'm in a 320px view, I'm seeing the image for 480px. When I'm in a 480px view, I see the 720px image. This happens on both iPhone and Android devices, but it works as expected on desktop and iPad.

Reference here: http://mullennc.com -- the image in question is the Auntie Anne's logo near the top of the page.

I came across the problem with PixelRatio. I've tested your code on Samsung Galaxy S4 (PixelRatio = 3.0) and it doesn't work. If i comment the line 43 in jquery-picture.js the problem is solved, but i don't think commenting the line is good idea :)

//if(!settings.ignorePixelRatio && window.devicePixelRatio !== undefined) PixelRatio = window.devicePixelRatio;

Using the figure implementation, the alt attribute, set OK on the image within the noscript tag, is set as "undefined" when the new image is created/updated.

Hello,
firsr thx for your plugin...

How can i add a class to the image ?
EX :
'

<figure class="responsive" data-media="assets/images/small.png" data-media440="assets/images/medium.png" data-media600="assets/images/large.png" title="A Half Brained Idea">
        <img src="assets/images/large.png" alt="A Half Brained Idea" class="myclass">
</figure>

Add support for pixel density somehow.

Hi again,

Is there any possibility to work with lazy load (http://www.appelsiini.net/projects/lazyload) script? It needs image dimensions (width and height) to work. Or if you know any other solution...