node package manager
Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

jquery.photocols

jquery.photocols.js

Made by 2Coders Studio in Canary Islands

How to Use It

Download the minified file of this plugin.

You have to include this line into your page header:

    <script type="text/javascript" src="jquery.photocols.min.js"></script> 

Or use the CDN version at www.cdnjs.com:

    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery.photocols/1.0.2/jquery.photocols.min.js"></script> 

Then create a div to contain the photocols navigation

    <div id="photocols"></div>

Bind the plugin to the tag:

<script type="text/javascript">
 
jQuery( document ).ready(function( $ ) {
  $('#photocols').photocols( {
      data : [
        { 'title' : 'Title 1' , 'subtitle' : 'Subtitle 1' , 'url' : 'http://www.2coders.com' , 'img' :  'http://lorempixel.com/640/480/people/1' },
        { 'title' : 'Title 2' , 'subtitle' : 'Subtitle 2' , 'url' : 'http://www.2coders.com' , 'img' :  'http://lorempixel.com/640/480/people/2' },
      ]
    });
});
 
</script> 

Parameters

You can customize the aspect of the plugin using this options:

Options Type Default
bgcolor CSS Color '#000',
width Integer 'auto',
colswidth Integer 200,
itemheight Integer 300,
height Integer 600,
gap Integer 5,
opacity Float (0..1) 0.3
titleSize Pixels 16
subtitleSize Pixels 14
overlayColor CSS Color '#000'
stopOnHover Boolean true