Responsive jQuery Lightbox With Flip and Overlay Effects - flipLightBox

Responsive jQuery Lightbox With Flip and Overlay Effects - flipLightBox
File Size: 19.6 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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 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 &rsaquo;&rsaquo;',

back_image_text: '&lsaquo;&lsaquo; 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)

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.