[Drupal] How to display a view in Colorbox popup

Akhila.vn | Updated 28 Jul 2016 | 2 min read

While working with a project, I need to display a view in colorbox popup. I have done the following steps for processing popup for views.

Note that only limited data will be displayed on the view block based on these steps. If we add pagination in view, we need to add more setting based on the pagination links.
Downloaded the colorbox module from 'https://www.drupal.org/project/colorbox'
and stored in 'sites/all/module/'.
Downloaded 'Libraries API 2' module from 'https://www.drupal.org/project/libraries'.
And stored in 'sites/all/module/'.
Download the Colorbox plugin from 'https://github.com/jackmoore/colorbox/archive/1.x.zip',
unpack and stored in 'sites/all/libraries'.

ie., the path to the plugin file becomes: "sites/all/libraries/colorbox/jquery.colorbox-min.js".

Then enable the 'Enable Colorbox load' from 'admin/config/media/colorbox'.

Create following menus for the page callbacks,


  //sample
  $items['sample'] = array(
    'title' => 'Sample',
    'description' => 'Page for pop up view sample',
    'page callback' => 'MODULE_NAME_display_sample',
  );

  //sample - display callback menu
  $items['sample-view'] = array(
    'title' => 'Sample',
    'description' => 'Page for pop up view sample',
    'page callback' => 'MODULE_NAME_display_sample_view',
  );

Create a view page with a path '/sample-popup-view' and add a block for that page with display content.

Create the necessary page call back for the link display. Add the 'colorbox-load' for the link as follows:


//page callback for link for click
function MODULE_NAME_display_sample() {
    $output['next_button']['#markup'] = '<a class="colorbox-load" href="/sample-view/?width=500&height=500" rel="iframe">Display View</a>';
  return $output;
}

Create a page callback to load the view named 'sample_popup_view'.


//Page callback for calling view
function MODULE_NAME_display_sample_view() {
  $display_id = 'default';
  $view = views_embed_view('sample_popup_view');  //create a page based on this machine name and create a block for display data
  print_r ($view);
  exit;
}

Please feel free to share your thoughts and doubts regarding this here.

[Drupal] How to display a view in Colorbox popup

Related Topics