flGravity

flGravity supports this item

Supported

This author's response time can be up to 5 business days.

166 comments found.

Colio expander has trouble with scrolling on mobile. I’m using iPhone, iOS 10.

When I click a thumbnail to expand the colio content, it works great. But when I use my finger to scroll down to read the rest of the content, it collapses the colio-content. Then I have to scroll back up, click the thumbnail again, then the content expands. Then if I scroll VERY slowly, the content will remain expanded. But, if I scroll just a little too quickly, it will collapse again. I’ve tried scrolling on both sides of the screen, making sure not to hit the thumbnail or the close button, and it still happens.

Is there a way to fix this? Here are my settings:

$(’.expandable-grid’).colio({ id: ‘expanded-container’, placement: ‘inside’, closeText: ‘Close ’, scrollPage: false, navigation:false, scrollOffset: 80, contentFilter:’#bio-wrap’ });

Yes, it happens on your demo as well. I’m using iPhone using version iOS 10.3.2. If you expand an item, then scroll down to read the rest of the content, it will collapse. I made sure not to hit the close button while scrolling down.

If I remove this line from the code, it works. So this is the culprit:

`// for 'inside' placement hide viewport immediately on resize
           if(self.settings.placement === 'inside' && /^(smart)?resize$/.test(e.type)) {
               self.insideHideViewport();
           }`

However, that part is necessary for resizing properly.

Try to replace the code that hides viewport on resize with this code, specifically for smartphones

if(self.settings.placement === 'inside' && navigator.userAgent.match(/i(pad|phone)/i) !== null && e.type == "orientationchange") {
  self.insideHideViewport();
}

Feature request – support for linking (from another page) to grid thumbnail and open respective thumb details based on selected #id in link, ie. www.domain.com/#colio_c3. Collapse-Pro-Matic has this feature, have you considered an update? Or maybe more documentation on using the expand API on how to get this to work? Thanks!

Hello!

I have implemented this feature in WP version of my plugin. It uses Colio API expand() method to open item by index in grid. If you are interested here is JS code from WP version

// DEEPLINKING
                window.setTimeout(function(){

                    // if no hash in URL, return
                    if(window.location.hash == '') { return; }

                    // look for item 
                    var target_item = list.find('[data-hash="' + window.location.hash + '"]');

                    // return if there is no matching item
                    if(target_item.length == 0) { return; }

                    // get item page and index
                    var target_index = target_item.index(),

                    // wait for page switch transition to end and expand item
                        window.setTimeout(function(){
                            list.trigger('colio', 'excludeHidden').trigger('colio', ['expand', target_index]);
                        }, options.transitionDuration + 1000);

                }, 1500);

Unfortunately I don’t plan to add this as a standalone feature as it can be implemented using plugin API and some JS code.

Hi there,

Having difficulties implementing this on a client’s WordPress website. There seems to be a script conflict with the theme, or plugin conflict, or both.

Using the Divi theme, the slide down parts are not clickable – namely the next/previous buttons, and the X close button, also none of the content can be selected.

When another required plugin is active, namely the WordPress Social Stream: https://codecanyon.net/item/wordpress-social-stream/2201708?s_rank=1 The image accordion stops working completely. I would really welcome your assistance, and would be fine if there is additional cost for this support. Thanks!

Well, I feel a little silly … I see now that you have a WordPress plugin version for this. Will try the WordPress version and see if that solves the problem.

Ok.

hu8035

hu8035 Purchased

Hi, I am using the black version, and it’s set to 4 columns. Can you please let me know which file I need to change and how in order to make it either 2 or 3 column.

Thank you!

Hello! Initial amount of columns is set via CSS in css/layout.css by setting up image thumb dimensions.

 .portfolio .list .thumb {
    width: 215px;
    height: 134px;
..
}
Then when you resize browser, thumb size is changed also via media queries

    @media only screen and (min-width: 768px) and (max-width: 959px) {
        .portfolio .list .thumb { width: 228px; height: 143px; }
    }

    @media only screen and (max-width: 767px) {

        .portfolio .list .thumb { width: 420px; height: 260px; }
}

So to add more columns to portfolio you should make thumb size smaller as 215×134

hu8035

hu8035 Purchased

Thanks! That worked!

Hi, I just purchased and tried to upload the plugin and got the error message “The package could not be installed. No valid plugins were found.” The file I tried to upload was called “codecanyon-6507310-colio-jquery-portfolio-content-expander-plugin.zip.” Am I doing something wrong? Thank you.

Hi! You bought wrong item. Instead of jQuery version you need to purchase Wordpress version. Then you should unzip package that you downloaded and inside you will find wordpress plugin called colio.zip

I trying to add some javascript into colio content, it does not work as i expected, how can I initial it?

I trying to make the images inside colio content can be detected and resized by adding class.

onContent: function(content){

$(document).ready(function(){
var imgs2 = $('.expand-main-image');
  var img2 = $(this);
  var width2 = img2.width(); //jQuery width method
  var height2 = img2.height(); //jQuery height method
  var divHeight2 = $('.landscape').height(); 
  if(width2 < height2){
     img2.addClass('portrait');
    img2.css('height', divHeight2+'px');
  }else{
     img2.addClass('landscape');
  }
});

}); }

nsynsy

nsynsy Purchased

ok, will try it later. If it didn’t work. I’ll contact you back.

nsynsy

nsynsy Purchased

Sorry, I can’t make it work. Please provide sample code if you can. Thank you.

It should be like so. See my comments in code

onContent: function(content){

 // find images  with ".expand-main-image" class in content that is going to be loaded

 var imgs2 = $(content).find('.expand-main-image');

// but Im not sure about this… 

  var img2 = $(this); 
  var width2 = img2.width(); //jQuery width method
  var height2 = img2.height(); //jQuery height method
  var divHeight2 = $('.landscape').height(); 
  if(width2 < height2){
     img2.addClass('portrait');
    img2.css('height', divHeight2+'px');
  }else{
     img2.addClass('landscape');
  }

} // onContent cb
by
by
by
by
by
by