Please assume I am an idiot an do not know how to adjust the scrollOffset option! Thanks

Nope. Nevermind…I may not be such an idiot afterall…I got it! Thanks for your help and quick response! :}

Ok

Hello,

first of all I would suggest you to check markup. Because in “talent-thumbs” UL list LI items are mixed with <a>. Looks like you are missing closing tags.

Oops – definitely my oversight! That did the trick. Thank you and great plugin!

Great!

Hi,

To make this work you should add JS code that will do next

1. when site loads check location.href via Javascript to see if it has a hash like #colio_1 or something like that 2. use Colio JavaScript API, specifically expand() method to open viewport by index, like so

jQuery('#colio_portfolio_black .colio-list').data('colio').expand(1);

this will work for portfolio with [colio id=”portfolio_black”] shortcode and it will expand 2 item (0 based indexes)

Hi! Sorry, I have no time right now.

Hello!

Yes it’s possible. Plugin has an option called “placement” which can be “before”, “after” or “inside”, and configures placement of viewport with item details relative to the grid. “inside” as you may guess is what you need!

Hello,

Using inside solved somehow the design issue. The problem is that it works like:

• Clicking a link from row 1, it opens the viewport below row 1. Nice.
• Clicking a link from row 2, it opens the viewport over row 2 while I was expecting to open it below row 2.

Is there any way to open viewport always below the current row? There is a 4th setting ’#id’ but I suppose that is for a specific id. At least I tried setting placement: ’#id’ and as I was expecting the viewport didn’t opened at all.

Other than this very nice addon even if I spent till now lot of hours to make it working. But at least works as expected (except the issue that I post above

Thank you
Christos

Hello! By design if you click last row of items viewport will open above it. The ”#id” value for placement option is to specify container for viewport – some DIV where you want to put viewport.

Hello!

1. Unfortunately there is no way to open viewport without animation. You can however try to modify code. For example create your own API method to expand viewport with 0ms duration.

2. Try to use onContent callback for your custom code as soon as content gets inserted into viewport (before expand will start)

Let me know if you have any other questions!

I’ve actually gotten both these things sorted out with some tweaks to the js, thanks!

I do notice some overlapping of the viewport by the thumbnails in Chrome and Firefox. It’s intermittent. I do have some cleared floats within the container, which I see earlier you said can screw with things. I need them in there though, is there any way around this issue? I’ve got the portfolio list and containing div both set to clear it, but still nothing.

Hello,

> overlapping of the viewport by the thumbnails

let me check one thing. Do you mean thumbnails in portfolio grid or “extra photos” thumbs inside of viewport itself?

In first scenario the problem can be related to % widths. For example if you have 4 col grid, then every thumb will take 25%. In some cases that may not work right and you should set 24.5%. Check wp-content/plugins/colio/grid.css and try to tweak % widths in grid.

To me in different browsers is quickly opened including Mobile.

New test page: http://www.pardo.cat/Fototermic/Instalacions2.php

I dont’ know what’s the problem but it does not work for me. It times out.

I checked your link and it looks like Colio works ok. Do you still see the problem?

I have a different issue also. If you take a look at [ http://dev.nchp.mn ], under the “Work” section, Colio and Isotope are implemented.

When the browser window is scaled down below a width of 768px, at times the items arrange themselves as two columns – as designed – and other times as one.

From investigating, this happens when the parent container to colio has its width as an odd number – colio cannot divide by two cleanly, and makes each item 1px too large.

Can you please provide a fix for this?

Thank you.

When you will open Inspector in your browser you will see that items in portfolio grid don’t have widths set in style attribute. Everything is controlled by classes which I see go to bootstrap.min.js. Colio plugin does not adjust items widths in any way. Also grid animations are controlled by Isotope plugin which is part of Colio plugin.

I think you should check bootstrap media queries and how they set widths for items.

Hello and sorry for late reply. You should contact support and tell them that you made mistake. They will make refund!

I have used onExpand function but getting some some errors. It is not expanding when clicked readmore and opens automatically when we slide a couple of frames, but unable to collapse after a couple clicks and the bottom space doesn’t get collapsed. Please let me know how to fix this.

Js for bxslider:

<script type=”text/javascript”> </script>

jQuery(".bxslider-slide2 > ul").bxSlider({easing: "linear",tickerHover: true,adaptiveHeight: true, adaptiveHeightSpeed: 1500,moveSlides: 1,maxSlides: 1,auto: false, slideWidth: '1160',});

Demo:

<script type=”text/javascript”> $(document).ready(function(){

// "scrollTop" plugin
        $.scrollUp();    
</script>

// "colio" plugin
    $('.portfolio .list').colio({
        id: 'demo_1',
        theme: 'black',
        placement: 'after',
        hiddenItems: '.isotope-hidden',
        onExpand: function(){$(window).trigger('resize');},
        onContent: function(content){
            // init "fancybox" plugin
            $('.fancybox', content).fancybox();                    
        }                
    });

// "isotope" plugin
var filter = '', isotope_run = function(f) {
    var list = $('.portfolio .list').isotope({layoutMode : 'fitRows', filter: f});        
    window.setTimeout(function(){
        list.trigger('colio','excludeHidden');
    }, 25);
};

$('.portfolio .filters a').click(function(){
    $(this).addClass('filter-active').siblings().removeClass('filter-active');
    var href = $(this).attr('href').substr(1);
    filter = href ? '.' + href : '';
    isotope_run(filter);
    return false;
});            
isotope_run(filter);

});

$(document).ready(function(){
// "colio" plugin
$('.portfolio3 .list').colio({
    id: 'demo_3',
    theme: 'black',
    placement: 'after',
    hiddenItems: '.isotope-hidden',
    onContent: function(content){
        // init "fancybox" plugin
        $('.fancybox', content).fancybox();
    }
});

// "isotope" plugin
var filter = '', isotope_run = function(f) {
    var list = $('.portfolio3 .list').isotope({layoutMode : 'fitRows', filter: f});        
    window.setTimeout(function(){
        list.trigger('colio','excludeHidden');
    }, 25);
};

$('.portfolio3 .filters a').click(function(){
    $(this).addClass('filter-active').siblings().removeClass('filter-active');
    var href = $(this).attr('href').substr(1);
    filter = href ? '.' + href : '';
    isotope_run(filter);
    return false;
});

isotope_run(filter);

});

Hmm. I see that colio is inside of “bx-viewport” div with overflow:hidden and some fixed height.

Basically when you expand colio you should adjust height of “bx-viewport” to take into account height of colio viewport. So this is what you should do.

Thanks for your swift reply, will try it.

I give up to use the plugin.

Hello! Just tried to look on your site http://infinitanet.com.br/site/ but it gives me 404 error. Please check it and contact me again!

Hi! Colio plugin allows to have any number of instances on same page without any conflicts. Make sure when you init Colio plugin you specify different IDs for viewport, like so

$('#portfolio_1').colio({
 id: 'colio_viewport_1' // id will be assigned to Colio viewport
 ...
});

Regarding Q#1. There is two invisible (transparent) links that act like next/prev arrows, they have classes flex-prev and flex-next. Q#2 Not sure what you mean under fixed image size.. But this may cause problems if you will resize browser. #Q3 change what? text? #Q4 I should see this. There can be various reasons why filters move. #Q5 you should use page-wrap DIV that is centered using “margin: 0 auto; width: 800px;”

Hi- Thanks for your reply. Can you please tell me the script for Q#1? For Q3, how can I change text? The rest of them I will ask you later, because I’m getting headache.

Regarding Q1. I use Flexslider plugin as image slider in white theme. If next/prev does not work as in my preview I should look on your site as something may be broken. No additional script is needed! Please send me a link using mail form on my profile page! Thanks

Hello! Isotope plugin animates realigning of items in grid when you resize browser window. If you don’t need filters, you can simply remove their markup – <div class="filters">..</div>, but leave Isotope plugin for animation.

Hi Lisa! I replied via email.

Hi! Fancybox is 3rd party plugin that I incorporated into my Colio project. Please refer to its documentation about how to add video iframe. Here you can find some tips – http://fancybox.net/blog ( 4. Show youtube clips. )

Also you can show me what you did and maybe I will give some suggestions. You can contact me privately using mail form on my profile page.

Hi thanks for your reply – i just updated the fancybox files and it all worked – but am trying to do something else now – if you had any ideas? Cheers

Hi!

Basically you must have UL list where LI items have 2 things

- “data-content” attribute that points to the content that should be displayed in colio viewport (inline, ajax or #id see docs)
- link with class .colio-link that will trigger expanding of colio viewport when clicked. Also instead of .colio-link you can use API methods – expand() and collapse()

Thank you for the quick response! I was missing “colio-link”. however, I am having an issue where this dropdown will appear outside of the portfolio and list tags, and it only seems to work inside. Any suggestions? Thanks again!

There is 4 types of viewport placement – inside, before, after or within any container by #ID.

placement: 'before',                // viewport placement - "before", "after", "inside" or "#id" 

okey nice hear a good news i’ll back to you soon if i can do all that i need ;D

Sure, please contact me if you need any help!

I keep it in mind

thanks for your help, we keep in touch !!!

Do you mean FF on Android?

yes!

I don’t have FF on android to test this. Sorry

Try to wrap content that is to be loaded via ajax into some container like <div class="wrap"> content here </div>

Hey, it is allready wrapped in some containers. This Containers are wrapped in a and use the the contentFilter ..

Could you give me link to look at it?