webismymind / wimmviewer

A simple, lightweight jquery images viewer

Live Example

https://www.nyl.graphics/wimm/wimmviewer/examples/

Dependencies

To run this plugin, you need

• Jquery 1.1.x or 1.2.x (required)
• Font Awesome 4.x (optional)

Installation

By Downloading files:

<script src="https://code.jquery.com/jquery-1.12.3.min.js" integrity="sha256-aaODHAgvwQW1bFOGXMeX+pC4PZIPsvn2h1sArYOhgXQ="   crossorigin="anonymous"></script>
<script src="js/wimmviewer/dist/js/wimmViewer.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/wimmviewer/dist/css/wimmViewer.css" />

With bower:

bower install jquery.wimmviewer

Usage

Html structure example

<div id="slider1">
    <div class="carousel">
        <ul class="carousel_inner">
            <li class="item" style="background-image: url(https://farm9.staticflickr.com/8086/8500579154_5350408dc9_m_d.jpg);" data-url="https://farm9.staticflickr.com/8086/8500579154_b9634b810c_k_d.jpg">
            </li>
            <li class="item" style="background-image: url(https://farm6.staticflickr.com/5562/15228957152_aa3fbc582b_m_d.jpg);" data-url="https://farm6.staticflickr.com/5562/15228957152_2653d0d0e7_h_d.jpg">
            </li>
            <li class="item" style="background-image: url(https://farm7.staticflickr.com/6099/6227481066_6d55b051f6_m_d.jpg);" data-url="https://farm7.staticflickr.com/6099/6227481066_145e9fb878_o_d.jpg">
            </li>
            <li class="item" style="background-image: url(https://farm8.staticflickr.com/7276/7442226604_dabd1dcbb5_m_d.jpg);" data-url="https://farm8.staticflickr.com/7276/7442226604_f5acd3b4e2_o_d.jpg">
            </li>
            <li class="item" style="background-image: url(https://farm9.staticflickr.com/8197/8248259072_73a4f5017c_m_d.jpg);" data-url="https://farm9.staticflickr.com/8197/8248259072_caf4fa5583_k_d.jpg">
            </li>
            <li class="item" style="background-image: url(https://farm7.staticflickr.com/6123/5951683083_a1d0bc12cd_m_d.jpg);" data-url="https://farm7.staticflickr.com/6123/5951683083_a1d0bc12cd_b_d.jpg">
            </li>
        </ul>
    </div>
</div>

Javascript

 $(function(){
        $('#slider1').WimmViewer({
            miniatureWidth : 100,
            miniatureHeight: 100
            // Availables customizations:
            /*
             miniatureSpace: 10,
             nextText:'Next',
             prevText:'Prev',
             viewerMaxHeight: 300,
             onImgChange : function() { console.log('changed'); },
             onNext : function() { console.log('next'); },
             onPrev : function() { console.log('previous'); },
             */
        });
    })