Easy implementation

Html

First load dependent files

<link href="assets/css/imageviewer.css" type="text/css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="assets/javascript/imageviewer.js"></script>

Then add the links to your images, no need to add classes. File extensions should be jpg, jpeg, gif or png.

<a href="assets/images/01.jpg">Image 1</a>
<a href="assets/images/02.jpg">Image 2</a>
<a href="assets/images/03.jpg">Image 3</a>
<a href="assets/images/04.jpg">Image 4</a>
<a href="assets/images/05.jpg">Image 5</a>

Javascript

<script>
$(document).ready( function(){
    $('a[href$=".jpg"], a[href$=".jpeg"], a[href$=".gif"], a[href$=".png"]').imageviewer();
});
</script>

Documentation

Well..

Preferences

var imageviewersettings = {
    loop : true,
    keys : true,
    touch : true, // work in progress
    controls : true,
    paging : true,
    caption : true,
    animation: true,
    animspeed: 600,
    preload : true, // work in progress
    grouped : true, // work in progress
    adspots: : {},
};

• Loop: (true or false)
• Keys: use keyboard arrows to navigate and ESC to close (true or false)
• Touch: Support touch devices (true or false)
• Controls: Display previous/next controls (true or false)
• Paging: Show pagination (true or false)
• Caption: Show caption, title attribute from link
• Animation: Transitions between images animated (true or false)
• Animspeed: Time of transition in milliseconds (default 600)
• Preload: Preload next image for faster display (true of false)
• Grouped: Only browse through the clicked group of images (true or false)
• Adspots: Object of supported ad widths of 300, 428, 728, 120 and 160px.