jQuery PhotoRoller Plugin

A mouseover cycle-through photo gallery (iPhoto-like).

Description

jQuery PhotoRoller Plugin puts a set of images one behind another and turns that deck of images into a beautiful slideshow. All you need to do is move the mouse cursor horizontally throughout the deck and all images will show sequentially depending on the x-position of the cursor in the container area. Just like the iPhoto thumbnails preview.

Demo

photoroller.mev.bg

Getting Started

You can [download the plugin as an archive][zip].

[zip]: https://github.com/mevbg/photoroller/zipball/prod

Or you can grab it by using npm:

``javascript
npm install photoroller
`

Or you can grab it by using Bower:

`javascript
bower install photoroller
`

Installation

Include the script after the jQuery library (unless you package scripts otherwise):

`html

`

Also include the stylesheet for the plugin:

`html

`

Usage

To start using you need two basic things:

$3

You can have any markup structure inside of a container which PhotoRoller will be attached to, as long as there are child nodes inside.

So you can have this:

`html



`

or this:

`html



`

The ID is not necessary to be "photoroller" or even to be there. You can select the container by using class name or any other way you like. You'll find out more in the very next lines.

$3

There are two ways of initializing PhotoRoller:

1. The first one is by calling it like a method, attached to an object. So, we can use the plugin for the above markup this way:

`javascript
$("#any-id").photoroller(); // returns the target object
`

You can also provide some options. For example, if you want to specify which image to be the first one to show, you can do it by providing its number like this:

`javascript
$("#any-id").photoroller({
startpoint: 3
});
`

You can read more about what settings can be provided in the "Options" paragraph.

---

2. The second way of calling PhotoRoller is as follows:

`javascript
$.photoroller(); // returns the target object
`

By calling it so, the plugin will look for only one container with an ID "photoroller". If no such, nothing will happen.

Of course, you can also provide a target object by doing so:

`javascript
$.photoroller({
target: $('selector')
});
`

Options

$3

`javascript
nodes: $('selector')
`

Defines what child nodes to be used. If not provided, the plugin will use all childs.

$3

`javascript
startpoint: 3 // default: 1
`

Defines which image to be the first one to show.

$3

`javascript
jump_back: true // default: false
`

Defines whether the image should jump back to the startpoint when the mouse leaves the image.

$3

`javascript
jumppoint_click: false // default: true
``

If jump\_back is active, this option defines whether the image to should jump back to can be set by clicking on the image.

Browsers compatibility

- Apple Safari
- Google Chrome
- Microsoft Internet Explorer 9+
- Mozilla Firefox
- Opera

Dependencies

- [jQuery][jq]

[jq]: https://github.com/jquery/jquery.git

License

Copyright © 2017 Martin Metodiev. Licensed under the MIT license. [See here for more details.][licence]

[licence]: https://raw.github.com/mevbg/photoroller/prod/LICENSE-MIT