ahundredyears-thumblist-nav

AngularJS module that adds a thumblist directive which adds a horizontal scrollbar using jScrollPane.js.

Added by: Sam Deering

GitHub

Repository

bullrico/ahundredyears-thumblist-nav

Stats

Stars: 0

Watchers: 0

Forks: 1

Module Description

ahundredyears-thumblist-nav

AngularJS module that adds a thumblist directive which adds a horizontal scrollbar using jScrollPane.js.

Dependencies

  • AngularJS

  • jScrollPane (https://github.com/vitch/jScrollPane)

Usage

HTML

  <thumblist-nav>
    <div>
      <img src="http://placehold.it/350x100&text=thumb+01">
      <h4>Lorem ipsum</h4>
    </div>
    <div>
      <img src="http://placehold.it/350x100&text=thumb+02">
      <h4>Lorem ipsum</h4>
    </div>
    <div>
      <img src="http://placehold.it/350x100&text=thumb+03">
      <h4>Lorem ipsum</h4>
    </div>
    <div>
      <img src="http://placehold.it/350x100&text=thumb+04">
      <h4>Lorem ipsum</h4>
    </div>
    <div>
      <img src="http://placehold.it/350x100&text=thumb+05">
      <h4>Lorem ipsum</h4>
    </div>
    <div>
      <img src="http://placehold.it/350x100&text=thumb+06">
      <h4>Lorem ipsum</h4>
    </div>
    <div>
      <img src="http://placehold.it/350x100&text=thumb+07">
      <h4>Lorem ipsum</h4>
    </div>
  </thumblist-nav>

CSS

  .thumblist-nav {
    height: 200px;
  }

  .horizontal-only {
    max-height: 200px;
  }

  .jspPane > div {
    border: 1px solid #ddd;
    width: 350px;
  }

  .jspDrag {
    background: blue;
  }

  .jspDrag:hover {
    background: green;
  }

Module stats last updated: 2015-04-19 12:34:01

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!