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.
-
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",
]);
});
});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);See the /example folder.
Darkbox is licensed under the MIT License.
by WhoMeNope