Supersized jQuery plugin; Fit Always per image

Supersized┬áis my go to plugin for fullscreen background images, it just works perfectly. Recently though I had a use case that wasn’t part of the plugin, with Supersized you can either choose to clip an image (and completely fill the browser window) or to “fit always” (so an image is never clipped). I needed an extra level of granularity, I had a slideshow where some of the images needed to be clipped and some couldn’t be clipped.

This one is ok to crop


D
on’t crop this one

So, in my first epic github adventure, I cloned, branched, and pushed back to my github account with my changes!

https://github.com/erd0s/buildinternet-supersize-mod/tree/multiscale

You can now use fit_always: true in the images object like so:

jQuery(function($){
  $.supersized({
  // Functionality
  slide_interval : 3000,
  transition : 1,
  transition_speed : 700,

  slides : [
    {image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/kazvan-1.jpg', fit_always: true},
    {image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/kazvan-2.jpg'},
    {image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/kazvan-3.jpg', fit_always: true},
    {image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/wojno-1.jpg', fit_always: true}
    ]
  });
});

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>