You just purchased Colio - jQuery Portfolio Content Expander Plugin! If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here
Thank you. flGravity
Colio plugin was designed to display details about your portfolio items in expandable viewport that can be positioned above, below or inside portfolio grid. This makes Colio a great choice for one page sites! But it can be used with multipage sites as well. Using AJAX feature Colio can load content from any URL and then extract only specific portion of a page to display in viewport.
Along with other features Colio includes black and white theme. It can be easily integrated with any existing portfolio and is compatible with isotope and quicksand filtering plugins. Finally it's responsive and mobile optimized!
Colio plugin works on container with a list of similar child items, like UL list
So first of all you need to add "colio-link" class to all links inside your portfolio item, that normally would open the page with details about your work or project. Basically any element that has "colio-link" class when clicked will open Colio viewport for the containing item (you can change selector for links using "expandLink" plugin option).
The next step is to add "data-content" attribute to every portfolio item with the content that Colio plugin has to display. The "data-content" attribute can accept 3 types of content: inline html, URL and finally "#id" of an element in document with the some content inside.
Let's take a look on every option separately. If "data-content" attribute starts with #, like in example below
then Colio will look for element with ID "content_1" and will simply extract its contents. Such elements for example can be placed before closing </body> tag and should have class "colio-content" what will make them hidden
Here is description of your portfolio item
Next, if "data-content" attribute starts with /, ./, ../ or http(s):// Colio will consider this as an URL and will try to load content with AJAX. This can be handy if you are adding Colio plugin to multipage portfolio site, like a site for Wordpress, where every portfolio item has corresponding page. In this case you can extract content for Colio directly from pages and simply strip off header, menu, footer and all other page stuff and get only description of your work/project. To accomplish this task there is "contentFilter" plugin option that accepts jQuery selector to filter/search received html.
And finally, if none of above works, value of "data-content" attribute is considered inline html and will be inserted as is.
Ok. At this moment your portfolio should be ready for Colio, so it's time to add css and js files as well as plugin init code. So first you need to copy css/colio.css and js/jquery.colio.min.js files to the corresponding folders under your site, then link these files in head of your page (jquery library and jquery-easing should be already there)
<link rel="stylesheet" href="css/colio.css" media="screen"> <script type="text/javascript" src="js/jquery.colio.min.js"></script>
next add plugin init code
<script type="text/javascript">
$(document).ready(function(){
$('#my_portfolio').colio({
id: 'colio_1'
});
});
</script>
Now plugin is installed and you can reload page to test it! Please click any portfolio item with "colio-link" and you should see that Colio viewport expands above your portfolio grid with the description for clicked item. But as you will notice it looks a bit raw. That's because by default Colio comes with only the basic styles to giving you the opportunity to style everything on your own.
But don't worry, if you have no time to play with the styles! Colio plugin includes two themes - black and white, that you can use right away! Theme files are located inside "colio-white/" and "colio-black/" folders. Every folder has readme.txt file with instructions how to install a theme and what markup you should use for content. So, what you just need to do is 1) decide what theme you want 2) copy corresponding theme folder into the root of your site 3) open readme.txt file and follow the steps to complete theme installation.
Below you will find plugin options with description what they do
// default settings
var s = $.extend({
id: 'colio', // "id" attribute to be assigned to colio viewport
theme: '', // colio theme - "black" or "white"
placement: 'before', // viewport placement - "before", "after", "inside" or "#id"
beforeLastRow: false, // if true, place viewport before last row of items ("inside" only)
expandLink: '.colio-link', // selector for elements that will expand colio viewport
expandDuration: 500, // duration of expand animation, ms
expandEasing: 'swing', // easing for expand animation
collapseDuration: 300, // duration of collapse animation, ms
collapseEasing: 'swing', // easing for collapse animation
scrollPage: true, // whether to scroll page to colio viewport
syncScroll: false, // sync page scroll with expand/collapse animation
scrollDuration: 300, // page scroll duration, ms
scrollEasing: 'swing', // page scroll easing
scrollOffset: 10, // viewport offset from top of the page, px
contentFadeIn: 500, // content fade-in duration, ms
contentFadeOut: 200, // content fade-out duration, ms
contentDelay: 200, // content fade-in delay, ms
navigation: true, // whether to show next/previous controls
closeText: 'Close', // text/html for close button
nextText: 'Next', // text/html for next button
prevText: 'Prev', // text/html for previous button
contentFilter: '', // selector to filter content that is to be loaded
hiddenItems: '.hidden', // selector to exclude hidden portfolio items
onExpand: function(){}, // viewport expand callback
onCollapse: function(){}, // viewport collapse callback
onContent: function(){} // content load callback
}, c);
Few words about callback functions. onCollapse() and onExpand() callback functions execute whenever Colio viewport collapses or expands. A "this" keyword inside callback functions refers to Colio viewport DOM element. onExpand() callback accepts single argument - id of active content.
The onContent() callback executes only once when Colio loads content for portfolio item. It accepts single argument - DOM of a content that was loaded. So if you need to initialize any jQuery plugins on loaded content use this callback like so
<script type="text/javascript">
$(document).ready(function(){
$('#my_portfolio').colio({
id: 'colio_1',
onContent: function(content) {
$(content).find('.fancybox').fancybox()
}
});
});
</script>
Finally, if you are loading content via AJAX you may want to filter it using "contentFilter" plugin option, which accepts jQuery selector. Since version 1.4 of Colio plugin it's possible to append #element selector directly to the URL in "data-content" attribute. In this case "contentFilter" expression will be automatically preceded by #element to target specific element by ID.
Colio plugin has an option called "placement". This option controls where Colio viewport will appear in relation to portfolio list that plugin is initialized with. Basically there is 4 options available - "before", "inside", "after" and #id. The "before" placement option will put Colio viewport right above portfolio list. The "inside" placement will dynamically insert viewport inside the grid. The "after" placement option will position viewport right below portfolio list. And finally if you will set "placement" option to something like "#colio_wrapper", Colio viewport will be put inside element with "colio_wrapper" id that can be anywhere in document.
Although Colio comes with two themes, its basic installation does not have any styling except necessary ones. It was made intentionally to give you opportunity to style everything on your own. Here are some classes that you can use for own styling
.colio - class is added to colio viewport
.colio-expanded - class is added to expanded viewport
.colio-placement-before|after|inside|element - classes are added to colio viewport depending on selected placement option
.colio-content - class for divs with loaded content for portfolio items
.colio-container - container for all "colio-content" divs
.colio-close - colio close button
.colio-navigation - wrapper for next/previous navigation buttons
.colio-next - colio next button
.colio-prev - colio previous button
.colio-no-next - class is added to next button on last item
.colio-no-prev - class is added to previous button on first item
.colio-theme-white|black - classes added to colio viewport to support themes
.colio-item - class is added to every portfolio item on plugin init
.colio-active-item - class is added to active portfolio item
Also as far as Colio viewport is created dynamically you can assign it some unique id. Default id that's assigned to viewport is "colio", but you can change it using "id" plugin option.
Colio plugin provides following API methods
expand(n) - method to expand Colio viewport for portfolio item on position "n" (zero-based)
collapse() - method to collapse Colio viewport
excludeHidden() - method to update item list to exclude those items that match selector provided by "hiddenItems" plugin options. This method should be called every time when you apply some filtering to portfolio items with, for example isotope plugin.
Any of these API methods can be invoke in two ways. You can use jQuery $.trigger() or $.triggerHandler() functions to send "colio" custom event with API method name to the portfolio list, like so
$('#my_portfolio').trigger("colio", "excludeHidden");
or in case of argument
$('#my_portfolio').trigger("colio", ["expand", 2]);
Or, you can receive object containing API methods with jQuery $.data() and then call API methods directly. For example
var colio_api = $('#my_portfolio').data('colio');
colio_api.collapse();
Colio plugin can work together with isotope and quicksand filtering plugins and this section is meant to provide working examples how this can be done in practice.
So, first let's assume your are using classes to filter your portfolio items and you have a set of filtering links that look like this
When you click filter link, portfolio items that have certain class (that goes after #) will be shown, while the others will be hidden.
So, here is Javascript code that binds Colio and Isotope plugins together
<script type="text/javascript">
$(document).ready(function(){
// "colio" plugin
$('#my_portfolio').colio({
id: 'demo_1',
placement: 'inside',
hiddenItems: '.isotope-hidden',
onContent: function(content){
// init plugins on loaded content
$(content).find('.fancybox').fancybox();
}
});
// "isotope" plugin
var filter = '*', isotope_run = function(f) {
$('#my_portfolio').
isotope({layoutMode : 'fitRows', filter: f}).
trigger('colio','excludeHidden');
};
$('#filters a').click(function(){
$(this).addClass('filter-active').siblings().removeClass('filter-active');
// take class name from href attr and then run isotope to filter items in portfolio
var href = $(this).attr('href').substr(1);
filter = href ? '.' + href : '*';
isotope_run(filter);
return false;
});
// run isotope with "*" filter to show all items
isotope_run(filter);
});
</script>
Please pay attention to the fact that in code above 'hiddenItems' plugin option is set to '.isotope-hidden' and whenever isotope is executed to filter items a trigger('colio','excludeHidden') is called also to make Colio plugin aware about hidden items.
Now, here is Javascript code that binds Colio with another popular filter plugin called Quicksand
<script type="text/javascript">
$(document).ready(function(){
// "colio" plugin
var run_colio = function(){
$('#demo_1').remove();
$('#my_portfolio').colio({
id: 'demo_1',
placement: 'before',
onContent: function(content){
// init plugins on loaded content
$(content).find('.fancybox').fancybox();
}
});
};
// init "colio" first time
run_colio();
/* "quicksand" plugin */
var quicksand_run = function(items){
$('#my_portfolio').quicksand(items, {
retainExisting: false, adjustWidth:false, duration: 500
}, run_colio);
};
// assign uniq ID to every portfolio item (required by quicksand)
$('#my_portfolio li').each(function(n){
$(this).attr('data-id', n);
});
// then make a copy
var copy = $('#my_portfolio li').clone();
// assign click handler to filter links
$('#filters a').click(function(){
$(this).addClass('filter-active').siblings().removeClass('filter-active');
var href = $(this).attr('href').substr(1);
filter = href ? '.' + href : '*';
// run quicksand and pass in new set of filtered items
quicksand_run(copy.filter(filter));
return false;
});
});
</script>
Here "quicksand" plugin uses "retainExisting:false" option and a copy of portfolio items is made without events/data to make it possible to initialized Colio plugin from scratch on a new set of items.
In both examples JS code has comments, but if something isn't clear please contact me and I will be happy to answer any questions!
Thanks for reading!