Portfoliojs

Portfoliojs is a lightweight jQuery gallery plugin for your beautiful images with horizontal scrolling which supports desktop, tablet and mobile browsers. Checkout the demo above. Fork it at github - abhiomkar/portfoliojs.

• smart pre-loading
• set custom height & width of gallery
• 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="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<!-- portfoliojs (unified with all dependencies) -->
<script "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({
        loop: true, // loop on/off
        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
        logger: false // for debugging purpose, turns on/off console.log() statements in the script
    }); 

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

• jQuery easing
• jQuery touch Swipe
• jQuery imageLoaded
• jQuery scrollTo
• JS Spin

MIT License

• Abhinay Omkar
• Twitter: @abhiomkar
• Email: abhiomkar@gmail.com
• Website: abhiomkar.in
• Photos by Abhiomkar's Photography

Report Issues/Bugs/Feature Requests here: https://github.com/abhiomkar/portfoliojs/issues