jQuery圖片集展示插件：Portfoliojs

Portfoliojs是一個輕量級的jQuery圖片集展示插件。支持水平滾動，支持桌面，平板和手機瀏覽器

• 智能預加載
• 設置展示框的高度和寬度
• 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

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



<!-- jQuery -->
<script src="http://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



<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



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



5. That's it!

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

    }); 

• Download - Portfoliojs (Zipped)
• Browse through the source code at github - abhiomkar/portfoliojs