jQuery Fullsizable Plugin

Fullsizable is a 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.

Features

• tested in all major browsers (including mobile browsers)
• responsive by default
• exposes events and triggers for great customization
• can easily work with touch events
• can be styled to fit your required look easily
• works great with pure javascript pages (AngularJS, Ember, Backbone, etc.)
• only 4.8 KB (minified)

• denizli escort
• denizli escort
• didim escort
• düzce escort
• edirne escort
• edirne escort
• edremit escort

Source: mschmidt.github.io

1. INCLUDE CSS AND JS FILES

<link rel="stylesheet" href="../css/jquery-fullsizable.css" />
<link rel="stylesheet" href="../css/jquery-fullsizable-theme.css" />
<script src="../js/jquery-1.7.2.js"></script>
<script src="../js/jquery.fullsizable.js"></script>

2. HTML

div id="container">
    <a href="http://upload.wikimedia.org/wikipedia/commons/thumb/3/34/Locomotives-Roundhouse2.jpg/1000px-Locomotives-Roundhouse2.jpg">
      <img title="Locomotives Roundhouse"
            alt="Steam locomotives of the Chicago &amp; North Western Railway."
            src="http://upload.wikimedia.org/wikipedia/commons/thumb/3/34/Locomotives-Roundhouse2.jpg/100px-Locomotives-Roundhouse2.jpg">
    </a>
    <a href="http://upload.wikimedia.org/wikipedia/commons/thumb/3/36/Icebergs_in_the_High_Arctic_-_20050907.jpg/1000px-Icebergs_in_the_High_Arctic_-_20050907.jpg">
      <img title="Icebergs in the High Arctic"
            alt="”The debris loading isn't particularly extensive, but the color is usual.”"
            src="http://upload.wikimedia.org/wikipedia/commons/thumb/3/36/Icebergs_in_the_High_Arctic_-_20050907.jpg/100px-Icebergs_in_the_High_Arctic_-_20050907.jpg">
    </a>
    <a href="http://upload.wikimedia.org/wikipedia/commons/thumb/f/fe/Ara%C3%B1a._A_Estrada%2C_Galiza._02.jpg/1000px-Ara%C3%B1a._A_Estrada%2C_Galiza._02.jpg">
      <img title="Araña"
            alt="Xysticus cristatus, A Estrada, Galicia, Spain"
            src="http://upload.wikimedia.org/wikipedia/commons/thumb/f/fe/Ara%C3%B1a._A_Estrada%2C_Galiza._02.jpg/100px-Ara%C3%B1a._A_Estrada%2C_Galiza._02.jpg">
    </a>
    <a href="http://upload.wikimedia.org/wikipedia/commons/thumb/b/ba/Fitness_Model_Britt_2007.JPG/1000px-Fitness_Model_Britt_2007.JPG">
      <img title="Araña"
            alt="Xysticus cristatus, A Estrada, Galicia, Spain"
            src="http://upload.wikimedia.org/wikipedia/commons/thumb/b/ba/Fitness_Model_Britt_2007.JPG/100px-Fitness_Model_Britt_2007.JPG">
    </a>
</div>

3. JAVASCRIPT

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

4. 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 withreloadOnOpen: true or fullsizable:reload event.

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