Markup not displaying

[csswebgirl]

I'm using response.js for the first time and I'm sorry if the answer to my issue is a simple fix, but I've looked and read everywhere and can't figure out what I'm doing wrong.

I'm building a child theme in Wordpress. I used wp_enqueue_script in my functions.php to add the response.min.js file and it is loading in the site correctly.

I've also placed the data-responsejs in the body tag to set the breakpoints I want:

data-responsejs='{ 
    "create": [
    { "prop": "width"
      , "prefix": "min-width- r src"
      , "lazy": true
      , "breakpoints": [1280,1024,768,640,480,320,0] }
]}' 

However, after writing the code I want to be responsive, nothing displays. The codes I wrote will display inside the first div where I placed it, but will not, no matter what I try, print between the divs. I don't think the display size is the problem as I've tested the page for every size that is set as a breakpoint.

This is the code I wrote

<div data-src320="http://.../wp-content/uploads/2012/04/beach_picnic_250x167.png" data-src640="http://.../wp-content/uploads/2012/04/beach_picnic_600x380.png">
      <!-- default @ <320px and no-js -->   
      <img src="http://.../wp-content/uploads/2012/04/beach_picnic_250x167.png" />
</div>

and this is what happens when the code is processed (as per Firebug)

<div data-src640="http://.../wp-content/uploads/2012/04/beach_picnic_600x380.png" data-src320="http://.../wp-content/uploads/2012/04/beach_picnic_250x167.png" 
data-init-response="&lt;!-- default @ &lt;320px and no-js --&gt; &lt;img src=&quot;http://.../wp-content/uploads/2012/04/beach_picnic_250x167.png&quot;&gt;">
</div>

As you can see, neither image displays. And the default does not display in their place either. So all I have is a blank space where the image should be. (I also know the CSS isn't the problem either).

Is it an issue with Wordpress (running v3.8.1)? I've tried deactivating all the plugins and jQuery scripts I'm running (leaving the jQuery library itself running of course), to test to see if there was any conflict with any other codes or plugins I'm running, but that doesn't appear to be the problem either.

[ryanve]

Try putting the attributes directly on the <img> tag:

<img alt="example" src="default.png" data-min-width-640="...png">

Or if you want to change the entire <img> then use a <div> and put the tag in the attribute:

<div data-min-width-640='<img alt="example" src="...png">'></div>

[csswebgirl]

Thank you! The second example works when I use this for the whole code:

<div data-min-width-320='<img alt="beach" src="http://.../wp-content/uploads/2012/04/beach_picnic_250x167.png">' data-min-width-640='<img alt="beach" src="http://.../wp-content/uploads/2012/04/beach_picnic_600x380.png">'></div>

It also works with a nav bar I want to switch between using the same breakpoints. Thanks, again, and I'll close this issue.