Simple Fullscreen Image Slideshow Plugin - fullsizable

fullsizable is a jQuery plugin which allows you to create a slidershow to display images in fullscreen mode or normal mode by double clicking an image or clicking the fullscreen button. It also supports the native HTML5 fullscreen API in modern browsers like chrome, firefox, safari, etc.

Basic Usage:

1. Include jQuery Library and fullsizable in your head section

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="../js/jquery.fullsizable.js" type="text/javascript"></script>

2. Include fullsizable CSS to style your plugin

<link rel="stylesheet" href="../css/fullsizable.css" type="text/css" />

3. HTML Markup Structure

<div id="container"> 
  <a href="1.jpg">
    <img src="1.jpg">
  </a>
  <a href="2.jpg">
    <img src="2.jpg">
  </a>
  <a href="3.jpg">
    <img src="3.jpg">
  </a>
  <a href="4.jpg">
    <img src="4.jpg">
  </a>
</div>

4. The CSS (Only for the example)

<style type="text/css" media="screen">
#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;
}
</style>

5. Call the plugin with options

<script type="text/javascript" charset="utf-8">
    $(function() {
      $('a').fullsizable({
        detach_id: 'container', // ID of an element that will 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: true, // Set to true to show next and previous links. Style links with #fullsized_go_prev and #fullsized_go_next
        closeButton: true, // Set to true to show a close link. Style with #fullsized_close
        clickBehaviour: 'next' // Whether a click on an opened image should close the viewer or open the next image. 'next' or 'close'
        // openOnClick: true, // Set to false to disable default behavior which fullsizes an image when clicking on a thumb. See advanced section for more detail
        // allowFullscreen: true, // Enable native HTML5 fullscreen support in supported browsers. Style with #fullsized_fullscreen
      });
    });
 </script>

More Examples:

• Basic
• Custom Event

Change logs:

2015-06-25

• v2.1.0

2014-09-03

• Return selector of opening element in fullsizable:opened

2014-07-15

• Major update to version 2.0 with events/trigger, bug fixes and cleanup

---

This awesome jQuery plugin is developed by MSchmidt. For more Advanced Usages, please check the demo page or visit the official website.