Please check by resizing the window. Breakpoint is the default setting.
$.responsiveChange({
breakpoints: { sp:480, pb:768, tb:1024, pc:'none' },
unit: 'px'
});
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() }
});
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');
}
});
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');
}
});
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) } });
sp-pb: PhotoSwipe tb-pc: fancyBox
<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 }
});