Using Delaunay Triangulation to create an image gallery

About

It is named for the Russian mathematician Boris Nikolaevich Delaunay.

The Delaunay triangulation of a point set is a collection of edges satisfying an "empty circle" property: for each edge we can find a circle containing the edge's endpoints but not containing any other points.

You can read more about Delaunay Triangulation in Wikipedia

Demo:

Default Usage


Vanilla:


DelaunayGallery('#demo-gallery');


jQuery/Zepto.js:


$('#demo-gallery').DelaunayGallery();


Example HTML


<div id="demo-gallery">
    <img src="1.jpg" alt="" />
    <img src="2.jpg" alt="" />
    <img src="3.jpg" alt="" />
</div>

Default Settings:


{
    number:10, //number of particles
    autoRotate:true, // automatically loops through images
    autoRotateInterval:3, //rotation interval in seconds
    speed:1,   //Particles speed in seconds
    nextPrev:true, //Show next/previous buttons
    navigation:true //Show circle navigation
}

AngularJS Integration:

* Note that you have to use the angular.bootstrap function if you are willing to use it with another modules.


angular.module('delaunaygallery', []).directive('dlng', function() {
    return {
        restrict: 'EA',
        link: function(scope, element, attrs) {
           var options = {};
           for(var x in DelaunayGallery.prototype.options){
               if(!!attrs[x]){
                   var item = attrs[x];
                   if(item=='true' || item == 'false'){
                       item = (item == 'true');
                   }
                   options[x] = item;
               }
           }
           element.DelaunayGallery = scope.DelaunayGallery = DelaunayGallery(element[0], options);
        }
    };
});


<div ng-app='delaunaygallery' dlng speed="1" autoRotate="true">
    <img src="2.jpg" alt="" />
    <img src="3.jpg" alt="" />
</div>

Dependency:

delaunay.js by ironwallaby


Download:

DOWNLOAD