jQuery图片集展示插件：Portfoliojs

jopen 10年前

Portfoliojs是一个轻量级的jQuery图片集展示插件。支持水平滚动，支持桌面，平板和手机浏览器

</div>

特性

  • 智能预加载
  • 设置展示框的高度和宽度
  • set custom easingMethods for slide animation
  • multiple gallery support
  • lightbox
  • keyboard navigation
  • renders according to the device width. including mobile devices.
  • supports touch devices (iPhone/iPad/Android) swipe-to-slide
</div>

用法

  1. Download the latest version of Portfoliojs
  2. Include latest version of jQuery & Portfoliojs in your page 

    3. <!-- jQuery -->  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>  <!-- portfoliojs (unified with all dependencies) -->  <script src="js/portfolio.pack.min.js"></script>
  3. Add your images in gallery container and add an id to your gallery 

    4. <div id="gallery">          <img data-src="https://dl.dropbox.com/u/1218282/slideshow/1.jpg" />          <img data-src="https://dl.dropbox.com/u/1218282/slideshow/2.jpg" />          <img data-src="https://dl.dropbox.com/u/1218282/slideshow/3.jpg" />          <img data-src="https://dl.dropbox.com/u/1218282/slideshow/4.jpg" />          <img data-src="https://dl.dropbox.com/u/1218282/slideshow/5.jpg" />          <img data-src="https://dl.dropbox.com/u/1218282/slideshow/6.jpg" />          <img data-src="https://dl.dropbox.com/u/1218282/slideshow/7.jpg" />          <img data-src="https://dl.dropbox.com/u/1218282/slideshow/8.jpg" />  </div>
  4. Call Portfoliojs with your gallery id 

    5. <script>      $(document).ready(function() {              var p = $("#gallery").portfolio();              p.init();      });  </script>

  5. That's it!
</div>

选项

Portfoliojs Options 

p = $('#gallery').portfolio({          enableKeyboardNavigation: true, // enable / disable keyboard navigation (default: true)          loop: false, // loop on / off (default: false)          easingMethod: 'easeOutQuint', // other easing methods please refer: http://gsgd.co.uk/sandbox/jquery/easing/          height: '500px', // gallery height          width: '100%', // gallery width in pixels or in percentage          lightbox: false, // dim off other images, highlights only currently viewing image          showArrows: true, // show next / prev buttons          logger: false, // for debugging purpose, turns on/off console.log() statements in the script          spinnerColor: '#000', // Ajax loader color          offsetLeft: -4, // position left value for current image          opacityLightbox: '0.2' // opacity of other images which are not active        });

</div>

下载

</div>

项目主页：http://www.open-open.com/lib/view/home/1429751329057

相关经验