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 |
