Hint: Use Arrow Keys (or Swipe) to Navigate

Introduction

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.


Features

  • 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

Usage

  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>
  4. Add your images in gallery container and add an id to your gallery

  5. <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>
  6. Call Portfoliojs with your gallery id

  7. <script>
        $(document).ready(function() {
                var p = $("#gallery").portfolio();
                p.init();
        });
    </script>
  8. That's it!

Options

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


Dependencies


License


Author


Feedback

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


Portfoliojs - Awesome jQuery plugin © Abhinay Omkar, 2012.