Responsive jQuery Lightbox With Flip and Overlay Effects - flipLightBox

flipLightBox is a responsive and easy-to-use jQuery lightbox plugin that comes with image flip effect and navigation functionality.

Features:

• Responsive design
• Extremely simple to use
• A text slide bar to accompany lightbox image
• Flip effect as lightbox image opens and closes
• Full screen overlay effect.

More examples:

• Basic example
• Multi link example
• List example
• Change settings example

Basic Usage:

1. The html

<div> 
<a href="1.gif" class="flipLightBox"> 
<img src="1.gif" width="" height="" alt="Image 1" /> 
<span>A text slide bar to accompany lightbox image</span> 
</a> 
</div>

2. Include the jQuery library and jQuery flipLightBox plugin on the web page

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
<script src="fliplightbox.min.js"></script> 

3. Call the plugin

$('body').flipLightBox()

4. Default plugin settings.

// FLIP MODE SETTINGS
// ------------------

flip_mode: 1,

// 1 = Flip On & 0 = Flip Off (fade). 

// VISUAL SETTINGS
// ---------------

lightbox_background_opacity: 0.8,

lightbox_border_width: 10, // (pixels)

lightbox_border_color: '#ffffff',

lightbox_x_close_opacity: 1,

lightbox_z_index: '1000',

lightbox_image_drag: 0, // 1 = Allow & 0 = Disallow.

// SPEED SETTINGS
// --------------

lightbox_flip_speed: 800,

// Speed of complete lightbox flip or fade (milliseconds).

// TEXT SETTINGS
// -------------

// *Picture/Lightbox Text Settings*

lightbox_text_status: 1,

// 1 = On & 0 = Off.

lightbox_text_style: 'font-size: 14px; line-height: 1.4; color: #000000; text-align: center;',

lightbox_text_anchor_link_style: 'text-decoration: underline; color: #000000;',

lightbox_text_background_style: 'background-color: #ffffff; opacity:0.8;',

lightbox_text_area_position: 'bottom',

// bottom or top

// *Picture/Lightbox Navigation Text Settings*

lightbox_navigation_status: 1,

// 1 = On & 0 = Off.

next_image_text: 'Next ››',

back_image_text: '‹‹ Back',

next_and_back_image_text_style: 'font-weight: bold; color: #000000;',

image_number_page: 'Image',

image_number_of: 'of',

image_number_text_style: 'color: #000000;',

// *Image Streaming Text Settings*

loading_text_color: '#ffffff',

loading_text_opacity: '0.3'

Change logs:

v1.3.0 (2016-05-20)

• update.

v1.2.1 (2015-03-17)

• Now allows for hyperlinks within the accompanying text area as well as some minor bug fixes.

v1.1.0 (2014-05-16)

• Chrome Bug Fix.

v1.0.1 (2013-07-31)

• Now allowing different groups within the same document and it's now possible to distribute the links anywhere in the body with the functional navigation intact. Also some small code refinements.

---

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