details.js is a versatile script, ideal to display a collection of items and additional content. details.js can be creatively applied to e-commerce projects, portfolio websites, visual documentations, comparison charts and other.
Built to leverage Handlebars templates and JSON datasets.
Improved animations and scrolling performance with Velocity.
Responsive aware
Coded with care and love.
Multiple panels on top
Single panel between rows
Single panel replacing grid
Install using bower, or download project archive.
$ bower install --save details.js
# dependencies
$ bower install --save handlebars
$ bower install --save velocity
$ bower install --save imagesloaded # use imagesloaded.pkgd.min.js
$(function() {
var collection = $('.selector').details(
// extend default settings
);
});
{
dataset: {}, // JSON dataset to be compiled by Handlebars
fadein: true, // fade in on imagesloaded callback
fadeinSpeed: 800, // fade in speed in milliseconds
panel: {
classes: "", // additional CSS classes to be added to panel element
position: "top", // "top", "between rows" or "over grid"
stacked: true, // allow stacking of multiple panels (boolean)
speed: 400, // animation speed (int)
delay: 100, // open panel delay (int)
easing: {
open: "ease-out", // animation easing "ease-in", "ease-out" or "linear"
close: "ease-out" // animation easing "ease-in", "ease-out" or "linear"
},
},
scroll: {
offset: 0, // scroll top offset (int)
speed: 600, // scroll speed in milliseconds (int)
easing: "ease-out" // scroll easing "ease-in", "ease-out" or "linear"
},
onInit: $.noop, // function() { do something };
onOpen: $.noop, // …
onClose: $.noop, // …
onComplete: $.noop, // …
onStart: $.noop, // …
onEnd: $.noop // …
}
Add any of these data attributes to elements in your template. (Optional)
data-role="close" <!-- close panel -->
data-role="previous" <!-- previous -->
data-role="=next" <!-- next -->
<!-- example -->
<a href="#" data-role="close">Close</a>
onInit: function() {} // called after grid template has been compiled
onOpen: function() {} // called before transition starts
onClose: function() {} // called before transition starts
onComplete: function(event) {} // called after transition ends
// event: "open", "close"
onStart: function() {} // called on first item view
onEnd: function() {} // called on last item view
.close(element, callback); // @param: dom panel element, or undefined
// @param: callback fn
.open(element); // open panel, @param: dom grid element
// example using .close() method
var collection = $('.selector').details();
$('.selector').on('click', function(event) {
event.preventDefault();
collection.close(undefined, function() {});
});
// example using .open() method
var collection = $('.selector').details();
$(window).on('load', function() {
var element = $("figure:nth-child(2)");
collection.open(element);
});
Handlebars provides the power necessary to build semantic templates effectively with no frustration.
If you are not familiar with Handlebars, complete details can be found here.
Class item
is the only required class name below.
<script data-role="grid" type="text/x-handlebars-template">
{{#each items}}
<figure class="item"> <!-- figure or div tag -->
<!-- be creative -->
</figure>
{{/each}}
</script>
<script data-role="panel" type="text/x-handlebars-template">
<!-- be creative -->
</script>
The panel template uses the same dataset “context” as grid template.
They are “connected” based on index position.
{
"items": [
// The data structure is entirely up to you.
{ "key": "value", … },
{ "key": "value", … }
…
]
}
/* required (don’t forget to add browser prefix) */
.selector { display: flex; flex-flow: row wrap; }
.selector .panel { width: 100%; position: relative; overflow: hidden; }
/* optional */
.selector .item { }
.selector .on { }
.selector .disabled { }
- Chrome
- Firefox
- Safari view issues
- IE 10+
This software is free to use under the MIT license.