Responsive Images loader and detection with jQuery
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.

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


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.