A simplified jQuery based library that previews individual images or image galleries with awesome easy to use features like, keyboard navigations, pagination, autoplay, fullscreen preview among many other minimalism oriented features, intended to keep your application simple but still classic in appeal.
Check out the DEMO by downloading the plugin. A demo is packed with the download. Make sure to read the NOTE file inside the demo folder.
You can use the Bower asset manager to install this library.
First, if you don't have Bower, install it using NPM which comes with the Node.js installer. Check out the Node.js site for more information on how to install it. Having installed Node, open your bash terminal and run:
npm install --global bower-cli
cdinto the root directory of your project and install bower locally in your project directory like so:
npm install --save bower
NB: Note, before you proceed, you can run
bower -vto verify the install of bower. If you see a semantic version like
1.7.9, you have bower already installed, else check the Bower site for instructions on how to install it.
- With Bower installed,
cdinto the root directory of your project AND run this command.
bower install --save images-previewer
Alternatively, you can
git clone https://github.com/ofelix03/previewerto clone the GitHub repository for this plugin into your current project and use the files in the
srcfolder -- using the former for production and the latter for development.
previewer.min.js) into your html file like
index.html. NB: Make sure to load the
<\body>of your document.
Create your html markup making sure all images that need to be previewable by the library have the class name
g-image. Example is like so:
<div class="gallery-wrapper"> <img src="..." alt="..." class="g-image"> <img src="..." alt="..." class="g-image"> <img src="..." alt="..." class="g-image"> ... </div>
NB: Make sure to surround your images with a parent block element like a
<div>, with an ID or CLASSNAME which can be use during the plugin's initialization which is discused later.
In my example above I used a class name
gallery-wrapper on my surrounding block container. This container gives me a gallery, and so I can have many of galleries with their own set of images. Also make sure all your images have a class name
g-image attached to them.
- Now that you have built your gallery markup (your previewable images) , you can now initialize it like so:
|fullScreen||boolean (default: false)||Centers image with some padding by default or images are previewer in full window's screen on value true|
|pagination||boolean (def: true)||Adds a simple pagination to the previewer|
|paginationType||string [number, bullet] (default: number)||Select one of two pagination types ( bullet or number )|
|paginationPosition||string [topLeft, topRight, bottomLeft, bottomRight] (default: 'topRight')||Determines the position of the paginator in the previewer|
|navigation||boolean [true, false]||Adds a simple 'PREV' and 'NEXT' navigators to slide through images|
|navNextText||string||Customize the label of the previewer's NEXT navigator. You can use any font icon library, like FontAwesome's right arrow icon like so:
|navPrevText||string||Customize the label of the previewer's PREV navigator. You can use any font icon library, like FontAwesome's left arrow icon like so:
|keyboardNavigation||bool [true, false]||Allows the use of the keyboards, left and right arrow keys to control the navigation through image gallery|
|autoPlay||boolean [true, false]||Autoplays the images in the previewer|
|slideTimeout||integer (default: 1000)||Determines how long each image in the gallery should be previewed. Value of slideTimeout should be in *milliseconds. Example: 2000 for 2s slide timeout|
|previewEffect||string (defaut: 'linear')||This plugin has a number of CSS based transitions, which determines the effect with which the previewer shows up when an image is clicked. All the supported transitions will be found as you go through the reamining docs|
The following are currently the supported preview effects. These effects are all CSS3 transition.
You can help improve this docs by sending me a pull request and hopefully I will merge it in. Also, you spotted an error (syntax or logic error) ? I will be glad to recieve a pull request of a fix of that error. But I would love it if you first open an issue and hopefully if it's not already in the pipes of resolution by me or someone else, I will gladly assign it to you.