jQuery.responsiveChange

Demo

Please check by resizing the window. Breakpoint is the default setting.

$.responsiveChange({
  breakpoints: { sp:480, pb:768, tb:1024, pc:'none' },
  unit: 'px'
});

Basic

Single Breakpoint

Result:

<span id="demo-single"></span>
$('#demo-single')
  .responsiveChange('sp', {
    enter: function(){ $(this).text('sp').hide().fadeIn() }
  })
  .responsiveChange('pb', {
    enter: function(){ $(this).text('pb').hide().fadeIn() }
  })
  .responsiveChange('tb', {
    enter: function(){ $(this).text('tb').hide().fadeIn() }
  })
  .responsiveChange('pc', {
    enter: function(){ $(this).text('pc').hide().fadeIn() }
  });
View source

Multiple Breakpoint

Result: sp-tb pb-tb tb-pc

<span id="demo-multiple-sp-tb">sp-tb</span>
<span id="demo-multiple-pb-tb">pb-tb</span>
<span id="demo-multiple-tb-pc">tb-pc</span>
$('#demo-multiple-sp-tb')
  .responsiveChange('sp-tb', {
    enter: function(){
      $(this).addClass('active');
    },
	exit: function(){
      $(this).removeClass('active');
    }
  });
$('#demo-multiple-pb-tb')
  .responsiveChange('pb-tb', {
    enter: function(){
      $(this).addClass('active');
    },
	exit: function(){
      $(this).removeClass('active');
    }
  });
$('#demo-multiple-tb-pc')
  .responsiveChange('tb-pc', {
    enter: function(){
      $(this).addClass('active');
    },
	exit: function(){
      $(this).removeClass('active');
    }
  });
View source

MediaQuery
only screen and (min-width:600px) and (max-width:900px)

Result: inactive

<span id="demo-mql">inactive</span>
$('#demo-mql')
  .responsiveChange('only screen and (min-width:600px) and (max-width:900px)', {
    enter: function(){
      $(this).addClass('active').text('active');
    },
    exit: function(){
      $(this).removeClass('active').text('inactive');
    }
  });
View source

Advanced

Change Image

Result:

<!-- spacer.gif base64 Encode -->
<img class="responsive-image" width="300" height="300"
     src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
     data-src-sp="images/sp.jpg"
     data-src-pb="images/pb.jpg"
     data-src-tb="images/tb.jpg"
     data-src-pc="images/pc.jpg">

<img class="responsive-image" width="450" height="300"
     src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
     data-src-sp="images/cat-sp.jpg"
     data-src-pb="images/cat-pb.jpg"
     data-src-tb="images/cat-tb.jpg"
     data-src-pc="images/cat-pc.jpg">
var $responsiveImages = $('img.responsive-image');
var responsiveChangeImages = function(e){
  $responsiveImages.each(function(){
    var $this = $(this);
    var newsrc = $this.data('src-' + e.breakpoint.name);
    if (newsrc) $this.attr('src', newsrc);
  });
};
$('body')
  .responsiveChange('sp', { enter:function(e){ responsiveChangeImages(e) } })
  .responsiveChange('pb', { enter:function(e){ responsiveChangeImages(e) } })
  .responsiveChange('tb', { enter:function(e){ responsiveChangeImages(e) } })
  .responsiveChange('pc', { enter:function(e){ responsiveChangeImages(e) } });
View source

Change Plug-In

sp-pb: PhotoSwipe tb-pc: fancyBox

cat1 cat2 cat3 cat4

<p>
  <span id="demo-photoswipe" class="demo">sp-pb: <a href="http://photoswipe.com/" target="_blank">PhotoSwipe</a></span>
  <span id="demo-fancybox" class="demo">tb-pc: <a href="http://fancyapps.com/fancybox/" target="_blank">fancyBox</a></span>
</p>
<p id="demo-change-plugin">
  <a href="images/cat-sp.jpg" rel="photos"><img src="images/cat-sp-thumb.jpg" width="150" height="100" alt="cat1"></a>
  <a href="images/cat-pb.jpg" rel="photos"><img src="images/cat-pb-thumb.jpg" width="150" height="100" alt="cat2"></a>
  <a href="images/cat-tb.jpg" rel="photos"><img src="images/cat-tb-thumb.jpg" width="150" height="100" alt="cat3"></a>
  <a href="images/cat-pc.jpg" rel="photos"><img src="images/cat-pc-thumb.jpg" width="150" height="100" alt="cat4"></a>
</p>
var photoSwipeInstance = null;
var $demoChangePlugin = $("#demo-change-plugin");
$demoChangePlugin
  .responsiveChange('sp-pb', {
    enter: function(){
      // atatch
      if (photoSwipeInstance == null) {
        photoSwipeInstance = $demoChangePlugin.find('a').photoSwipe();

        $('.photoswipe-link').addClass('active');
      }
    },
    exit: function(){
      // detatch
      Code.PhotoSwipe.unsetActivateInstance(photoSwipeInstance);
      Code.PhotoSwipe.detatch(photoSwipeInstance);
      photoSwipeInstance = null;
      $('body').removeClass('ps-active');

      $('.photoswipe-link').removeClass('active');
    },
    delay: { enter: 1 }
  })
  .responsiveChange('tb-pc', {
    enter: function(){
      if (!$('.fancybox-link').hasClass('active')) {
        // atatch
        $demoChangePlugin.find('a').fancybox({ live: false });

        $('.fancybox-link').addClass('active');
      }
    },
    exit: function(){
      // detatch
      $demoChangePlugin.find('a').off("click");
      $('html').removeClass('fancybox-margin fancybox-lock');
      $('.fancybox-wrap').remove();
      $('.fancybox-overlay').remove();

      $('.fancybox-link').removeClass('active');
    },
    delay: { enter: 1 }
  });
View source