Get this plugin ▸

Make a flip lightbox with CSS3

flipLightBox.js is a responsive jQuery lightbox plugin that is focused on providing fancy 3d flipping effect with css3 and javascript. Main Features include:
  • 3D Flipping Effect with CSS3
  • Support both Image Lightbox and HTML Dialog
  • Image Gallery
  • Responsive jQuery Plugin
  • 15+ Options for Customization
  • Support All Modern Browsers (chrome 16+, firefox 12+, safari 5+, opera 12+, and IE10+)
  • Support PC, Mac, iPad, iPhone
  • Keyboard shortcuts for close, navigation left and right
↑ Click an image to see flipLightBox.js in action

Let's code

                        
//references to jquery 1.7.0+ and flipLightBox.min.js
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script src="flipLightBox.min.js"></script>
//example for image lightbox
//Basically you need a link and the thumbnail of an image inside this link for your html markup.
//And generally the link href points to a larger image that would be shown in lightbox
<a class="image-example" href="./images/road.jpg" title="Road">
<img src="./images/road_200X200.jpg" />
</a>
//js code
$(".image-example").flipLightBox({type: "image"})
                        
//An example for html lightbox
//Similar to image type, you need a link and the thumbnail of an image inside this link for your html markup.
//But the different part is that the link href points to a html block id that tells flipLightBox plugin to render in the lightbox.
<a class="html-example" href="#html-example">
<img src="./images/road_200X200.jpg" />
</a>
<div id="html-example" class="html-dialog-example">Html lightbox example</div>
//js code
$(".html-example").flipLightBox({type: "html"})
Html lightbox example

More Examples

Single Image Lightbox

Lightbox Gallery

Open / Close events callback

Html Dialog and customized close button

API document - options

Option Name
Default Value
Possible Values
Description
type
'image'

'image'

'html'

specify what type of data your links point to
direction
'rl'

'lr': left to right

'rl': right to left

'tb': top to bottom

'bt': bottom to top

specify the direction to flip your lightbox.
speed
'1000ms'

duration like '1500ms' or '1.5s'

specify animation duration
timingfunction
'ease'

'ease'

'ease-in'

'ease-out'

'ease-in-out'

'linear'

'ease-in-quad'

'ease-in-cubic'

'ease-in-quart'

'ease-in-quint'

'ease-in-sine'

'ease-in-expo'

'ease-in-circ'

'ease-out-quad'

'ease-out-cubic'

'ease-out-quart'

'ease-out-quint'

'ease-out-sine'

'ease-out-expo'

'ease-out-circ'

'ease-in-out-quad'

'ease-in-out-cubic'

'ease-in-out-quart'

'ease-in-out-quint'

'ease-in-out-sine'

'ease-in-out-expo'

'ease-in-out-circ'

specify animation timing function
marginLeft
'6px'

minimum margin left like '10px'

minimum margin left for lightbox
marginTop
'50px'

fixed margin top like '10px'

fixed margin top for lightbox. Only works when fixedContentPos is true.
fixedContentPos
false

true

false

whether the ligthbox has fixed position or not. If it's true, please adjust marginTop value accordingly
hideOriginal
true

true

false

whether hide the original thumbnail or not. Please note that it may affect the page elements layout when the plugin hides the original thumnail. But you can fix this by simply adding a wrapper on your link. Just like I did in the top example in this page.
flipCount
1

Any odd number like 1, 3, 5

specify how many flips you want to do during opening/closing animation. Odd number only. The less closest odd number will be used if you give an even number, e.g. 1 will be used internally if you give 2
modal
false

true

false

whether the lightbox is modal or not. When modal is true, it won't close the lightbox if user clicks on the blank overlay. Otherwise, it will.
closeOnContentClick
true

true

false

whether closing the ligbtbox or not when clicking on the lightbox
backgroundAnimating
true

true

false

whether animating the ligbtbox background or not when opening/closing the lightbox
backgroundColor
'rgba(11,11,11,0.8)'

color

specify your lightbox background color
closeButton {
 

enable
true

true

false

whether showing close button or not
position
1

1 : lightbox right corner

2 : lightbox left corner

3 : window right corner

4 : window left corner

specify close button position.
}
 

gallery {
 

enable
true

true

false

whether showing close button or not
}
 

when {
 

opening
$.noop

callback function

light box opening event callback. One passing-in parameter: flb object, which has a "backEl" jquery obj and "close()" function you can call to close the lightbox. So it means you have the flexibility to set up your own click event to close the lightbox instead of default "close" button click event.
opened
$.noop

callback function

light box opened event callback.
closing
$.noop

callback function

light box closing event callback.
closed
$.noop

callback function

light box closed event callback.
getBacksideWidth
$.noop

callback function

return width for your lightbox, must be a valid number.
getBacksideHeight
$.noop

callback function

return height for your lightbox, must be a valid number.
getBacksideHtml
$.noop

callback function

set up your lightbox html dynamically, must return a valid html markup string.
}
 

Licensing

Released under CodeCanyon Regular License.

Get this plugin →