I have noticed this style in colio.css

.colio-container {
    padding: 40px;
    margin-left: -7px;
    height: 100%;
    width: 932px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

while original style for .colio-container does not have margin-left: -7px; and loops like so

.colio-container {
    padding: 40px;
    height: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

Yeah, if I change that it works on mobile, and then not on pc…

Please remove

margin-left: -7px;

from .colio-container style

Is this question about jQuery or WP version of my plugin ? Because in jQuery plugin you can compose UL list with items as you want.

Yes, we can discuss this. Please tell me hat you need.

Sorry I overlooked your response! I’m still interested in adding a “load more” function wherein the initial grid loads say, nine items, but the user can click a “load more” button to append nine more items to the bottom of the grid, and so on until all items are visible. Amount of overall items should depend on selected filter. Hope that makes sense! I understand that this would be custom work for an additional cost.

Hello! Unfortunately I don’t have time right now as I’m working on another plugin that I’m going to release the next week.

Hi! Do you mean arrows in slider in http://plugins.gravitysign.com/colio/index_white.html example?

To show arrows you shouad modify next CSS code like so

.colio-theme-white .flex-direction-nav .flex-prev,
.colio-theme-white .flex-direction-nav .flex-next {
    position: absolute;
    height: 40px;
    width: 40px;
    text-indent: -9999px;
    z-index: 10;
    background: #444;
}

.colio-theme-white .flex-direction-nav .flex-next { top: 50%; margin-top:-20px; right: 0; background: url(http://example.com/images/br_prev.png) no-repeat 0 0;  }
.colio-theme-white .flex-direction-nav .flex-prev { top: 50%;  margin-top:-20px; left: 0;  background: url(http://example.com/images/br_prev.png) no-repeat 0 0; }

in colio-white/style.css file.

Hello,

Sorry, I don’t quite understand your problem. Filters menu is floated to the right, that’s right. UL list with thumbs occupies available width of parent DIV.

I fixed it my self, before you answered me

Hm. I would suggest you to check html markup. Particularly make sure that all tags in UL list with items are properly closed. Different browses behave differently when they spot html mistakes…

Hi! Filters menu is optional. In plugin documentation I explain in last 7th section how to add filters to grid using isotope/quicksand, but Colio can work without it.

If you have any questions please let me know!

Hello! Unfortunately my plugin does not have export feature. You can try wordpress import/export for “Items” post type. And make sure that Colio WP is installed on target install before import.

Firefox mobile on Android.

The Black Theme does open the project window. The white theme does not. What information / lines of code can I change in the white theme to make the project window open in Firefox mobile android? Thank you.

Hi! At first glance it looks like as on firefox(android) there is some JS error. But it’s strange that it works on black theme, while on “white” it doesn’t.. Switching theme is just about adding a class “colio-theme-white/black” to the “colio” div and does not run any JS code.

Unfortunately I was not able to configure remote debugging on my phone with Firefox on my Mac. If you can please try this on your computer – https://developer.mozilla.org/en-US/docs/Tools/Remote_Debugging/Debugging_Firefox_for_Android_with_WebIDE

I tried in firefox but it doesn’t work. Ever since i bought your plugin i’ve had a few issue. Probalbly i need to change it

If i resize the page the button works once. Do you think can be a resize jquery issue?

Hi! Just tried in FF but it still works. Not sure what this can be. Did you have a chance to check Firebug, maybe there is some JS error that prevents viewport to open again once you close it?

Hi! In latest version 1.5 of Colio plugin there is an option

beforeLastRow: false,               // if true, place viewport before last row of items ("inside" only)

which can be used to change viewport position for last row. If you have older Colio version please redownload package from Codecanyon.

this does not solve my problem. The last row content still appears at the top when expanded and content below my list moves. If I use the “before” or “after” options, everything works fine, but I really need the “inside” placement on all rows and “after” only on the last row.

Hi! I will reply you via email. Thanks!

from Codecanyon makes me download a single folder with this content:

colio-black, colio-white, CSS, docs, images, index_black.html, index_white.html index.html, JS, pictures.

I made a zip file of all content but don’t work.

I see. You bought JQuery version of Colio plugin instead of Wordpress version. Colio for Wordpress you can find by this URL http://codecanyon.net/item/colio-responsive-portfolio-wordpress-plugin/7687452&ref=flGravity

You should contact envato support and ask them to refund and then buy Colio WP version.

OK i thought I had purchased the plugin

Hi!

Thumbs image size you can change in wp-content/plugins/colio/colio.php file in next two lines

// portfolio grid thumbs (crop and no-crop)
add_image_size('colio-item-thumb', 460, 300, true);
add_image_size('colio-item-thumb-nocrop', 460, 300);

then you should install Regenerate Thumbnails WP plugin and start it.

Margin between items in grid you can set in Colio -> Settings in Item Margin option.

I know it sounds like an odd request, but I have to give the expander div a negative top and bottom margin to cover some content and this causes the position to mess up on window resize. Thanks!

Or is there an option for the expander div to just float and not push content down?

Sorry for a delay with reply. If you are using “inside” placement items below the viewport are pushed down when DIV opens.

BTW. Not sure if that can be helpful but “placement” plugin option

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

can be set to some div using it’s ID attribute and this DIV you can position like you want

The problem seems is with index that you pass to expand() API function. In your case for last filter you get only 1 item and its index is 0. Colio plugin has excludeHidden() method to dynamically exclude items when they are not visible as result of filtering. So you should take this into account.

I tried to add other filters and items but nothing changes. In your example i see only 2 #colio_ and different items have the same content, but i need different contents for each item. Is this possible?

Every LI item in portfolio should have its own data-content attribute which specifies a content for that item, like so

<li class="item" data-content="#content_1"></li>  

please check plugin documentation in “Installation” section.

Hello! Do you mean #hash part in URL?

Yes currently when i click on a project, my url doesn’t change.

You can try to add this code to the onExpand() and onCollapse() callbacks when you init Colio plugin. This code takes hash from data-hash attribute that you set for LI items in portfolio list.

onExpand: function(container, content_id){
    // set URL hash to the viewing item
    var item_hash = $('#portfolio').find('.colio-active-item').attr('data-hash');
    if(window.history && 'replaceState' in window.history) {
        window.history.replaceState({}, document.title, item_hash);
    } else {
        window.location.hash = item_hash;
    }
}, 

    onCollapse: function(){
     // remove hash part from URL
    if(window.history && 'replaceState' in window.history) {
       window.history.replaceState({}, document.title, '#');  
           } else {
       window.location.hash = '';
     }
   },

note that $(’#portfolio’) is your UL list that you have initialized Colio with.

If you will have any questions please let me know!

Hello! I made this only for WP version of my plugin.

Hello! Yes, you can insert video as iframe or html video tag. If you plan to use some JS video plugin then you should add init code for it using onContent callback function.

Let me know if you have any other questions!

Finally, this code make the magic

// "colio" plugin
$('.portfolio .list').colio({
    id: 'demo_1',
    theme: 'black',
    placement: 'inside',
    hiddenItems: '.isotope-hidden',
    onContent: function(content){
        // init "boorstrap carousel" plugin
        $('.carousel', content).carousel();
        $('.carousel .left').click(function(){
            $('#carousel-1', content).carousel('prev');
        });
        $('.carousel .right').click(function(){
            $('#carousel-1', content).carousel('next');
        });
    }
});

OK

I tried this

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

Work when page loads, but deactivates the filters

Finally it was quite simple, i used this code:

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

Only change the first line from the original code

Yes, that’s it. Default filter can be set this way.