Get new jQuery plugins just once a week



August 8, 2014

fullsizable | jQuery plugin for full-screen image viewing

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:


Look at the demo section on to see jquery-fullsizable in action.


You can install jquery-fullsizable by using Bower.

bower install jquery-fullsizable

Example Usage

Use with default settings:

// while a.fullsizable are links to big images

Example with options:

  detach_id: 'wrapper',
  clickBehaviour: 'next'


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


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)

  detach_id: 'container'

$(document).on('fullsizable:opened', function(){
    swipeLeft: function(){
    swipeRight: function(){
    swipeUp: function(){

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



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


(c) 2011-2015 Matthias Schmidt &

Created by Matthias Schmidt



fullsizable jQuery plugin



Related posts:

fullsizable jQuery plugin

jQuery plugin

Sign up for our weekly newsletter.

* We won't spam you ever
Couple Gift Ideas