Display images based on screen size in Wordpress using Jquery?

Question

JavaScript

Hello.

I use the plugin from here

I connect scripts:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="http://site.ru/wp-content/themes/mythemes/data-img.js"></script>

Next, I call the plugin:

<script>
  $(function(){
    $('.data-img').dataImg({
      sml: 310,
      med: 630,
      lrg: 800,
      resize: true,
      bgImg: true
    });
  });
  </script>

I display images like this (in a loop):

<img 
  class="data-img"
  src="<?php the_post_thumbnail(); ?>"
  data-sml="<?php the_post_thumbnail('thumbnail'); ?>"
  data-med="<?php the_post_thumbnail('medium'); ?>"
  data-lrg="<?php the_post_thumbnail('large'); ?>"
  >

As a result, it turns out that ALL images are displayed.

1. What am I doing wrong?
   
2. How to make a working version through functions (like in my example)?
   

Explain, please.

Answer 1

The function displays the html code of the image
. You need the_post_thumbnail_url