This jQuery plugin allows you to add data attr to an image tag or element with a background image to supply different sizes images at different brake points. To save bandwidth when viewing on a mobile but supply sharp large images to larger displays.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
css
images
js
.editorconfig
README.md
index.html

README.md

forthebadgeforthebadgeforthebadgeforthebadge

imageR

This jQuery plugin allows you to add data attr to an image tag or element with a background image to supply different sizes images at different brake points. To save bandwidth when viewing on a mobile but supply sharp large images to larger displays.

Requires jQuery

SETUP

  1. Add imageR.js to your website just before the closing tag below jQuery
  2. Call the plugin with $('img').imageR(); in your js file in doc ready

###Options

Can take 3 options to overide default brakepoints.

Default Sizes: small: 0 medium: 480 large: 1024

$('.js-imageR').imageR({
    small: '0',
    medium: '480',
    large: '768'
});

###USAGE

Image Tag

<img class="js-imageR" data-small="image--small.jpg" data-medium="image--medium.jpg" data-large="image--large.jpg" alt="">

Background Image

<span class="js-imageR" data-small="image--small.jpg" data-medium="image--medium.jpg" data-large="image--large.jpg"></span>

Wordpress

Requires Advanced Custom Fields or echo the var dump of post_thumbnail to get sizes

  1. Set thumbnail sizes in settings -> media
  2. Regenerate Thumbnails (use https://en-gb.wordpress.org/plugins/regenerate-thumbnails/)

###USAGE

Image Tag

<?php $image = get_field('image'); ?>
<?php if ( !empty($image) ): ?>
    <img class="js-imageR" data-small="<?php echo $image['sizes']['medium']; ?>" data-medium="<?php echo $image['sizes']['large']; ?>" data-large="<?php echo $image['url']; ?>" alt="<?php echo $image['caption']; ?>" rel="js-showMenu">
<?php endif ?>

Background Image

<?php $image = get_field('image'); ?>
<?php if ( !empty($image) ): ?>
	<span class="js-imageR" data-small="<?php echo $image['sizes']['medium']; ?>" data-medium="<?php echo $image['sizes']['large']; ?>" data-large="<?php echo $image['url']; ?>"></span>
<?php endif ?>