Thanks! Yes, it’s possible. You need to set “placement” plugin option to “inside” and configure amount of offset from the top using “scrollOffset” option

Allright, get it

One more question – i use now the “inside” placement. Is it possible to animate the “height” of the ul? Now the height just jumps abrupt. Nice would be a simultaneously animation of the ul height with the container height, if it expands or collapse.

The problem is – if i have one more section beneath the portfolio it seems my items overlap just for a sec the other section… Hope you understand what i mean

To fix this you need to clear floated items in UL list (like add clearfix class). In this case Colio will be able to get proper list height

To anyone who faced this problem also.

Problem is related to Isotope that adds css3 animations to the list of portfolio items. This prevents Colio from getting actual height of a list as it’s being animated. To fix this add ‘no-transition’ class to the list (class comes with isotope) to disable css3 animations.

I will try to add a workaround to this problem in Colio code. So keep an eye on updates

Thank you!

This problem is fixed in Colio v1.1. Please re-download package from Codecanyon

In the interim, I’ve hacked this by creating a fake row of blank divs to go at the end to trick the code into thinking there is another row, and thus making the bottom viewport open below the “last” row. I do hope you’ll consider adding this placement to the plugin soon, so I can remove this hack. Thank you!

Please check your mail, I just sent you modified js file. It places Colio viewport after the last row of items in “inside” placement

Yes! That worked. Thank you very much for the support. That is just what I needed.

It doesn’t remove them from the markup for some reason, just piles the divs with id=”colio_1” on top of one another

Hi! No, I never saw this problem. Make sure that “colio-content” divs have unique IDs. Then when you set “data-content” attribute on your portfolio items check if you set correct #id

Fixed is somehow, thanks

Hi!

my plugin can work with any UL list or a collection of similar items. Basically it doesn’t need to be a grid. You can have items aligned vertically

Yay!! Gonna purchase it now!

Thanks for purchase! If you will have any question feel free to contact me again!

OK! Right now I’m working on another interesting jQuery plugin When I release it (it’s about 2 weeks from now) I will start with WP version of Colio plugin. Thanks!

Just want to let you that I have released Wordprees version for my Colio plugin. You can find it here http://codecanyon.net/item/colio-responsive-portfolio-wordpress-plugin/7687452

Hi! It’s just a demo with 4 columns. You can have any number of columns in your portfolio

Hi! I need to have a look what you did so far. It’s hard to tell what you did wrong. To change animation you should modify code of a plugin. there is Colio.prototype.expandViewport method that animates height of Colio viewport, and you can change animation to simple fade

I got what you mean )) Sorry! To fix this in white version please add “clearfix” class next to the “list” class of UL portfolio list. This will help my plugin to properly get initial height of a list!

It works – but (yes another “but” only if the windows size or orientation did not change.

You always have to reload the page to get the correct distance from portfolio to footer AFTER you open a project.

Many thanks for the effort. I think, it’s time to end the discussion.

If Colio is in “inside” placement, plugin will hide viewport on every window resize. It’s required because floated portfolio items will overlap viewport that has its own position on screen. So if you want to keep viewport visible when you resize window you need to use either “before” or “after” placement.

I will make Wordpress version but not now. Thanks!

Just want to let you that I have released Wordprees version for my Colio plugin. You can find it here http://codecanyon.net/item/colio-responsive-portfolio-wordpress-plugin/7687452

Yes, you can. If you will use some plugin to render map you will have to add its init code to “onContent” callback

Try to select with mouse the inside of colio viewport where content supposed to be and you will see

Before I trigger the animation, the content is correctly stored but as soon as I trigger it, the content changes so that every target element has the exact same content.

See these screenshots to see what I mean;

First of all. I recommend to wrap any content you want to load with Colio plugin into some html element – if you want just text, please wrap it into <span>Just text</span>.

Now, regarding why you always get the same text in Colio viewport. I checked and it turned out that when I click any portfolio item text inside all LI of video-list is reset to ’ Another video right here ’. Also this happens when I click to filter portfolio items. Please check your scripts!

“contentFilter” accepts jquery selector, so you need to specify ’#video’ to get only video element

To fix this problem do this .work-item { top: 0; }

Perfect! Thank you so much

Hi! Maybe later I will create Wordpress version of this plugin and you will be able to do this!

that would be really great thanks!

Hello!

Yes, Colio plugin can display any content you like and video as well!

If you are going to embed iframes I would recommend to wrap them into DIVs with .video class to make video responsive

.video {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
}
.video > iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

However video will not pause when you collapse viewport. This functionality you will have to add on your own using “onCollapse” plugin callback. Here for example is how to pause Vimeo video using JS – http://jsfiddle.net/zimm/8CV2S/14/

Thanks a lot! This is exactly what I’ve been looking for!

One more question, is there a way that I can set one single portfolio item as open/expanded by default? So for example, when someone visits my site, the first portfolio item is pre-expanded?

Yes, after you have initialized plugin you should call “expand” API method and pass it 0 (index of first item in portfolio)

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

Ok. You can copy all portfolio styles from css/layout.css (everything that starts with .portfolio declaration) then move it to your style.css and simply add what’s missing.

I haven’t had a chance to implement your recommendations but you can see the results of my fiddling here:

I found a weird rendering issue that only affects Chrome for some reason: when you expand one of the items in IE and Firefox everything behaves as in the examples but in Chrome the red overlay bleeds through on the top but still displays the solid red box on mouseover. Doesn’t make any sense unless I screwed up the styles lol we’ll see if when I re-do it that problem goes away.

To fix this you need to add “list-style: none;” to .colio-theme-black .feed { } declaration.

Hello! You can call “expand” api method by sending custom “colio” event to the element (portfolio container), that the plugin has been initialized with

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

For more details on API methods please check corresponding section in plugin documentation.

It works! Thank you so much!

Maybe, depends on how popular my plugin will be

Just want to let you that I have released Wordprees version for my Colio plugin. You can find it here http://codecanyon.net/item/colio-responsive-portfolio-wordpress-plugin/7687452