[Drupal] How to display view in colorbox popup using drupal 7

| | 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. You may also look into other solved issues and details related to colorbox over here.

  1. 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.
  2. Downloaded the colorbox module from 'https://www.drupal.org/project/colorbox'
    and stored in 'sites/all/module/'.
  3. Downloaded 'Libraries API 2' module from 'https://www.drupal.org/project/libraries'. And stored in 'sites/all/module/'.
  4. 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".
  5. Then enable the 'Enable Colorbox load' from 'admin/config/media/colorbox'.

    Create following menus for the page callbacks,
    
      $items['sample'] = array(
        'title' => 'Sample',
        'description' => 'Page for pop up view sample',
        'page callback' => 'MODULE_NAME_display_sample',
      );
      $items['sample-view'] = array(
        'title' => 'Sample',
        'description' => 'Page for pop up view sample',
        'page callback' => 'MODULE_NAME_display_sample_view',
      );
    
  6. Create a view page with a path '/sample-popup-view' and add a block for that page with display content.
  7. 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;
    }
    
  8. 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 fell free to share your thoughts and doubts regarding this here.