Breakpointer

breakpointer.js

(function($,window, document, undefined){
  var defaults = {
    resizing: true
  }

  var BreakpointManager = function(element, options) {
    this.el = element;
    this.$el = $(element);
    this.options = $.extend({}, defaults,options);
    this.breakpoints = {};
    this._defaults = defaults;

  };

  BreakpointManager.prototype = {
    init: function() {
      var micro_data = this.$el.data(),
          src = "",
          self = this,
          win_width = $(window).width(),
          win_height = $(window).height();



      if($.isEmptyObject(micro_data))
        return false;


      $.each( micro_data, $.proxy(function(key,val) {
          var breakpoint;
          if(key === "srcportrait") {
            breakpoint = key;
          } else {
            breakpoint = key.replace(/[A-Za-z$-]/g, "");
          }
          this.breakpoints[breakpoint] = val;
      },this));


      src = this.getBreakpointImage(win_width);
      this.switchImg(src);

      if(this.options.resizing) {
        //needs refactoring.. every image has a callback;
        $(window).on('resize orientationchange',$.proxy(function() {
          this.image_source = this.getBreakpointImage($(window).width());
          this.switchImg(this.image_source);
        },this));

      }
    
    },
    getBreakpointImage: function(width) {

      var breakpoint_values = _.keys(this.breakpoints),
          breakpoint_current;

      breakpoint_current = _.min(breakpoint_values, function(num) {
          return Math.abs(num-width);
      });


      
      if($(window).width() < $(window).height() && this.breakpoints['srcportrait'])
        return this.breakpoints['srcportrait'];
      else
        return this.breakpoints[breakpoint_current];

      

    },
    switchImg: function(src) {
      if(this.$el.attr('src') != src )
        this.$el.attr('src',src);
    }
  };

  $.fn['breakpointer'] = function ( options ) {
    return this.each(function () {
              new BreakpointManager( this, options ).init();
    });
  };


})(jQuery, window, document);

example.html

<img class="front-img" 
        src="{{ image| imagine_filter('breakpoint_placeholder') }}" 
        data-src700="{{ image| imagine_filter('breakpoint_small') }}" 
        data-src1200="{{ image| imagine_filter('breakpoint_medium') }}" 
        data-src1600="{{ image| imagine_filter('breakpoint_large') }}" 
        data-srcPortrait="{{ image| imagine_filter('breakpoint_medium') }}"

        alt="">