Вывод изображений в зависимости от размера экрана на Wordpress с помощью Jquery?

Здравствуйте.

Использую плагин отсюда

Подключаю скрипты:

<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>

Далее вызываю плагин:

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

Вывожу изображения так (в цикле 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'); ?>"
  >

В итоге получается, что выводятся ВСЕ изображения.

1. Что я делаю не так?
   
2. Как сделать рабочий вариант через функции (как у меня в примере)?
   

Объясните, пожалуйста.