jQuery fullsizable plugin

jQuery plugin to make use of the full available browser space for enjoyable image viewing. Also supports the native HTML5 fullscreen API in modern browsers.

jQuery Plugin page: http://plugins.jquery.com/fullsizable/

Demo

Look at the demo section on http://mschmidt.github.io/jquery-fullsizable to see jquery-fullsizable in action.

Installation

You can install jquery-fullsizable by using Bower.

bower install jquery-fullsizable

Example Usage

Use with default settings:

$('a.fullsizable').fullsizable();
// while a.fullsizable are links to big images

Example with options:

$('a.fullsizable').fullsizable({
  detach_id: 'wrapper',
  clickBehaviour: 'next'
});

Options

detach_id (optional, defaults to null) - id of an element that will temporarily be set to display: none after the curtain loaded. This can be used to hide scrollbars on long pages by e.g. detaching a wrapper element.

navigation (optional, defaults to true) - show next and previous links when working with a set of images. Style links with #fullsized_go_prev and #fullsized_go_next

closeButton (optional, defaults to true) - show a close link. Style with #fullsized_close

fullscreenButton (optional, defaults to true) - show full screen button for native HTML5 fullscreen support in supported browsers. Style with #fullsized_fullscreen

openOnClick (optional, defaults to true) - set to false to disable default behaviour which fullsizes an image when clicking on a thumb.

clickBehaviour (optional, 'next' or 'close', defaults to 'close') - whether a click on an opened image should close the viewer or open the next image.

preload (optional, defaults to true) - lookup selector on initialisation, set only to false in combination with reloadOnOpen: true or fullsizable:reload event.

reloadOnOpen (optional, defaults to false) - lookup selector every time the viewer opens.

loop (optional, defaults to false) - don't hide prev/next button on first/last image, so images are looped

Styling

The packaged fullsizable.css stylesheet provides only the bare bones to make fullsizable work. Everything else (basically the look of the buttons) is up to you. The simple.html example contains a few styles to give you an idea:

#fullsized_go_prev, #fullsized_go_next, #fullsized_close, #fullsized_fullscreen {
  position: absolute;
  top: 50%;
  display: block;
  width: 30px;
  height: 30px;
  background-color: red;
}
#fullsized_go_prev {
  left: 25px;
}
#fullsized_go_next {
  right: 25px;
}
#fullsized_close {
  top: 0;
  right: 0;
}
#fullsized_fullscreen {
  top: 0;
  right: 40px;
  background-color: green;
}
:fullscreen #fullsized_fullscreen { background-color: blue; }
:-webkit-full-screen #fullsized_fullscreen { background-color: blue; }
:-moz-full-screen #fullsized_fullscreen { background-color: blue; }

Included theme

Since v2.0 there is also an ready-to-use theme bundled as jquery-fullsizable-theme.css. Have a look at the themed_with_touch.html example.

Advanced Usage

Dynamic loading (e.g for pages built with a MVC framework)

By default, fullsizable checks the selector fullsizable() was called on in the beginning and stores the found images internally. In case some images get added, remove or reordered on the page, fullsizable won't know about the change and may behave unexpected.

For this situation fullsizable includes the reloadOnOpen option. With this options set to true the selector will be run every time a user enters the fullsized view. Since this is true for the first opened image as well you should disable the preload option too to save the browser from doing the same work twice:

$('#gallery a').fullsizable({
  preload: false,
  reloadOnOpen: true
});

Adding touch events

Because of the variety of mobile and touch devices and their quirks, fullsizable doesn't add it's own touch events. It would add too much code to the otherwise small library. Also if you are planning to make your page touch-ready, you've most likely included a touch-framework like Hammer.js already.

Use such a touch-framework in combination with the provided fullsizable triggers and event.

Here is an example for adding swipe events with TouchSwipe: (from themed_with_touch.html example)

$('a').fullsizable({
  detach_id: 'container'
});

$(document).on('fullsizable:opened', function(){
  $("#jquery-fullsizable").swipe({
    swipeLeft: function(){
      $(document).trigger('fullsizable:next')
    },
    swipeRight: function(){
      $(document).trigger('fullsizable:prev')
    },
    swipeUp: function(){
      $(document).trigger('fullsizable:close')
    }
  });
});

Custom triggers and events

When using fullsizable in combination with a javascript MVC or any other advanced framework you may want to customize the whole flow of loading images, opening the viewer, etc.

Therefor the following triggers and events are available:

Events: fullsizable:opened

Triggers: fullsizable:open, fullsizable:close, fullsizable:next, fullsizable:prev, fullsizable:reload

Changelog

• 2.1.0 - 25.06.2015

  • allow custom function for clickBehaviour option (thanks to MatoTominac)
  • add loop option (thanks to pohlaniacz)
  • add bower support

• 2.0.2 - 03.09.2014

  • fullsizable:opened returns selector of element which triggered the viewer

• 2.0.1 - 15.07.2014

  • hiding UI elements works more reliably now

• 2.0 - 13.07.2014

  • add events and triggers for more advanced usage (e.g. adding touch events)
  • hide UI elements while navigating with keyboard or other events
  • better defaults for most common use case of having a gallery with multiple images
  • clean up DOM after the viewer is closed
  • remove dynamic mode and add options to achieve the same
  • fix distortion issue in IE11 (#3)

• 1.6 - 26.02.2013

  • open sourced under MIT, no technical changes

• 1.5 - 12.04.2012

  • add allowFullscreen option (native HTML5 fullscreen support)

• 1.4 - 10.04.2012

  • add closeButton option
  • add clickBehaviour option
  • bugfix: remember scroll position when using detach option

• 1.3 - 25.08.2011

  • add openOnClick option to enable/disable default behavior
  • add dynamic mode for advanced usage scenarios
  • bugfix: closing curtain too early left blank page
  • bugfix: spinner appeared too late
  • bugfix: first image appeared uncropped sometimes

• 1.2 - 11.08.2011

  • add navigation option to enable next and previous links
• 1.1 - 29.05.2011
  • first stable version
  • keyboard support
  • intelligent preloading

Contributing

This plugin is written in CoffeeScript and then "compiled" into JavaScript. Please try to make changes to the jquery-fullsizable.coffee file directly and compile with coffee -c js/jquery-fullsizable.coffee.

Copyright

(c) 2011-2015 Matthias Schmidt http://m-schmidt.eu/ & http://pixelflush.com/