0

Can I display a view page within a Colorbox popup ? ( in the same way as a node can be displayed with in a colorbox popup) If yes , then how?

2 Answers 2

0

Put your view into a div with a wrapper that is hidden (ie, display:none;). Then you can use the following javascript:

$.colorbox({
    'inline' : true,
    'href' : $('.views-view-my-view'),
});

You must replace the 'href' attribute with the appropriate jQuery collection representing your view.

If you need some advice on placing a view on your page, here is a clean implementation:

function MODULE_preprocess_page(&$vars) {
  $vars['page']['bottom']['my_view'] = array(
    '#type' => 'container',
    '#attributes' => array(
      'id' => 'my-view-container',
    ),
    'children' => array(
      '#markup' => views_embed_view(...),
    ),
  );
}

In this case your selector for colorbox would be #my-view-container .view

2. Using Colorbox Node Module :

Section One:Building views slideshow

  • Add a View

  • Change format to "Slideshow"

  • Add required fields.

  • Change Path to: whatever/%

  • click on Advanced link top right: add a "Contextual Filter" ->Content:Nid ->WHEN THE FILTER VALUE IS NOT IN THE URL Display all results for the specified field Provide default value: Content ID from URL

  • format->slideshow->settings:at the end of settings activate Pager and Controls

Section Two: setup play slideshow button

  • add another view: no pager, no path

  • add a field: (this can be any field we want to rewrite the result so it doesn't matter that much for example add "node title")

  • click on field important: disable Link this field to the original piece of content -> REWRITE RESULTS:

    • Rewrite the output of this field -> Play Slideshow

    • Output this field as a link ->Link path: whatever/!1?width=500&height=500&iframe=true

Note: !1 is for adding "node id" from URL to the link. width=500&height=500&iframe=true you can change the width an height numbers to change the size of colorbox frame.

Link class:colorbox-node

enter image description here

Section Three: play the slideshow - Click on play slideshow link in the page and you have your slideshow in a nice colorbox overlay.

Notes:

  • you can add colorbox-load instead of colorbox-node to load the whole node in colorbox.

  • Don't forget to Enable Colorbox load:admin->config->media->colorbox you can change the colorbox settings to styles->plain and theme your slideshow or View the way you like by CSS.

A little long but hope this helps someone :)

2
  • That sounds good :) Mark it as answered then... :) Commented Nov 11, 2014 at 7:10
  • 1
    Great great solutions Pravni, you saved me a big headache (Colorbox Node solution) Only one thing: i don't know if the path "whatever/**!1**?width=500&height=500&iframe=true" worked 5 years ago. I had to change !1 to [Nid]-hided Replacement pattern to make it work now. Cheers!
    – Eddie
    Commented Sep 17, 2016 at 8:04
1
  1. You can show a View Page in a color box. To do this, you have to enable colorbox and in View Format settings, you have to select Slideshow Format. It will show all the contents of your view in the slideshow.

  2. You can also display a node page content in the color box slideshow. To do this, Follow these steps :

    • Go to the settings of the field
    • Then go to Rewrite Results -> Rewrite the output of this field and add this link to this : <a class="colorbox-load" href="[path]?template=colorbox&width=700&height=700" >field_replacement_pattern</a>
    • After that go to theme folder -> templates and write a new file named page--colorbox.tpl.php
    • And the following code in it : print render($page['content']);

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.