kuvaify is a simple, clean and dependency free JavaScript lightbox gallery plugin with rotate, zoom and click and drag functionality


    How to use

  1. Include the css and js file.

    Example document

  2. Initialize:

    var mykuvaify = kuvaify()
  3. Customize:

    var mykuvaify = kuvaify({
      linkElement: 'body',
      fileTypes: ['jpg', 'jpeg', 'png', 'gif'],
      coverScreen: true,
      showShortcuts: true,
      transitionSpeed: 400,
      transitionOverlap: 0,
      transitionScale: 0.02,
      zoomRatio: 0.2,
      smallSize: 768,
      mediumSize: 1280


Choose the element that contain the links you want kuvaify to show.
linkElement: '#my-element'
Which file types should be included?
fileTypes: ['jpg', 'jpeg', 'png', 'gif']
By default images are stretched to cover the screen. Set to false to disable.
coverScreen: true
Set to false to disable shortcut help text for desktop users in the menu.
showShortcuts: true
Fade in and out, rotate and zoom transition time in ms. To increase performance set this to 0.
transitionSpeed: 400
Fade in and out transition overlap. Takes a value between 0 and 1. Lower values equals more overlap. A value of 1 should increase performance.
transitionOverlap: 0
Set the amount of scaling in transition. Setting this to 0 should increase performance.
transitionScale: 0.02
Set the amount of zoom per step.
zoomRatio: 0.2
smallSize and mediumSize
kuvaify uses the urls found in the links data-kuvaify-small and data-kuvaify-medium attributes if the screen width is lower than smallSize or mediumSize respectively.
smallSize: 768,
mediumSize: 1280
<a href="large.jpg" data-kuvaify-small="small.jpg" data-kuvaify-medium="medium.jpg">Image</a>
To add a caption you can you use the data-kuvaify-caption attribute in your link.
<a href="img.jpg" data-kuvaify-caption="Caption text here">Image</a>