179 comments found.
Hi,
It’s mega script ! I have problem and maybe you can help me. I want use COLIO script in my portfolio but i have some problems. I build my page on www.realizacje.siws.pl/proba
What i want to do: 100% full width folio with 3 columns ( 0 margins) so In your code i changed width in css file
.portfolio .list li { width:33.3333333%; }
in firefox it looks good but in chrome height ul is to small and li have only 20px height
Can you help me ?
I My gol is http://realizacje.siws.pl/portfolio/ colio in right side
Hello!
You get wrong height for items because isotope is called too early (images are not loaded at this moment). You can fix this by wrapping initial call to isotope_run(filter); into $(window).load() function like so
$(window).load(function(){
isotope_run(filter);
});
at the end of init code.
Hello,
Thanks it’s works great but i have one more problem. I think it’s realted with isotope filtering. When i have my page realizacje.siws.pl/portfolio we have filtering menu on right top. When you clicking and filtering everything is ok. But when you opening some projects by clicking view project at first and then clicking filtering something is gone wrong – http://realizacje.siws.pl/portfolio/error.jpg . Any advice ?
Best regards Michal
This will be fixed in next update this week. Filters menu will be not visible when item details is open.
ok thanks a lot for your advices
I have released version 1.3 yesterday. You can redownload files.
Today I downloaded files from codecanyon and i don’t see any difference. Can you check is downloaded files have version 1.3. Jquery.colio files have date May 2014.
Colio version you can check in WP Admin -> Plugins. If it’s v1.3 then you have the latest version.
But i have colio version not for wprdpress only html jacascript
My mistake. I will check your site again and update you tomorrow.
I checked http://realizacje.siws.pl/portfolio/ and have following advice for you. Instead of
$('.portfolio .list').isotope({layoutMode : 'fitRows', filter: f}).trigger('colio','excludeHidden');
try this
$('.portfolio .list').isotope({layoutMode : 'fitRows', filter: f});
setTimeout(function(){
$('.portfolio .list').trigger('colio','excludeHidden');
}, 20);
in plugin init code. Please let me know if you found where to change this.
I paste this code you can see in my test page. When i fitering page everything is ok. When i open portfolio and close ‘project’ and the filtering everything is ok too. But problem is when I open a project and starting filtering without project you can see empty fields. When i edit page code in firebug i see that same li tags have wrong top value top:294px.
I see what you mean. Sometimes it happens, sometimes not. For now I don’t know why it happens. I need more time to check.
Hi, Thank’s for this plugin. All is working for me but i need i explanation please about how it working. In fact, what i need is when i click on some portfolio item’s, it will scroll up the the top of page and not to the DIV Colio Content… Possible ? Thank’s for your help.
Hi! When you click some item page will auto scroll to the details for this item. Unfortunately scrolling to the top of the page is not possible. You can only disable autoscroll completely in portfolio settings -> “Scroll Page” checkbox.
Hi! I want to buy your plugin.I have one question..This will work even instead of images I use divs??
Hi! Where exactly you want to use DIVs instead of images?
I have a problem with step 3 when I integrate into my website, My problem is the link that expands to show the photos, close link, prev and next link .
I am including a link so you can see.
http://ballkit.oxatis.com/PBCPPlayer.asp?ADContext=1&ID=1453181This is z-index problem. You need to open colio.css file and add z-index: 1000; to the .colio {} style (first in file)
2 more questions.
But before i start, i would like to say for potential buyers that this plugin is really really good – i highly recommend it to you!
1) On mobile devices, touching the expanded div closes it. In some cases, the expand div is longer than the phone screen display, so intuitively a user would want to scroll down, but by touching the expand div, it gets closed instead.
Is there a way to remove that behaviour and have the expand close only when tapping the “x” on top right or opening a new portfolio item?
2) I noticed an issue with isotope filtering. Here’s how to reproduce it:
a) With “All” selected, open one portfolio item
b) click on a filter link where the opened item is NOT
c) click back on “All” filter – you will already notice a display issue
d) try to re-open the same item you had opened in the first place.
From that point, the layout is completely messed up. I have that issue with using the code from your black theme demo page. Is there a way to close any opened item when using a portfolio filter? Is that what the collapse() method is for?
Thanks in advance for your help – hopefully my future template will help you get even more sales!
Thanks for using my plugin!
1. I have HTC Android phone and I don’t see this behavior. I need to click “X” to close opened item. But if you use “inside” placement option, viewport may auto collapse when you quickly tap screen what triggers zoom. In this case plugin hides viewport to prevent any layout distortion.
2. Yes, this scenario may happen. But you have few options how to fix this. a) Modify Isotope filter code that looks like
// "isotope" plugin
var filter = '*', isotope_run = function(f) {
$('.portfolio .list').isotope({layoutMode : 'fitRows', filter: f}).
trigger('colio','excludeHidden');
};
to this
// "isotope" plugin
var filter = '*', isotope_run = function(f) {
$('.portfolio .list').isotope({layoutMode : 'fitRows', filter: f}).
trigger('colio','excludeHidden');
// remove active viewport
$('#colio_id.colio-expanded').remove();
};
where #colio_id is ID of Colio viewport that you set on init.
b) Another option is to do like I did in Colio Wordpress Plugin – http://plugins.gravitysign.com/colio-wp/ . When I open any item, I hide menu with filters.
I tried to use this code
// "isotope" plugin
var filter = '*', isotope_run = function(f) {
$('.portfolio .list').isotope({layoutMode : 'fitRows', filter: f}).
trigger('colio','excludeHidden');
// remove active viewport
$('#colio_id.colio-expanded').remove();
};
but the issue remains. Any idea why?
Have you replaced ”#colio_id” with actual ID that you set for “id” option on Colio init? Also please check JS console of there is any errors.
yes and no error in the console. Writing you an e-mail to show you the template demo.
Hi,
is it possilbe to set one “colio-content” active on page load? I dont find anything about that option in the documentation?
Yes, it’s possible. On page load you can use expand(n) API method to expand portfolio item with index “n”. Please check plugin documentation – http://plugins.gravitysign.com/colio/docs/#api
Allright, thanks alot
Hi,
Great plugin!! I am working with bootstrap and have a 2 column setup in the expand section, with text / link on the left, image on the right.
The issue is that the image is responsive, and therefore the height of it is not know before the section expands. The expand section’s height does not include the image height, so the image gets cropped out if it’s higher than the text, and also on mobile devices when columns stack.
Is there a way with one of the callback functions to get the image height when section expands and adjust the height?
Once it has been opened once, if i click on another thumbnail and come back to this one, it works fine because the image height has been calculated.. it’s just on the first expand that the height is wrong. Any jquery fix?
Thanks for using my plugin! Colio plugin before “expanding” gets height of content including paddings. So you need to make sure that content does not have any floats that are not cleared. This may lead to problems. Also you can simulate window resize event, using jQuery trigger() to force plugin to readjust height if it’s expanded.
Thanks – i will try that. For now i had fixed the issue by using the flexslider gallery with 1 image instead of just an image – works great that way.
I intend to use your plugin in my next HTML template – i purchased the extended licence for that matter. OK by you? Envato also required that authors ask for permissionto use plugin.
I can show you a demo of the site in construction if you want.
Yes, sure! You can purchase extended license and use my plugin in commercial project
great thanks 
Hi! I purchased your plugin a few days ago. Excellent work! I have just a little problem that I can not figure out… Is there a possibility to make the items of the portfolio always fit to exactly 100% of the container-width? Without any padding or margin to the left or right side.
Thanks!
PS: An example…
Thanks! This can be better achieved by offsetting container (using position: relative. or negative margin) instead of adjusting items inside.
Any status updates on the wordpress plugin? Need it desperately 
It’s almost done. 1-2 days and I will finish! )
Great can’t wait!
Hi,just want to let you that I have released Wordprees version for Colio plugin – http://codecanyon.net/item/colio-responsive-portfolio-wordpress-plugin/discussion/7687452
Buying it right now!
What’s new in the change log for the version that was released May 1, 2014?
This version has few changes that I think will be useful.
- added new option “scrollPage” to enable/disable auto scroll to colio viewport
- now auto page scroll will be blocked when you resize window with opened viewport
- to support dynamic content inside viewport, you can trigger resize by sending $(’.colio’).resize() event and be sure no other listeners will run
Awesome!
How soon before the Wordpress version; I need to find a similar solution fairly soon? Thanks!
Hello! I need about 2 weeks from now. Maybe less
FYI: still holding out until you get the WP version done
Just want to let you that I have released Wordprees version for my Colio plugin. You can get it here http://codecanyon.net/item/colio-responsive-portfolio-wordpress-plugin/7687452
Hi, I love this plugin it is just wow. I am using bx slider in colio content but when content load bx slider content is not showing. please check http://grab.by/wawM this. I don’t know why it is happening. I am using it one of my theme and if it is work then I am ready for buy extended license. Looking forward your support.
Thanks
Thanks!! Any jQuery plugin that you want to use inside of Colio viewport (the content) you need to init through “onContent” plugin callback. See docs http://plugins.gravitysign.com/colio/docs/#options (last example in “Plugin Options” section explains this)
When my page loads, the grid is in two columns no matter what. What can I do so that it automatically fits the screen onload?
http://stephmilovic.com/WTF/thanks
Hello! It seems isotope plugin for some reason does not takes full portfolio width into account when it spreads out items on first load. When I resize browser it readjusts everything property. Try to position ’.portfolio .filters’ absolutely in layout.css file and see what will happen.
Thanks. I have another issue. I added another jQuery plugin that animates an SVG. Since I’ve added that, when I click “view project” it scrolls to the top. I tried adding noconflict but it doesn’t fix it. Any ideas?
http://stephmilovic.com/WTF/ thanks again!You have JS error in console, due to which Colio plugin is not initialized for portfolio.
TypeError: 'undefined' is not an object (evaluating '$.scrollUp')
Ok. I changed some things around and now I’m getting a super weird error in the console: Uncaught Error: Syntax error, unrecognized expression: . Sorry to keep bugging you, I opened a question in stackexchange and no one seems interested… http://stephmilovic.com/WTF/
I checked quickly but I cannot locate the reason. Will look later when I will have more time.
i figured it out!
Ok. Great!
Where do I control the top placement of the expanded colio? Now it is about 10px, but I want ± 180 px.
Hello! Option you need is called “scrollOffset”
Where do I control the top placement of the expanded colio? Now it is about 10px, but I want ± 180 px.
Hello! Option you need is called “scrollOffset”
Link or element that trigger Colio viewport must have “colio-link” class. Link without this class will work as simple link
I don’t need the themes, I can do the styling myself. Can you provide me a basic code snippet with the minimum code?
To get basic styling you should remove theme-related stuff from <head> of index_black.html or index_white.html files. Any script/styles that have colio-white/ or colio-black/ directory in them
I just purchased the plugin Colio. The install failed. I am using Wordpress 3.8.1…..any suggestions?
Colio is jQuery plugin. Wordpress plugin still to come. I’m working on it right now.
Hi! Just bought your plugin, the index_black works well but not the index_white one (neither it works in your examples). More specifically the objects don’t expand when i click on them.
How would it be possible to fix that? Thanks in advance!
PS Just saw that this issue applies to Firefox. nevermind, i will use the black version anyway. But just so that you know!
Hi! http://plugins.gravitysign.com/colio/index_white.html works fine in FF. Please could you check with my preview?
When I click on items, nothing happen in your example (in FF – newest version). Maybe my computer is blocking some scripts…
If black version works, then your browser is not blocking scripts. Try to clear cache and check with Firebug for any js errors.
Hi.
I have a problem with this plugin – when I first load the page and click to expand the first item in the list the 4th (last in the row) is also pushed down and overlaps the first. However, when you click close and re-expand the first item it works properly. This was happening with the 4th item in the row previously until I added another item! You can see my problem at this link: http://www.devwire.co.uk/mt/dressmaking-and-costume-portfolio/
Please can you help?
Thanks
Hi! I checked your problem and it seems my plugin decides that your 4th item must be in first row, but in fact it’s in second. I would ask you more precisely adjust horizontal spacings (margins) between items in list.
BTW. Here is how plugin figures our how many items is in row
var in_row = Math.floor( this.list.width() / item.outerWidth(true) );
Thank you – just had to adjust the calculations for number of items in the row to fit my larger margins and it works
Great!
