flGravity supports this item


This author's response time can be up to 5 business days.

160 comments found.

Hey I’m having issue getting this up via jquery. I’m trying to get the expander part to work. Can you take a look?


Hi! It does not work because of this JS error –

TypeError: undefined is not a function (evaluating '$.scrollUp()')

make sure that you included scrollUP jquery plugin before it’s called


is it possible to externally (from another page) link to grid thumbnail and open respectful thumb details based on selected #id in link ie. www.domain.com/#colio_c3.

Thanks, B.


No, plugin itself does not have this functionality. But this can be done with JS code. You should get item index from hash


and use plugin API method expand(n) to open item by providing this index.

$('#my_portfolio').trigger("colio", ["expand", 2]);


First of all thanks for this great plugin, I have one small issue regarding the size of thumbnails, I have made my container 1170px wide but the thumbnail sizes are set with pixels..

.portfolio .list .thumb { position: relative; width: 215px; height: 134px; ....

is there a way to set the thumb images to % so it automatically resizes within container.. when I tried it, the thumbnails got messed up..

if not how can I set it to be large for example 260px width and auto height..and 30px between each column..

Im using 4 columns layout.

any advice would be much appreciated..



I created this Demo just to show how my plugin works and used fixed pixel approach.

Anyway. You can try to remove width: 215px; height: 134px from .thumb style and instead try to make grid items fluid, like so

.portfolio .list li {
float: left;
padding: 0 20px 10px 0;
width: 25%;
box-sizing: border-box;

also you can use @media query and modify % value when screen gets smaller

@media only screen and (max-width: 479px) {
        .portfolio .list li { width: 100%; }

vider27 Purchased


Thanks for the reply, I did as you advised but it moved to the 4th column to the bottom and made it only 3 columns instead of 4..

I tried it with your original version.

Can you please let me know what could be the issue.



vider27 Purchased

Hi there, ignore the previous message,

I have fixed it.. it was the padding issue, I have set it to 24% and all is fixed.


Hi, I would like to buy your plugin, but I need to know if there is the Infinite Scrolling on it. Thanks

Hi! No, it does not have it.


gresnak Purchased

Hello mate,

Just bought and installed your nice plugin but I have a small issue with the rendering of the expanded colio content. There is a test site here: http://test.invarti.com/home.html

Click on a profile image and you will notice that the colio expanded content appears above the page, rather then appearing inside the portfolio grid. The same thing happens when a filter is applied. I assume that it is an incorrectly set css property but I have not managed to find the correct one. Any ideas?

Hi! I just checked your site again and the problem with filters and why viewport gets incorrect position (i.e. some items instead of going down stay behind viewport ) probably is caused by the fact that you dont call excludeHidden() function after plying filtering with isotope.

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.

please check this.


gresnak Purchased

Thanks again for your help with this issue. You were correct in that not calling the excludeHidden plugin was the cause of the rendering issue.

However the remedy was complicated, as version 3 of Isotope does not assign classes to filtered items by default. I believe this functionality was depreciated in an earlier release. I ended up using the following script to manually add and remove classes each time Isotope is called.

var itemReveal = Isotope.Item.prototype.reveal;
Isotope.Item.prototype.reveal = function() {
    itemReveal.apply(this, arguments);

var itemHide = Isotope.Item.prototype.hide;
Isotope.Item.prototype.hide = function() {
    itemHide.apply(this, arguments);

Perhaps this will be of use to someone else in the future. Thanks again for your help.

Yes, that can work. Colio plugin also has option called

hiddenItems: ’.hidden’, // selector to exclude hidden portfolio items

so you can set there any jQ selector to filter items that are not visible. For example

hiddenItems: ’:hidden’


vider27 Purchased

Hi there,

I ran into another issue.. I would like to use lightbox instead of fancybox..

As you can see in my example here

the lightbox is working out of the container plugin fine, but not inside the plugins container.. (what Im trying to achieve is to have arrows on the popup so user doesn’t have to close and open the image each time, but they can navigate in the popup images, right and left)

I saw this in your documentation to update when using different popup:

    <script type="text/javascript">  
                id: 'colio_1',  
                onContent: function(content) {  

but I couldn’t figure it out :(

Can you please let me know what is the right way to integrate lightbox.

Thank you in advance


The problem with lightbox is that it searches all lightbox-related links in BODY element by default. So you can’t specify context. You can see it here

(in http://lokeshdhakar.com/projects/lightbox2/js/lightbox.js)

    $('body').on('click', 'a[rel^=lightbox], area[rel^=lightbox], a[data-lightbox], area[data-lightbox]', function(event) {
      return false;

What you can do is to replace the above code with this, which will deregister click events and then bind them again

$('body').off('click.lb').on('click.lb', 'a[rel^=lightbox], area[rel^=lightbox], a[data-lightbox], area[data-lightbox]', function(event) {
      return false;

Hope it will work!


vider27 Purchased

Hi there,

Sorry for the late response, i tried to allocate the codes you sent above, but with no success, can you please let me know where to find this code?


There is Lightbox.prototype.enable function in http://lokeshdhakar.com/projects/lightbox2/js/lightbox.js fine on your server. Were you able to locate file itself?


gresnak Purchased

Hello again :grin:

Can you please give me some advice about how to best use your fantastic plugin to dynamically generate colio expanded content as part of the onExpand function?

Use case: I currently generate the colio content containers from a JSON data file that loads 150+ images. Loading this number of images is very slow, so I want to only generate the relevant colio content container when the user initiates the onExpand trigger. I would like to use the target coiio container ID as a filter on the JSON file, so as to build only the necessary colio content.

What is the best way to proceed?

Simplified test site: http://test.invarti.com

You can pass it via GET in “data-content” attribute URL, like so http://domain.com/ajax.php?var1=data1&var2=data2

And in php script, get it via $_GET[‘var1’] and $_GET[‘var2’]


gresnak Purchased

That worked perfectly, thank you for the help. Can you could add that item of information to the supporting documentation? I am confident that it would be useful to others in the future.

Ok. Good luck!


thorne Purchased


Love the plugin! I am having some trouble stopping/pausing a video when closing a viewport. I understand I need to use a “onCollapse” event, but my js skills are not great, any tips you might have would be most appreciated. I am using jwplayer and my page mockup is located at: http://oepreview.nos.noaa.gov/redesign/gallery_2.html

If this needs “customization services” work-I be interested in pursuing that as well if you are available.

Most appreciated, James


thorne Purchased

Thank you-that worked perfectly. Is there any way to stop a video when a user just clicks on another item (rather than collapsing the box with the “x” in the upper right)-I tried to do it with onExpand: function(){ var k = 0, player; while(player = jwplayer(k++)) { player.stop(); } } But that mucks up the loading process across the board. Thanks!


thorne Purchased

Actually, I am getting a strange behavior when I switch isotope filters after I close a expanded window, the lightbox stops working. http://oepreview.nos.noaa.gov/redesign/gallery_2.html

Just checked the code and there is onExpand() callback. It is triggered every time you open new items. You can use it to stop /pause jwplayer.


gresnak Purchased

Hello again,

I’ve come across another issue with my install of Colio. My site is here: http://test.invarti.com, and I am using an AJAX call to generate the colio expanded content. The issue is that the DIV colio_1 is not receiving the correct height from the Colio plugin on the first time that a specific item is expanded. Interestingly, the second time the item is expanded, the DIV receives the correct height. My guess is that the AJAX call is happening after the height calculation step.

I want to avoid specifying a min-height on DIV colio_1 as that would break the responsive nature of my site.

What can you recommend to resolve this issue?


gresnak Purchased

Thank you very much, that solution worked perfectly.

One other question, if I assign colio to a div class to create multiple instances of colio, is there some code I can add to the onexpand event that closes all other expanded colio instances except for the one the user just clicked?

I think the correct way to do this is via API. You can send collapse event to multiple portfolios

$('#one, #two, #three').trigger("colio", "collapse");

gresnak Purchased

Based on your advice I chose to assign the function to a click event on colio-link, which fires off before the main colio expand event. Thanks for the help once again, you are very helpful!


I’m having troubles with the placement of the colio collapse panel and I can’t figure it out. You can check our development project on this url: http://dev-bouwbeurs.kandesign.net/

I’m using the colio plugin with isotope grid library. The items and colio collapse panels are loaded in the DOM, but resorted with colio plugin by the attribute ‘data-uid’.

Once I click a reordered grid item, the collapse panel is not opening beneath the item I have just clicked. The colio collapse panel sometimes collapses lower on the page and the grid breaks.

I’m using colio 1.4, but same result with the 1.5 version.

I was wandering if you could help me with this one? Thanks in advance.


The simple way to solve this is to use Colio position “before” or “after”.

With “inside” placement you will have to use “arrangeComplete” isotope event to get array with filtered items after sorting. Next you will have to modify jquery.colio.js and add API method to update array with items called this.items

So add this code to the end of Colio() constructor function in jquery.colio.js

this.list.on('arrangeComplete', function(e, f){
  var items = $();
  for(var k in f) 
self.items = items;

I haven’t tested this code, so let me know if it works.


Thanks for your support. I added the arrangeComplete method from Isotope in my main javascript file. When I log the items in the Colio function above (that I have added to jquery.colio.js), I get a list in the resorted and correct order.

But in the DOM the items are still in the wrong order and the layout still breaks when I click on an item and the collapse opens.

Do you have an idea?

Hi! Unfortunately I have no idea how to overcome this problem. “Inside” placement mode is tricky and uses absolute positioning to offset items.. What I can suggest is to use “before” or “after” placement. It will work without these headaches. Sorry

Hello I try to put colio in a typo3 cms site. I have included all js and css files, put when I click on a list item the content is not shown. the layer expands but the content is not there.

I also included the black theme but it is not advised to the items

I can see no errors in the console.

Also there seems to be a conflict with superfish menu.


There is still some layout problems but if I set z-index for DIV with class “colio” the viewport becomes visible.

Try to set

z-index: 100;

for .colio {} CSS style

That worked. But the problem is here that it scrolls over the navigation on top. Is there another way and to add it before the body. could it be added to another html container? Because we need background color inside the container which is wrapping the content. And the content wrapping is neccessary for mmenu.

Best regards

Hi! Try to set this option to the height of your top menu (header)

    scrollOffset: 10,                   // viewport offset from top of the page, px  

Hi, first of all congratulations for your plugin.

I have a small question when filtering the content. I’d like to place the filters menu inside the div with the .colio-content class where all the content is shown but filters just works when I place it out of this div.

is it posible to use it also inside .colio-content div?

Many thanks


No filters work only when they are external to the UL list with thumbs.

Hi, thanks for reply.

Would it be difficult to implement something like that? Any clue/advice?

Many thanks again.

Hi! I checked the code and actually you can give it a try. Here are the steps to make filters work in colio-content div.

1. correct styles in css/layout.css. Replace

.portfolio .filters


.colio .filters

everywhere in layout.css

2. Make “onContent” callback in Colio plugin init code look like so

onContent: function(content){

// init "flexslider" plugin
$('.flexslider', content).flexslider({slideshow: false, animationSpeed: 300});

$('.filters a', content).click(function(){
                var href = $(this).attr('href').substr(1);
                filter = href ? '.' + href : '*';
                return false;


Hi, thanks for reply. Would it be difficult to implement something like that? Any clue/advice? Many thanks again.

Hi! Please see my reply in your previous comment.


Lenixx Purchased

I would like to use pagination but do not know how.

Thank you

Hello! Colio jQuery plugin does not have pagination. It’s only available in Wordpress version.


Lenixx Purchased

Hi you told me my question was posted on the wrong page but I don’t know how to control that, I click the button “Contact Author”.

I will re-post my question here maybe you can place it in the right form? Or maybe just e-mail me a reply? I have been waiting for over a week. Thank you.

Lenixx 7 days ago Hi,

I have 3 categories:

All | Web Design | Graphic Design

I want the page to open on Web Design and just remove the ‘All’ I have tried www.mydomain.com/portfolio.html#web

I have also tried some of the code you suggested to other users but I think that is for WP users only.

Thank you in advance for your help.

(p.s. I have a pending question how to add page notation I think the answer was also towards WP users, I do not use WP)


Lenixx Purchased

“Then change JS code as I have explained earlier.” where was that explained? I cannot find that

Look in my third reply. There is a block of JS code and another one (with the changes) that you should use instead.


Lenixx Purchased

ok thank you :)


pb2008 Purchased

Hi! Great plugin. I already add in my custom theme in wordpress. I watch and try is possibile to open preview up of all items thumb. Down of all thumb. yes all ok. But i need understand if is possibile open preview enlarge down item select. For don’t have scroll always up ord down. I hope you understand me.

Thanks Paolo

Hi Paolo!

>But i need understand if is possibile open preview enlarge down item select.

not sure I get what you mean?


Lenixx Purchased


I have a strange problem when adding more items (8 per category) when clicking the menu, it starts to bug out.

I tested it with non-edited code and get the same result: https://www.youtube.com/watch?v=amR_zDNCNUo&feature=youtu.be

Really there was a problem. To fix it you just have to reset top/left position for items in UL list when switching filter.

I added

list.children().css({top: 0, left: 0});

to this code

    // "isotope" plugin
            var filter = '*', isotope_run = function(f) {
                var list = $('.portfolio .list').isotope({layoutMode : 'fitRows', filter: f});
                list.children().css({top: 0, left: 0});
                }, 25);

Going to upload a fix for this this evening. Thanks!


Lenixx Purchased

Thank you, going to test it as soon as I’m home


Lenixx Purchased

It’s working, thank you!

Hello, is it possible to collapse the viewport when the user clicks on the filters?

So first collapse the viewport and than invoke the filter or do it togehter

Hello! You can do this via Colio plugin api (Section 6 in documentation). Just assign click event handler to filter items like so

$('.filters > a').click(function(){
  var colio_api = $('#my_portfolio').data('colio');    
  return false;

where “my_portfolio” is ID assigned to UL list with portfolio items.

Hi! I bought a plug-in Colio, installed it on the site of a commercial organization. What is the guarantor of the license? (File, code, key) How to confirm a license if necessary? Thank you! Alexander.


To get license key for a copy of your purchased item, follow the steps below

1. Make sure that you logged in to your account. 2. Visit your Downloads section 3. Find the plugin, that you want to get a license key for, and click the button Download, then Licence Certificate. 4. Find the Item Purchase Code in the text document

Thank you! :)

Can the content lazyload? I am handling a portfolio with large photo gallery, I like to use your plugin in my project. But I can’t find any lazyload option in documentation. Please provide your suggestion. Thank you.

Hi! No, by default plugin does not have this functionality.