179 comments found.
Hey,
I have managed to fix my previous issues but I am having a small problem with Fancy Box. When you click the gallery thumbnails to expand an image, the arrows (which I had to display as they were hidden) do not actually link to anything. How can I get them to link to other images and scroll seamlessly through my gallery?
Thanks in advance.
Hi! Every link with fancybox class must have the same “rel” attribute, what will link images into gallery (see http://fancybox.net/howto )
Hi there love plugin 
works great!
Im just wondering, once a project is expanded, how can I rather use the left and right arrows to skip through images in the flexslider? (instead of moving to another project)
thanks! Kate
Thanks! Flexslider has hidden left/right navigation that you can still click. To make it visible you will have to change following styles in colio-white/style.css
.colio-theme-white .flex-direction-nav .flex-prev,
.colio-theme-white .flex-direction-nav .flex-next {
position: absolute;
height: 100%;
width: 50%;
text-indent: -9999px;
z-index: 10;
}
.colio-theme-white .flex-direction-nav .flex-next { top: 0; right: 0; }
.colio-theme-white .flex-direction-nav .flex-prev { top: 0; left: 0; }
Thanks for the quick reply I will work on that thanks! I suppose to move it to where the current arrows are won’t be too difficult? Then just remove the current arrows that skip to next project.
I’m afraid moving flexslider next/prev navigation to the outside of flexslider container won’t be possible. You will have to add your own controls and then use flexslider API to make these buttons actually trigger next/prev image
hi thanks! I got the next & previous buttons working, but how do I hide them when there’s only 1 image in the gallery? (currently the controls show permanently)
You can count how many slides you have in flexslider and hide controls if =1
hi! The flexslider automatically hides the bullets at the bottom when there is only one slide, but it doesn’t hide the arrow navigation. Where should i add the hide controls? (i’m not sure where to add in in the js)
please help if possible thanks!!
Sorry for delay with reply. I checked your problem and it turned out that if there is 1 image in flexslider both .flex-next and .flex-prev controls receive additional class “flex-disabled”. So you can just do this to hide controls
.flex-disabled { display: none!important; }
thanks so much, so simple but worked!
I even tried. .portfolio.clearfix { position: relative; top: 0; left: 0; }
Didn’t worked.
Hello! I need to have a look. Please send me link to your site using mail form on my profile page. Thanks!
Just did please reply me as soon as possible.
Please see my reply
Hello,
I recently purchased this plugin and its brilliant. I am having one slight problem though.
I have added my content all fine, but the expander container is off set and not inline with the portfolio thumbs, so I want to adjust the width.
When I right click to inspect in Chrome the element.style is: element.style { position: absolute; top: 610px; left: 448px; width: 920px; height: 295px; }
That is the width I want to adjust, but I can not find this in any of the files! This is the div that comes up also in inspect.If I adjust the width on the container it screws it up for tablet and mobile, and I want to avoid this. But if I change it in the element.style in inspect it works great, I just can’t find this to make it permanent.
Thanks in advance.
Hello,
You probably use “inside” placement for viewport. The specific of it is that colio viewport is added to body with “absolute” position and it automatically aligns with portfolio UL list. The best way to correct offset is to use “margin-left or margin-right” which also may contain negative values.
For example
.colio {
margin-left: -20px;
}
also you can use #colio ID to target viewport (can be changed via plugin options)
Hello,
Thank you for your reply. I did use margin as well to try and rectify it but when you go to tablet or mobile view its all messed up.
In “inside” placement when you open viewport, colio takes width of UL list and applies it to .colio DIV that is positioned absolutely in document. Modifying width is not good idea. But if you use “before” or “after” placement then you can adjust width of .colio DIV as you want. In these cases .colio DIV has static position
I managed to get this sorted, thank you. Another thing I have run into, is that the Fancy Box pop ups do not have arrows. Now I have sorted this by changing display: none to block, but when you click the arrows they don’t actually do anything? Are you able to advise at all.
Hello, I am now encountering another problem. The gallery works all ok offline, but when online it doesnt work and I get this error come up in Inspect.
Uncaught TypeError: undefined is not a function
Maybe some JS files were not uploaded to your web server. Could you give me link to take a look.
Your page says, “compatible with popular filtering plugins like isotope and quicksand,” and “Following plugins have been used in preview – Isotope, Quicksand, Fancybox, Flexslider.”
Do I need to acquire/purchase these plugins to get the same results you have in your demos?
Thank you!
No, you don’t. My plugin already comes with all these plugins included.
I figured that so I went ahead and purchased. TY, flGravity.
But another question. My site bootstrap template is looking for http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js.
That seems to be a conflict with Colio because I need to take that link out to make Colio work (it took a lot of effort to figure that out!). Do you think just using Colio’s jquery.min.js is OK for my site? It’s this bootstrap template http://www.gettemplate.com/demo/progressus/index.html
You can use any jQuery library with my Colio plugin, as long as it is > 1.7. Bootstrap version is fine!
OK well as I said http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js is not working … 1.10.2 > 1.7, correct?
Could you show me your site with backslider? You can send it privately using my profile’s page mail form.
Done so.
everything works excellent! small question “inside” placement works fine and always open under the ‘thumb’ except the last row where it open above. how do I set it so it always open under the thumb? thanks ben
Hi! I can give you modified js file. Please contact me using mail form on my profile page.
Thank you very much! 5 stars application! 5 stars customer service!
Thanks a lot!
Hi, nice plugin. Does it also work with posts (so it don’t have to be portfolio items)?
If yes i would probably get this plugin.
Thanks.
Thanks! But I guess you are asking about Wordpress version of my Colio plugin – http://codecanyon.net/item/colio-responsive-portfolio-wordpress-plugin/7687452
No, it does not work with Posts. It has its own post type for portfolio items. But plugin can be modified to work with Posts. I had one client who asked about modifying plugin for WooCommerce products and we made it possible. So if you decide to purchase, I will be happy to help!
I use the example $(’#my_portfolio’).trigger(“colio”, [“expand”, 15]); with placement ‘inside’. it works fine when I have all the items shown – no filter, now when I apply filter and I have only 6 items shown the link is not working any more, I guess now it is number 6 (not 15) how can I expand specific item even when a filter is applied? thanks Ben
I remember I have replied you already via email. But I can add that in Isotope v1.5 you can use class “isotope-hidden” to exclude hidden items – :not(.isotope-hidden). This can be used instead or checking :visible with jQuery.
basically what i want is a button to open (expand) an item that is shown with or without filter. example red is shown with ‘all colors’ and shown with ‘red’ filter its index number change so i can’t use [expand, 15] is it possible?
$('[href="#lib"]').trigger('click');
placed the id in the herf button
<div class="view"> <a class="button colio-link" href="#lib"></a> </div>
Great! Now I understand what was the problem.
Hello
Can’t install the plugin. error occurs. tried to install the plugin via wp plugin installer – folder as a zip. what is the problem? Do you have a tutorial? thanx! t.u.
You bought jQuery version of Colio plugin, but you need Wordpress version – http://codecanyon.net/item/colio-responsive-portfolio-wordpress-plugin/7687452
Please ask support for refund and then purchase “Colio – Responsive Portfolio Wordpress Plugin”
Hi – great plugin! I wanted to see if it is possible to include the flexslider with a thumbnail slider (instead of the control nav) If so, can you provide the modified js? Any assistance would be hugely appreciated – thank you in advance!
Thanks for using my plugin! Here is what I can offer you. This code will add thumbs for flexslider
// thumbs
$('.flexslider', c).each(function(){
var slider = $(this), nav = $('<ul class="flex-thumbs-nav">');
slider.find('.slides > li').each(function(n){
var src = $(this).find('img').attr('src');
$('<li><img src="' + src + '" alt="" />').click(function(){
slider.flexslider(n);
}).appendTo(nav);
});
slider.append(nav);
});
// end thumbs
add this code right before closing } of "if(typeof $.fn.flexslider === 'function') {" statement in wp-content/plugins/colio/init.js
Also add some styles to the end of wp-content/plugins/colio/themes/shared.css
ul.flex-thumbs-nav { position: absolute; top: 0; left: 0; z-index: 100; }
.flex-thumbs-nav li { float: left; width: 50px; height: 50px; }
Thank you for this! However, I am using the jQuery plugin (not the WP plugin) can you tell me where to place the code on the jQuery plugin files? BTW – your plugin saved my project – it’s worth way more than $8
I’m sorry Basically you can use the same code. What you should do is this. Open index_white.html for white version. In <head> section add these styles
<style type="text/css">
.flex-thumbs-nav { margin: 0; padding: 0; position: absolute; bottom: 5px; right: 5px; z-index: 100; }
.flex-thumbs-nav li { float: left; height: 50px; width: auto; cursor: pointer; }
.flex-thumbs-nav li img { height: 100%; width: auto; }
</style>
then find a line that inits flexslider and set controlNav: false, like so
// init "flexslider" plugin
$('.flexslider', content).flexslider({slideshow: false, animationSpeed: 300, controlNav: false});
then below this add code to generate thumbs
// flexslider thumbs
$('.flexslider', content).each(function(){
var slider = $(this), nav = $('<ul class="flex-thumbs-nav">');
slider.find('.slides > li').each(function(n){
var src = $(this).find('img').attr('src');
$('<li><img src="' + src + '" alt="" />').click(function(){
slider.flexslider(n);
}).appendTo(nav);
});
slider.append(nav);
});
// end flexslider thumbs
And that’s it. Let me know if it works ok for you.
Is there a way so when it’s expanded, and user is clicking through the items, that it doesn’t jump to the next row? I’d like to just have them be able to click through without it jumping. thanks.
You should use “before” or “after” placement option instead of “inside”
but that places at the top or bottom of the entire thumbnail area. I want it to be right next to the current thumbnail (like google images), then be able to cycle through them without it closing, and opening it in the next row.
With “inside” placement viewport will change its row. It’s not possible to prevent this.
Hi,
your features list says AJAX possible too, but i cant find anything about that in the documentation or examples.
Could you give a short example?
thank you very much
Hi!
The shortest examples is this. When you set “data-content” attribute for portfolio items to define a source for item description, you can set #some_id, inline html or URL. When you set URL, html will be loaded using AJAX. URL can be set as /directory/file.php or as http(s)://example.com/file.php or like ./file.php or ../file.php
Allright, sounds simple, but my setup is not working 
<div class="my-class" data-content="ajax/link.html"> <!-- My Picture and Discription --> <a class="colio-link" href="#">Show my Content</a> </div>
It’s not working because you set URL like “ajax/link.html”. To tell Colio that it’s URL but not inline content, you should prefix it with this
./ ../ / http:// https://
in your case ”./ajax/link.html” should work OK. BTW. If you want to get only specific elements from ajax loaded content (by class or #id) you may consider to use “contentFilter” plugin option that accepts JQuery selector
Perfect!! Works great!!! Thanks for the fast and clear support
Hi, I purchased your plugin, really cool btw. I have some doubts about the styles(I was really good at this 15 years ago, now I am having a hard time dealing with all these rules/styles…) can you please tell me how to adjust the color for the background on colio container and the color onHover for the next/prev nav arrows? Also I would like to set the thumb as a colio link to open the container, I am trying this:
<div class="thumb">
<div class="view">
<a class="button colio-link" href="#"><img src="images/.../img.jpg" alt="preview" width="215" height="134" /></a>
</div>
</div>
thanks for your help
finally solved those css conflicts, just if you can please tell me how to enable the thumb as a colio button to open the container svp
done, I adjusted the padding and discarted the gradient/colors/effects, merci!
> just if you can please tell me how to enable the thumb as a colio button to open the container svp
you need to assign “colio-link” class to whatever element within item (”.colio-item”) you want to open details viewport when clicked
hi! yes it worked and I have been able to customize the styles very well, now I am dealing with an inconsistency, it seems that all the new visitors are getting wrong dimensions for the container(like -50px from the bottom are cropped), but it gets fixed after refreshing it, have you received any comments about this behavior?
No, I haven’t. Make sure all floated elements are properly cleared.
Hi,
great plugin first of all.
Is it possible for container to stay open after you click on filters? Right now works like, if container is opened and you click on filter link it closes the container.
Have a nice day.
Thank you! By design this is disabled because item that is open at the moment may be not visible when some filter is activated and thus may create confusion.
Okay. But wouldn’t it be better if that functionality exists and if you click on another filter, then it closes. Just thinking out loud I guess.
It works now like you say – when you click filters, Colio viewport is closed.
.portfolio .list .thumb {
width: 215px;
height: 134px;
...
}
to use 4 collums with bootstrap 3 ?
thanks
I think possible. But Im not expert in bootstrap framework, so I cannot give you any advice.
Hi, I have a new question . When i use more portfolio items (around 30, all of them have 1-2 images, but no slider), page loads very slowly. The thumbs appear quite soon but all not expanded items are loading for more than 12 s.
Would you have some suggestions on how to solve this problem? I still want to put more items in the page…
One thing i am thinking about is to make portfolio multipage so that the loading gets shorter (tried it but doesnt work for me yet), but maybe there are some tricks even if i use all items in the same page? For example, to load item images only when the particular item is being activated. But i have no idea how to do it…
I would be very thankfull for your help!
Hi! I recommend to make thumb image size as small as possible. Don’t make it 1000×600 if portfolio item is only 300×200 on largest screen.
OK! I did that. It seems like the slowness comes from the images that are inside of expandable items (where more detailed info about portfolio items is being placed), and these images are not the same as thumbs. Some ideas, please ?
You can also decrease their size to something reasonable value. Or you can load Colio content using ajax, not inline as you have now. “data-content” attribute may contain URL
Hi! First of all – I am very pleased with your plugin. There is only one particular minor problem i need to solve.
Sometimes I want to expand a particular item in portfolio list by clicking a button that is outside of this list. Its not a problem to trigger expanding of a particular item when quicksand filter is showing all items or when the items are from the same category as the item I want to expand.
But the problem comes when i try to trigger an item from a category that is not active in the filter.
At the moment I am using $(‘[href=”#brand”]’).trigger(“click”); to trigger the right category (this sorts to the right category). But at the same click I want to trigger expansion of a particular item, and its not working for me.
Do you know if there is an easy way to add some code so that i can sort the category + expand particular item with one click ?
I will be very thankfull for your answer! Best regards
Thanks for using my plugin!
>But the problem comes when i try to trigger an item from a category that is not active in the filter.
Do you use Colio API to expand item? And what happens if you try to expand item that’s not visible in selected category?
Thanks for a quick reply!
I tried to use both my own jquery script and your API, but as I am not an expert of scripts I could probably do something wrong. When i try to expand item that’s not visible nothing happens.
Do you have some suggestion on how one can use your API in order to open a particular item of a particular category (when that particular category is not active)?
Ok. Unlike Isotope plugin that simply hides items from view, Quicksand replaces items in list with new set. That’s why with active filter you cannot get hidden items – they simply do not exist at that moment in UL list.
Exactly . This is probably not a part of your plugin functionality, but thank you for replys anyway!
Yes, problem has to do with Quicksand plugin. But if you need this feature (i.e. be able to show details for hidden items) maybe try Isotope plugin
Thank you for all your help, I will probably go with isotope
HI there. Love the plugin, but I need to be able to reduce the size of the individual items. How can I do this?
(Sorry for the repost, I forgot to check the email notification box, and don’t want to miss your reply)
In layout.css you can find following style that sets item size
.portfolio .list .thumb {
width: 215px;
height: 134px;
...
}
Thanks for the reply. I already tried that. I halved the these settings, but the images just moved off centre and the boxes remained the same size. What governs the height and width of items?
Hmm. May I have a look? Please send me link using my profile page mail form.
Item’s width/height is govern by ”.portfolio .list .thumb” style. While spacings are set by ”.portfolio .list li”
Hello,
Is it possible to link directly to a Quicksand filter? For example, I have a Colio gallery that opens to show all by default. If a filter was named “Boxed”, is there a way to send a URL to someone that will take them to the gallery page with the “Boxed” filter expanded?
Basically, I would like to send different links to the same gallery but with a different filter used for each link.
No, it’s not possible.
