MD Portfolio "Load more" breaks parallax effects

Tanguy's picture
Tanguy
Mon, 02/05/2018 - 05:16
#1
MD Portfolio "Load more" breaks parallax effects

Hello,

Everything works fine, except once we've cliked on "Load more", that breaks  the different parallax effects of the page.

Tx for your help.

Congnv's picture
Congnv
Tue, 02/06/2018 - 04:39

Hi Tanguy

This is not an error of portfolio module.

when content height of region above parallax has been changed, you have to recaculate the position of parallax by call :  jQuery(window).trigger('resize.px.parallax');

you insert this code  into function md_portfolio_load_content in file md_portfolio.module.

Do it similar lightbox in https://megadrupal.com/forum/module-support/md-portfolio/3976

Tanguy's picture
Tanguy
Tue, 02/06/2018 - 05:01

OK Thanks, I modified the md_portfolio_load_content function (see below) but this doesn't work. Any idea?

function md_portfolio_load_content($view_mode = '', $nid = '') {
  drupal_add_http_header('Content-Type', 'text/html; charset=utf-8');
  $node = node_load($nid);
  $node_render = node_view($node, $view_mode);
  $content = render($node_render);
  $content_view = '<div class="cbp-l-project-container">' . $content . '</div>';
  if(module_exists('lightbox2')){
    $script = "<script>jQuery(function($){
                  $(\"a[rel^='lightshow']:not(.lightbox-processed), area[rel^='lightshow']:not(.lightbox-processed)\").addClass('lightbox-processed').click(function(e) {
                  if (Lightbox.disableCloseClick) {
                    $('#lightbox').unbind('click');
                    $('#lightbox').click(function() { Lightbox.end('forceClose'); } );
                  }
                  Lightbox.start(this, true, false, false, false);
                  if (e.preventDefault) { e.preventDefault(); }
                  return false;
                });
                $(window).trigger('resize.px.parallax');

              });</script>";
    $content_view .= $script;
  }
  print $content_view;
  exit;
}

Congnv's picture
Congnv
Tue, 02/06/2018 - 05:18

HI Tanguy

Maybe, it takes some time so that browser show new content with new height

try to replace $(window).trigger('resize.px.parallax'); by  setTimeout(function(){$(window).trigger('resize.px.parallax');}, 500);

Tanguy's picture
Tanguy
Tue, 02/06/2018 - 05:47

OK Thanks, actually your code works when we come back from the content view, not when we click on "load more".

So instead, I modified the md_portfolio_load_more function (below), but this is not triggered...

Can you help please?

function md_portfolio_load_more($vname = '', $display_id = '', $page = '') {
  drupal_add_http_header('Content-Type', 'text/html; charset=utf-8');
  $view_object = views_get_view($vname);
  $view_object->set_current_page($page);
  $wle_content = $view_object->preview($display_id);

  $md_check_content = strpos($wle_content, 'md_portfolio_display_content');
  if ($md_check_content !== FALSE) {
    $wle_content_start = strpos($wle_content, '--mdsstart--') + 13;
    $wle_content_end = strpos($wle_content, '--mdsend--') - 2;
    $wle = '<div class="cbp-loadMore-block">';
    $wle .= substr($wle_content, $wle_content_start, $wle_content_end - $wle_content_start);
    $wle .= '</div>';
  }
  else {
    $wle = '';
  }
  $script2 = "<script> console.log('youhou');setTimeout(function(){jQuery(window).trigger('resize.px.parallax');},500);
                 </script>";
  $wle .= $script2;
  print $wle;
}

Congnv's picture
Congnv
Tue, 02/06/2018 - 06:37

function md_portfolio_load_more return tag <div class="cbp-loadMore-block"> but module porfolio only get it's children to append to page

try to copy code below and insert after line $wle .= substr($wle_content, $wle_content_start, $wle_content_end - $wle_content_start);


// replace first match

    $text_search = '<div class="cbp-caption-defaultWrap ">';

    $pos = strpos($wle, $text_search);

    if ($pos !== false) {

      $script2 = "<script> console.log('youhou');setTimeout(function(){jQuery(window).trigger('resize.px.parallax');},500);

                 </script>";

      $wle = substr_replace($wle, $text_search.$script2, $pos, strlen($text_search));

    }

Tanguy's picture
Tanguy
Tue, 02/06/2018 - 08:07

Not successful

Here is my function :

function md_portfolio_load_more($vname = '', $display_id = '', $page = '') {
  drupal_add_http_header('Content-Type', 'text/html; charset=utf-8');
  $view_object = views_get_view($vname);
  $view_object->set_current_page($page);
  $wle_content = $view_object->preview($display_id);

  $md_check_content = strpos($wle_content, 'md_portfolio_display_content');
  if ($md_check_content !== FALSE) {
    $wle_content_start = strpos($wle_content, '--mdsstart--') + 13;
    $wle_content_end = strpos($wle_content, '--mdsend--') - 2;
    $wle = '<div class="cbp-loadMore-block">';
    $wle .= substr($wle_content, $wle_content_start, $wle_content_end - $wle_content_start);

    $text_search = '<div class="cbp-caption-defaultWrap ">';
    $pos = strpos($wle, $text_search);
    if ($pos !== false) {
      $script2 = "<script>
console.log('youhou');setTimeout(function(){jQuery(window).trigger('resize.px.parallax');},500);</script>";
      $wle = substr_replace($wle, $text_search.$script2, $pos,strlen($text_search));
    }

    $wle .= '</div>';
  }
  else {
    $wle = '';
  }

  print $wle;
}

Tanguy's picture
Tanguy
Tue, 02/06/2018 - 08:37

OK, I insert the following code in a global js file and it works as expected

 jQuery('a.cbp-l-loadMore-button-link').click(function() {
        setTimeout(function(){jQuery(window).trigger('resize.px.parallax');},2000);
    });

Tx for your help

cindy's picture
cindy
Tue, 02/06/2018 - 21:31

So,

your problem is solved? if you have any question, feel free to ask us

Thank you!

Tanguy's picture
Tanguy
Wed, 02/07/2018 - 02:49

Yes, Thanks a lot for your help
Have a nice day

Log in or register to post comments
Have More Idea?

We are here to build your website!

No Universal solution fits all special business requirements. Our experienced team is ready with ideas and state-of-the-art technical solutions to consult the best solution within your budget.