angularmouselapse

AngularJS module that enables the user to cycle through a sequence of images simply by moving the mouse horizontally within the browser.

Added by: Sam Deering

GitHub

Repository

lukemcfarlane/angularmouselapse

Stats

Stars: 0

Watchers: 0

Forks: 0

Module Description

Angular Mouse Lapse

AngularJS module that enables the user to cycle through a sequence of images simply by moving the mouse horizontally within the browser window.

The directive

The element directive 'mouse-lapse' takes a single parameter 'images' which can be either an array of image URL's, or array of objects that contain a 'url' property (at minimum) and a 'label' property (optional).

Usage

Controller

var myCtrl = angular.controller('myCtrl', function($scope) {
    $scope.imageURLArr = [
        'images/img1.jpg',
        'images/img2.jpg',
        'images/img3.jpg',
        'images/img4.jpg',
    ];

    $scope.imageObjArr = [
        {
            url: 'images/img1.jpg',
            label: 'Image 1'
        },
        {
            url: 'images/img2.jpg',
            label: 'Image 2'
        },
        {
            url: 'images/img3.jpg',
            label: 'Image 3'
        },
        {
            url: 'images/img3.jpg',
            label: 'Image 3'
        }
    ];
});

Page

<h1>Images from array of URL's</h1>
<mouse-lapse images="imageURLArr"></mouse-lapse>

<h1>Images with labels</h1>
<mouse-lapse images="imageObjArr"></mouse-lapse>

Module stats last updated: 2015-04-19 01:55:41

Disclaimer: Some data on this page may have been gathered from the authors GitHub respository. If you see any mistakes or outdated information please let us know. Thanks!