Version: 0.2  (Last Updated: 10/2/2011 - 18:55)

Why do you use AdaptiveMedia ?

Your desktop-centric images are loaded slowly and costed to your visitors for devices with small screen like mobile phones. That is why, you may create more than one image for different screen sizes and load them with AdaptiveMedia.


Features

With AdaptiveMedia

  • You need only one css file for any window sizes,
  • No need LESS or same solutions,
  • No need CSS3 Media Queries,
  • Less than 3KB,
  • HTML5 compatible,
  • IE6 compatible.
  • User callback: execute user function before completed all job.
Plugin Using

$.fn.adaptivemedia (UserTemplate, UserFunction);

 UserTemplate is an array. You define your media files sources and/or their class/classes for different screen sizes.

UserFunction is a function. It's optional. If you define, this function is executed before completed AdaptiveMedia.

AdaptiveMedia Samples

A bordered sample. You may test this sample with resizing your browser window.

Also a HTML5 sample. You may test this sample with resizing your browser window.

How do you use AdaptiveMedia ?

For using AdaptiveMedia;

1. download AdaptiveMedia.js and than add jQuery and AdaptiveMedia.js plugin links to your html's head section. AdaptiveMedia.js must be in head section:

<script type="text/javascript" src="path/jquery.min.js"></script>
<script type="text/javascript" src="path/jquery.adaptivemedia-min.js"></script>

2. Let's define plugin parameters and plugin call for inital and window resize

<script type="text/javascript">
$(document).ready(function() {
  var mymedias = [
       '800, #logo src=images/logo.png',
       '800, #logo=class1 class2',
       '800, #show src=media/show-640x480.webm'
       '800, #show=class5'
       '480, #logo src=images/logo2.png',
       '480, #logo=class3',
       '480, #show src=media/show-480x320.webm'
       '480, #show=class6'
       '0, #logo src=images/logo3.png'
       '0, #logo=class4',
       '0, #show src=media/show-320x240.webm'
       '0, #show=class7'
       ]

  $.fn.adaptivemedia(mymedias);

  $(window).resize(function() {
       $.fn.adaptivemedia(mymedias);
  });
});
</script>

3. and define your medias at html for example like this:

<img   id='logo'   src=''   class='p80' />

<video id='video' class='media1' controls='controls' class='p80' >
   <source id='show' src=''  type='video/webm; codecs="vorbis,vp8"'></source>
</video>


Let's explain "mymedias" array's elements one by one:

'800, #logo src=images/logo.png'

First parameter(800 at this sample) defines that this line is valid when window size equal or greater than this value.

Second parameter is always media id and 'src' for images, embed, video source or 'data' for object source and than, location after an equal sign.

You may also define class or classes for medias, like this:

'800, #logo=class1 class2'

If you define class, at that screen size, AdaptiveMedia.js removes current class/classes and than adds this class/classes.

Class "p80" is defined at media.css as width=80%. It means that width will be 80% of parent's width. You must define media's width as percent.

Download AdaptiveMedia

Just AdaptiveMedia.js (developer and minified versions).

AdaptiveMedia.js with all samples.

Send Comment or Read Comments

Read Comments

Send Your Comment