Fully Responsive jQuery Image Lightbox Plugin - Framr

Framr is a simple clean jQuery plugin that displays the large version of your image in a responsive lightbox with a full page overlay. The plugin is designed for responsive web layout so the lightbox & image will auto resize according to your screen size.

How to use it:

1. Include jQuery javascript library and the jQuery framr plugin on the web page.

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

2. Insert an small image in the web page and link it to the large version.

<a href="large.jpg" class="demo">
<img src="Thumb.jpg">
</a>

3. Initialize & setup the plugin to suit for your needs.

<script type="text/javascript">
$(document).ready(function() {
$(document).framr({
auto: false, // auto resize
trigger: 'demo', // jQuery selector
escapeClose: true, // ESC key to close
overlayClose: true, // Click the overlay to close
contentClose: false, // Click the content to close
overlayFade: 250,
contentDelay: 250,
contentFade: 250,
beforeLoad: function(){},
overlayComplete: function(){},
contentComplete: function(){}
});
});
</script>

4. Don't forget to add the following CSS styles into your CSS file.

.framr_wrapper {
width: 50%;
max-width: 600px;
height: auto;
margin: 50px auto;
background: #fff;
position: absolute;
top: 50%;
margin-top: -25%;
left: 25%;
right: 25%;
display: none;
z-index: 991;
padding: 15px;
border-radius: 10px;
}
.framr_close {
position: absolute;
background: url('../images/close.png');
top: -10px;
right: -10px;
height: 30px;
width: 30px;
z-index: 9999;
cursor: pointer;
border-radius: 50%;
}
.framr_img {
width: 100%;
height: 100%;
margin: 0;
}

Change log:

2014-06-19

• Wrapper and positioning fix

---

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