Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Responsive Images loader and detection with jQuery
JavaScript
Branch: master

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.
.gitignore
README.md
responsive-images.js

README.md

Responsive Images

Takes a regular HTML img src and dynamically changes the src to the appropriate screen resolution based image for the user. This is currently configured to work with Drupal's OMEGA theme, and detects 960, 720 and mobile options but more can be added.

How it works:

  • Determine the actual width of a container via CSS on page load and resizing
  • once we know what size the main container is, we know the size of the device they're on
  • go through and find any img src with class="responsive" and change these to
  • appropriate device versions: eg: images/steve-en.jpg could then be changed to
  • images/steve-en-tablet.jpg in tablet mode.
  • .container-12 960 or 720 else mobile

Extras

There is also an additional class called: hide-mobile It will set the image to hidden on mobile devices instead of trying to load a mobile version.

This can be added like

<img src="steve.jpg" class="responsove hide-mobile" />

Desktop users will see:

<img src="steve.jpg" class="responsove hide-mobile" />

Tablet users will see:

<img src="steve_tablet.jpg" class="responsove hide-mobile" />

Mobile users won't get an image, hidden.

Contact?

@leggettsteven

Something went wrong with that request. Please try again.