Official: https://blueimp.github.io/jQuery-File-Upload/
Document: https://github.com/blueimp/jQuery-File-Upload/wiki/Basic-plugin
HTML:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
<!-- File Upload --> <!-- The Iframe Transport is required for browsers without support for XHR file uploads --> <script src="<?=BASEURL?>assets/plugins/jquery-file-upload/js/vendor/jquery.ui.widget.js"></script> <script src="<?=BASEURL?>assets/plugins/jquery-file-upload/js/jquery.iframe-transport.js"></script> <!-- The basic File Upload plugin --> <script src="<?=BASEURL?>assets/plugins/jquery-file-upload/js/jquery.fileupload.js"></script> <!-- The File Upload processing plugin --> <script src="<?=BASEURL?>assets/plugins/jquery-file-upload/js/jquery.fileupload-process.js"></script> <div class="gallery_wrap"> <div class="slide_wrap"> <ul class="gallery list-left"> <li><a href="#"><img src="http://placehold.it/100x100" /></a></li> <li><a href="#"><img src="http://placehold.it/100x100" /></a></li> <li><a href="#"><img src="http://placehold.it/100x100" /></a></li> <li><a href="#"><img src="http://placehold.it/100x100" /></a></li> <li><a href="#"><img src="http://placehold.it/100x100" /></a></li> </ul> <!-- The fileinput-button span is used to style the file input field as button --> <span class="btn fileinput-button add_photo"> <i class="glyphicon glyphicon-plus"></i> <!-- The file input field used as target for the file upload widget --> <input id="fileupload" type="file" name="files[]" multiple> </span> <div class="clearfix"></div> </div> <a href="#" id="post_nav_left" class="carousel_nav left"><span class="glyphicon glyphicon-chevron-left"></span></a> <a href="#" id="post_nav_right" class="carousel_nav right"><span class="glyphicon glyphicon-chevron-right"></span></a> <!-- The global progress bar --> <div id="progress" class="progress"> <div class="progress-bar progress-bar-success"></div> </div> </div> |
CSS:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
.gallery_wrap{ position: relative; } .gallery { list-style: none; margin: 0px; padding: 0px; overflow: hidden; } .gallery li { margin-right: 10px; } .gallery li a{ display: block; width: 100px; height: 100px; } .gallery li a img{ width: 100%; height: 100%; } .gallery li a img{ width: 100%; height: 100%; } .carousel_nav{ top: 40px; position: absolute; } .carousel_nav.left{ left: 0; } .carousel_nav.right{ left: 305px; } |
Javascript:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
var $carousel = $('.gallery'); $carousel.trigger('destroy'); $carousel.carouFredSel({ direction: 'left', circular: false, infinite: false, auto : false, prev : { button : "#post_nav_left", key : "left" }, next : { button : "#post_nav_right", key : "right" }, items:{ visible: 3 } }); |
Notes: