darkbox.js
Weights just âš–1.88kb Gzipped
An updated, minimal version of the lighbox2 script.
Darkbox is a minimalistic, dynamic, content-first javascript library used to overlay images on top of the current page. It's a snap to setup and works on all modern browsers.
Usage
-
Copy files from /dist to your project
-
Include darkbox in your website
<link rel="stylesheet" type="text/css" href="./css/darkbox.css" /> <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script> <script type="text/javascript" src="./js/darkbox.js"></script>- Create an image inside your positioned container with 100% width
<div> <img id="gallery" src="./assets/image.jpg" alt="" /> </div>img { width: 100%; height: auto; }- Start the gallery on image click with your custom set of images
$(document).ready(function () { $('#gallery').click(function() { $(this).darkbox([ "./assets/image.jpg", "./assets/image2.jpg", ]); }); });Options
These are the available options with their respective default values:
options = { startWithCurrent: true, // add/move the image on which this was started to the first position in image array wrapAround: false, // after clicking next on the last picture wrap to the first showProgressBar: true, // show progressbar on the top of images showTitle: false, // show text with the current image number and the number of images disablePageScrolling: true, // disable page scrolling while darkbox is opened endCallback: null, // function to be called on darkbox exit }; $(this).darkbox(images, options);Examples
See the /example folder.
License
Darkbox is licensed under the MIT License.
by WhoMeNope
