Delivering the best Add-Ons in more than 37 languages.

中文(简体), English, हिन्दी/हिंदी, Español/Castellano, العربية, Русский язык, Français, 中文 (台灣), বাংলা, Bahasa Indonesia, اردو, Português, Deutsch, Bahasa Melayu (بهاس ملايو‎), 日本語 (にほんご), فارسی, Italiano, తెలుగు, Türkçe, ગુજરાતી, Język polski/polszczyzna, Tiếng Việt, ಕನ್ನಡ, Українська мова, ไทย
JavaScript / Images and Media

jQuery CSS3 Lightbox Gallery Plugin

— Add-On to

Subscribe to our feed to stay up to date!

New! Follow us as you want it!

jQuery CSS3 Lightbox Gallery Plugin - CodeCanyon Item for Sale


Ad: Bluehost hosting

The CSS3 Lightbox is a jQuery plugin you can use to display your images. The CSS3 transitions is driven by Animate.css, it is hardware accelerated in the modern browser. And It’s mobile friendly, which works in your touch device like iPhone & iPad.

Follow CodeCanyonSubscribe RSS Feed New Reases and Thenie


  • CSS3 transitions driven animation.
  • 24 easeIn and 23 easeOut animation type.
  • Keyboard shortcut support.
  • It’s lightweight.
  • Mobile friendly, works in the touch device like iOS.
  • Graceful degradation, it will works on the browser which doesn’t support CSS3 transitions. We use Modernizr here.
  • Optional arrow and close button.
  • FAQ & uncompressed js file are include in the source package.

Plugin parameters

the container name make the ease and out animation random not true, when the randomEase set false, how ease when the randomEase set false, how ease out display the close button not true, display the arrow buttons not true, when click the big image, play next close itself nothing null auto hide the buttons when mouse out the document set false you want keep the buttons always seen true

Available easeIn and easeOut type

‘flipInX’, ‘flipInY’, ‘pulse’, ‘rollIn’, ‘fadeIn’, ‘fadeInUp’, ‘fadeInDown’, ‘fadeInLeft’, ‘fadeInRight’, ‘fadeInRight’, ‘fadeInUpBig’, ‘fadeInDownBig’, ‘fadeInLeftBig’, ‘fadeInRightBig’, ‘bounceIn’, ‘bounceInDown’, ‘bounceInUp’, ‘bounceInLeft’, ‘bounceInRight’, ‘rotateIn’, ‘rotateInDownLeft’, ‘rotateInDownRight’, ‘rotateInUpLeft’, ‘rotateInUpRight’

‘flipOutX’, ‘flipOutY’, ‘pulseOut’, ‘rollOut’, ‘fadeOut’, ‘fadeOutUp’, ‘fadeOutDown’, ‘fadeOutLeft’, ‘fadeOutRight’, ‘fadeOutUpBig’, ‘fadeOutDownBig’, ‘fadeOutLeftBig’, ‘fadeOutRightBig’, ‘bounceOut’, ‘bounceOutDown’, ‘bounceOutUp’, ‘bounceOutLeft’, ‘bounceOutRight’, ‘rotateOut’, ‘rotateOutDownLeft’, ‘rotateOutDownRight’, ‘rotateOutUpLeft’, ‘rotateOutUpRight’

The flip transition works in Webkit & IE10 only.


Most the pictures are from Animate.css is from Dan Eden.

Recommendations For You

jQuery OneByOne Slider Plugin:
Touch Screen Please Wipe Left Right

Other components in this categoryAll components of this author
CommentsFrequently asked questions and answers


23 November 11

Last Update:

High Resolution:

Compatible Browsers:
IE7, IE8, IE9, Firefox, Safari, Opera, Chrome

Files Included:
JavaScript JS, HTML, CSS

Software Version:


eCommerce, eCommerce, All Items, android, arrow, css3, fixed, gallery, iphone, keyboard, lightbox, navigation, overlay, plugin, popover, popup, shortcut, slideshow