AB-interchange

Demonstration page, details on GitHub

AB-mediaQuery is the JavaScript side of CSS Media Queries. It's a very simple, yet convenient tool for your developments.

Informations

AB-mediaQuery is initilized with:


AB.plugins.mediaQuery({
  bp: {
    smallOnly:  'screen and (max-width: 767px)',
    mediumOnly: 'screen and (min-width: 768px) and (max-width: 1024px)',
    medium:     'screen and (min-width: 768px)',
    largeOnly:  'screen and (min-width: 1025px) and (max-width: 1280px)',
    large:      'screen and (min-width: 1025px)'
  }
});
        

AB-interchange is initilized with:


AB.plugins.interchange({
  lazySettings: {
    offscreen: 1,
    delayed:   false,
    layout:    'fluid' // can be "fixed" to fixed dimensions (not fluid)
  }
});
        

Example

Responsive lazy background-image


Responsive lazy image


Responsive image (totally useless and soon deprecated!)

description
description
description
description
description
description
description
description
description

Responsive picture (totally useless and soon deprecated!)

description
description
description
description
description
description
description
description
description