Image Picker Example

HTML

<script src="http://rvera.github.io/image-picker/image-picker/image-picker.min.js"></script>
<script src="http://desandro.github.io/imagesloaded/imagesloaded.pkgd.min.js"></script>
<script src="http://masonry.desandro.com/masonry.pkgd.min.js"></script>
<link rel="stylesheet" href="http://rvera.github.io/image-picker/image-picker/image-picker.css">
<select id="selectImage" class="image-picker">
    <option value=""></option>
    <option data-img-src='http://png.findicons.com/files/icons/2689/kitchen/128/4.png' value='4.jpg'>4.jpg</option>
    <option data-img-src='http://png.findicons.com/files/icons/2142/webset/48/google.png' value='google.jpg'>google.jpg</option>
    <option data-img-src='http://im1.book.com.tw/image/getImage?i=http://www.books.com.tw/img/001/058/06/0010580607.jpg&w=348&h=348' value='5.jpg'>5.jpg</option>
    <option data-img-src='http://im1.book.com.tw/image/getImage?i=http://www.books.com.tw/img/001/061/38/0010613865.jpg&w=348&h=348' value='6.jpg'>6.jpg</option>
    <option data-img-src='http://media-cache-ec0.pinimg.com/originals/3c/3d/47/3c3d4740527f0c341dbf336b7b763479.jpg' value='aom.jpg'>aom.jpg</option>
    <option data-img-src='http://media-cache-ak0.pinimg.com/736x/ea/84/02/ea8402384ac6dc1cd77dd89793902eb2.jpg' value='aom2.jpg'>aom2.jpg</option>
    <option data-img-src='http://media-cache-ak0.pinimg.com/736x/9e/ff/56/9eff5665d5706d2f31a599f21e4791e6.jpg' value='aom3.jpg'>aom3.jpg</option>
</select>

CSS

.image_picker_image {
    max-width: 140px;
    max-height: 100px;
    background-color: #FF0000;
}

JavaScript

$(document).ready(function () {
    $("#selectImage").imagepicker({
        hide_select: true
    });

    
});