0.11.0 • Published 7 years ago

absolute-box v0.11.0

Weekly downloads
-
License
MIT AND GPL-2.0
Repository
github
Last release
7 years ago

absolute-box

Join the chat at https://gitter.im/absolute-box/Lobby Build Status GitHub version Bower version npm version MIT and GPL-2.0 license

A simple jquery lightbox plugin.

:muscle: works with

  • jQuery v1.12.4
  • jQuery v2.2.4 (not tested)
  • jQuery v3.1.0 (not tested)

Latest Release

  • v0.11.0 (2016-12-05): umd
    • Drop support to Grunt in favour of to be replaced by Gulp.
    • Drop support to JSCS and JShint in favour of to be replaced by ESlint.
    • Add support to AMD/UMD.

Navigate

Download

Run one of these commands in your bash according to your needs.

git clone https://github.com/absolute-box/absolute-box.git

bower install absolute-box

npm install absolute-box

Or download the latest version from the releases page.

If you are updating, remember to read the Release History and to check for incompatibility issues.

Getting Started

You will need a specific layout to run this plugin correctly. The most simple layout is the first you'll find below and consists in a list of simple images wrapped in a container.

<div class="gallery simple">
  <img src="./assets/images/1.jpg" alt="Random Image"/>
  <img src="./assets/images/2.jpg" alt="Random Image"/>
  <img src="./assets/images/3.jpg" alt="Random Image"/>
  <img src="./assets/images/4.jpg" alt="Random Image"/>
  <img src="./assets/images/5.jpg" alt="Random Image"/>
  <img src="./assets/images/6.jpg" alt="Random Image"/>
  <img src="./assets/images/7.jpg" alt="Random Image"/>
  <img src="./assets/images/8.jpg" alt="Random Image"/>
</div>

If you optimize images for the web (and you should) and have many images for many more media queries, you should provide a url to the full-size image as an attribute. Just add data-absolutebox-full="./path/to/image.jpg" to the img element itself and let the plugin handle the rest.

If you don't want to use the absolutebox word for your reasons, you should match the word you want to use, like banana with the attr plugin option. $( ".your-gallery" ).absoluteBox( { attr: "banana" } );! See options.

Masonry has been tested too and it works like a charm.

<div class="gallery masonry">
  <div class="image-wrapper">
    <img src="./assets/images/1-thumbnail.jpg" alt="Random Image" data-absolutebox-full="./assets/images/1.jpg"/>
  </div>
  <div class="image-wrapper">
    <img src="./assets/images/2-thumbnail.jpg" alt="Random Image" data-absolutebox-full="./assets/images/2.jpg"/>
  </div>
  <div class="image-wrapper">
    <img src="./assets/images/3-thumbnail.jpg" alt="Random Image" data-absolutebox-full="./assets/images/3.jpg"/>
  </div>
  <div class="image-wrapper">
    <img src="./assets/images/4-thumbnail.jpg" alt="Random Image" data-absolutebox-full="./assets/images/4.jpg"/>
  </div>
  <div class="image-wrapper">
    <img src="./assets/images/5-thumbnail.jpg" alt="Random Image" data-absolutebox-full="./assets/images/5.jpg"/>
  </div>
  <div class="image-wrapper">
    <img src="./assets/images/6-thumbnail.jpg" alt="Random Image" data-absolutebox-full="./assets/images/6.jpg"/>
  </div>
  <div class="image-wrapper">
    <img src="./assets/images/7-thumbnail.jpg" alt="Random Image"  data-absolutebox-full="./assets/images/7.jpg"/>
  </div>
  <div class="image-wrapper">
    <img src="./assets/images/8-thumbnail.jpg" alt="Random Image" data-absolutebox-full="./assets/images/8.jpg"/>
  </div>
</div>

If you would like to add some description to each pictures (or some), the only currently supported way to add captions is with this layout:

<div class="gallery masonry">
  <figure>
    <img src="./assets/images/1-thumbnail.jpg" alt="Random Image" data-absolutebox-full="./assets/images/1.jpg"/>
    <figcaption>The fist picture. A classic: a sunset. So I have to test moderatly long caption. Do you a favor. Don't read this text. It's just some dumb text. If the text is too long I must add an expand icon.</figcaption>
  </figure>
  <figure>
    <img src="./assets/images/2-thumbnail.jpg" alt="Random Image"/>
  </figure>
  <figure>
    <img src="./assets/images/3-thumbnail.jpg" alt="Random Image" data-absolutebox-full="./assets/images/3.jpg"/>
    <figcaption>Let's have an awesome adventure!</figcaption>
  </figure>
  <figure>
    <img src="./assets/images/4-thumbnail.jpg" alt="Random Image"/>
    <figcaption>Owly the owl.</figcaption>
  </figure>
  <figure>
    <img src="./assets/images/5-thumbnail.jpg" alt="Random Image" data-absolutebox-full="./assets/images/5.jpg"/>
    <figcaption>Cute lambs.</figcaption>
  </figure>
  <figure>
    <img src="./assets/images/6-thumbnail.jpg" alt="Random Image"/>
    <figcaption>I love forests</figcaption>
  </figure>
  <figure>
    <img src="./assets/images/7-thumbnail.jpg" alt="Random Image" data-absolutebox-full="./assets/images/7.jpg"/>
    <figcaption>Ut vitae turpis et eros ultricies vehicula a at diam. Aliquam erat volutpat. Vestibulum scelerisque mattis diam, id fringilla urna porttitor non. Nam porttitor elit imperdiet eleifend pharetra. Integer tempor purus id orci luctus porta. Ut feugiat nisi ac dolor aliquet scelerisque. Pellentesque condimentum lectus massa, id cursus turpis rhoncus nec. Curabitur accumsan molestie lorem at viverra. Vivamus ac libero eu neque hendrerit convallis ut accumsan ligula. Nunc est ligula, tincidunt ac nulla nec, tempor dictum elit. Aenean et ante diam. In pellentesque, diam id porttitor luctus, ex magna ullamcorper nisl, id ullamcorper diam justo sit amet leo. Nulla nec lectus posuere, varius turpis at, iaculis lacus. Donec ultrices magna maximus est volutpat cursus. Ut molestie in tellus id volutpat.</figcaption>
  </figure>
  <figure>
    <img src="./assets/images/8-thumbnail.jpg" alt="Random Image"/>
    <figcaption>The last picture. What kind of bee is it? Is it a bee at all?</figcaption>
  </figure>
</div><!--.gallery.masonry-->

Wrap each picture into a figure in which you should put the img and a figcaption. Put your description into the figcaption element as in the previous example.

There is no compulsory stylesheet to install in your webpage. The plugin will handle it by itself. However this is how I managed to make masonry and the simple gallery look how they do:

img {
  max-width: 100%;
  margin: 0;
  padding: 0;
  line-height: 0;
}

.gallery {
  width: auto;
  margin: 0 auto;
  overflow: auto;
  zoom: 1;
  clear: both;
}

.gallery.simple {
  text-align: center;
}

.gallery figure,
.gallery > .item-selector,
.gallery.simple img {
  width: 270px;
  margin: 16px;
  padding: 0px;
}

.image-wrapper,
.gallery figure {
  float: left;
}

.gallery figure figcaption {
  padding: 0.5em;
}

.gallery.simple img {
  display: inline;
  vertical-align: middle;
}

.gallery img {
  cursor: pointer;
}

@media (max-width: 359px) {
  .gallery {
    width: auto !important;
    overflow: hidden !important;
  }

  .gallery figure,
  .gallery > .item-selector,
  .gallery.simple img {
    width: auto !important;
    margin: 16px 0 !important;
  }
}

At the bottom of the web page, just before the </body> tag, include the jQuery library. Eventually include absolute-box.

<script src="./path/to/jquery.min.js"></script>
<script src="./path/to/imagesloaded.pkgd.min.js"></script>
<script src="./path/to/masonry.pkgd.min.js"></script>
<script src="./path/to/absolute-box/dist/jquery.absolute-box.min.js"></script>

Imagesloaded and Masonry are not compulsory, but if you want to use them, add them before the absolute box plugin package.

Call the absolute-box plugin function and fill it with the options you need. No options are required.

You can easily change the icons by providing yours in the options. In the example below I use the material icons:

( function( $ ) {
  $( ".gallery" ).absoluteBox( {
    icons: {
      quitter: "<i class='material-icons'>&#xE5CD;</i>",
      prev: "<i class='material-icons'>&#xE5CB;</i>",
      next: "<i class='material-icons'>&#xE5CC;</i>"
    }
  } );
} )( jQuery );

Options

  • attr: (str) "abolutebox" - this is the name of the data attribute the plugin will give to some elements that the plugin will create itself. Change this according to your needs.
  • endless: (bool) false - Set to true if you want to always show the navigation icons.
  • caption: an object containing more options about captions.
    • enabled: (bool) true. Set to false if you don't want any caption to be displayed.
    • selector: str "figcaption". Change this if you don't use the figcaption html element. (not tested).
    • init: (str) "compressed". Set to "expanded" if you want to init the lightbox with the description expanded.
    • toggler: (bool) true. Set to false if you want to hide the arrow in the caption.
  • icons: an object that contains more options about icons. Change these according to what you most wish.
    • quitter: (str) "x" - The html element that destroys the lightbox.
    • prev: (str) "<" - The html element that shows the previous image on the line.
    • next: (str) ">" - The html element that shows the next image on the line.
  • style: an object containing more options about style. Beware changing these options.
    • lightbox: an object containing all lightbox's css properties.
    • figure: an object containing all figure's css properties.
    • img: an object containing all image's css properties.
    • icons: an object cotainig more options about the icon's style.
      • common: an object containing common icon's css properties.
      • quitter: an object containing the quitter's css properties.
      • prev: an object containing the prev's css properties.
      • next: an object containing the next's css properties.
      • captionToggler: an object containing the caption-toggler's css properties.

Release History

Check out all releases in the Release History documentation page.

License

Copyright (c) 2015 - 2016 dcdeiv, Davide Di Criscito.

Dual licensed under the MIT and GPL-2.0 licenses.

0.11.0

7 years ago

0.10.0

7 years ago

0.9.0

7 years ago

0.8.0

7 years ago

0.7.2

7 years ago

0.7.1

7 years ago

0.7.0

7 years ago

0.6.0

7 years ago

5.0.2

7 years ago