Download
User Rating: 4.8/5 ( 1 votes)
flipLightBox is a free Responsive Lightbox jQuery Plugin that is extremely easy to implement and doesn't require any additional stylesheets, scripts or libraries. Its main feature is an optional flip effect as each lightbox image opens and closes. Another optional feature is a toggled slide text bar and navigation to accompany the lightbox images. Upgrades are also available.
1. INCLUDE JS FILES
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="fliplightbox/fliplightbox.min.js"></script>
2. HTML
<a href="lightbox-image.jpg" class="flipLightBox">Link Text or Image<span>Optional Lightbox Text</span></a>
Create an '<a>' tag that links to your lightbox image jpg, gif or png. Then add a class attribute named 'flipLightBox'
3. JAVASCRIPT
$('body').flipLightBox({
lightbox_flip_speed: 500,
lightbox_border_color: '#666666'
});
4. OPTIONS
// 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: '#fff',
lightbox_z_index: '1000',
// SPEED SETTINGS
lightbox_flip_speed: 800, // Speed of complete lightbox flip or fade (milliseconds).
// *Picture/Lightbox Text Settings*
lightbox_text_status: 1, // 1 = On & 0 = Off.
lightbox_text_style: 'font-size: 14px; line-height: 1.4; color: #000; text-align: center;',
lightbox_text_background_style: 'background-color: #fff; 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: #000;',
image_number_page: 'Image',
image_number_of: 'of',
image_number_text_style: 'color: #000;',
// *Image Streaming Text Settings*
loading_text_color: '#fff',
loading_text_opacity: '0.3'
JS Tutorial
