Plugin for jQuery library being a free and lightweight alternative for Lightbox or Fancybox.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
examples
LICENSE
README.md
close.png
jquery.frydBox.js
jquery.frydBox.min.js
next.png
prev.png

README.md

frydBox 1.0.6

frydBox version License PayPal donate

Plugin for jQuery library being a free and lightweight (less than 10kB) alternative for Lightbox or Fancybox. Compatible with jQuery since version 1.7 and 99% browsers, mobile friendly. Embedded lazy loading. You can specify prefix of the class, background opacity, modal size, border radius, navigation images and other parameters; frydBox doesn't include any external CSS file. It's free also in commercial use. Since version 1.0.3 you have access to callback functions.

Installation

Include it after jQuery script:

<script src="jquery.frydBox.min.js"></script>

You can use our cdn hosting:

<script src="https://cdn.frydlewicz.pl/app/frydBox/jquery.frydBox.min.js"></script>

Use

Single photo:

<a href="photo_big.jpg" id="photo"><img src="photo_min.jpg"></a>
<script>
$("#photo").frydBox();
</script>

Group of photos:

<a href="photo1_big.jpg" class="photo"><img src="photo1_min.jpg"></a>
<a href="photo2_big.jpg" class="photo"><img src="photo2_min.jpg"></a>
<a href="photo3_big.jpg" class="photo"><img src="photo3_min.jpg"></a>
<script>
$(".photo").frydBox();
</script>

Configuration

You can set optional parameters:

<script>
$(".photo").frydBox({
   // custom prefix
   prefix: 'frydBox_',

   // enable lazy loading
   lazyLoading: true,
   lazyLoadingStart: 1000,
   lazyLoadingDelay: 100,

   // fade and move duration
   fadeDuration: 500,
   moveDuration: 750,
   fadeWhenMove: true,

   // appearance settings
   screenPercent: 0.9,
   backOpacity: 0.6,
   shadowOpacity: 0.6,
   shadowSize: 18,
   borderSize: 10,
   borderColor: '#fff',
   borderRadius: 8,

   // show animated loader
   showLoader: true,

   // hide scroll bars
   scrollBars: false,

   // navigation images
   prevImage: 'prev.png',
   nextImage: 'next.png',
   closeImage: 'close.png'

   // callback functions
   onClickLink: function(galleryIndex, imageIndex, src) {},
   onClickPrev: function(src) {},
   onClickNext: function(src) {},
   onImageLoaded: function(src) {},
   onImageShowed: function(src) {},
   onHide: function() {},
   onLazyLoadingStart: function() {},
   onLazyLoadingEnd: function() {}
});
</script>

If you want to hide previous, next or close navigation images, just type false.

Examples

Author

Kamil Frydlewicz

License

MIT License