img swap custom - with timed content - .com breakpoints

by ian_smithz

HTML

<!-- date format should be exactly like this example -->
<!-- e.g. -->
<!-- Nov 09 2018 09:00 to Nov 09 2018 09:01 -->

<div class="timed-content">
  <span class="date-range" aria-hidden="true">Nov 12 2018 08:18 to Nov 12 2018 08:19</span>

<img data-src-small="//www.screwfix.com/images/CAT135/assets/gfx/lvl2_plumbing_nestthermostat_sm.png" data-src-medium="//www.screwfix.com/images/CAT135/assets/gfx/lvl2_plumbing_nestthermostat_md.png" data-src-large="//www.screwfix.com/images/CAT135/assets/gfx/lvl2_plumbing_nestthermostat-e_lg.png" data-alt="Nest Smart Thermostat E" class="banner__img swap">
  
</div>

<div class="timed-content">
  <span class="date-range" aria-hidden="true">Nov 12 2018 09:30 to Nov 12 2018 10:40</span>

<img class="banner__img swap" data-src-small="//www.screwfix.com/images/CAT135/assets/gfx/lvl2_plumbing_76575_sm.png" data-src-medium="//www.screwfix.com/images/CAT135/assets/gfx/lvl2_plumbing_76575_md.jpg" data-src-large="//www.screwfix.com/images/CAT135/assets/gfx/lvl2_plumbing_76575_lg.jpg" data-alt="">

</div>

CSS

.date-range {
  display: none;
}

JavaScript

//document.addEventListener("DOMContentLoaded", function() {

var swapImgCustom = function() {
  //var imgs = jQuery('img.swap');
  
  
  var bw = window.innerWidth;

  //jQuery(imgs).each(function() {

    var imgNameSmall = jQuery(this).data('src-small');
    var imgNameMedium = jQuery(this).data('src-medium');
    var imgNameLarge = jQuery(this).data('src-large');

    if (bw <= 640) {
      console.log('less than 640');
      if (imgNameSmall) {
        jQuery(this).attr('src', imgNameSmall);
      } else if (imgNameMedium) {
        jQuery(this).attr('src', imgNameMedium);
      } else {
        jQuery(this).attr('src', imgNameLarge);
      }
    } else if (bw > 640 && bw < 1025) {
      console.log('between 640 and 1025'); 
      if (imgNameMedium) {
        jQuery(this).attr('src', imgNameMedium);
      } else {
        jQuery(this).attr('src', imgNameLarge);
      }
    } else {
      jQuery(this).attr('src', imgNameLarge);
    }
  //});
};


jQuery(function() {
  jQuery(".timed-content").each(function(index) {
    var sRange = jQuery(this).find(".date-range").html();
    var arrTemp = sRange.split(" to ");
    var dtFrom = new Date(arrTemp[0]);
    var dtTo = new Date(arrTemp[1]);
    var dtNow = new Date();
    
    if (dtNow >= dtFrom && dtNow <= dtTo) {
      //jQuery(this).show();
      
      //jQuery(this).closest('img.swap');
      swapImgCustom(jQuery(this).closest('img.swap'));
      

      //jQuery(window).on('resize', swapImgCustom);
      
    }
  });
});


//});