7

What would be the best way to show the nodes from a view in a lightbox, triggered by a single image? The idea would be that a nice photo is shown on a frontpage. When users click on it, a view is opened in a lightbox/thickbox/colorbox/*box. This then shows all nodes in the view.

I currently manage to do this for only images with colorbox, but that's not sufficient as I would like to show captions etc. I would like to use the full colorbox functionality, rather than just the image. I tried using an iframe, however this meant every node is shown with the full site theme (header, logo, footer etc) which is not what I want to do.

7

I managed in my project by using a custom page template and and an additional get parameter.

Template.php: (In active theme directory)

function phptemplate_preprocess_page(&$vars){
    if( isset($_GET['ajax']) && $_GET['ajax']=='true' ){
        $vars['template_files'][] = 'page-overajax'; # For Drupal 6
        $vars['theme_hook_suggestions'][] = 'page-overajax'; # For Drupal 7
    }
}

I then created a template file (page-overajax.tpl.php) in theme directory with following content:

<div id="overlay-content-wrapper">
   <?php print $content; ?>
</div>

After this (Clear all caches) you can use any path (page, view, node) with ?ajax=true to pass to your *box to load if it supports for AJAX content.

As using with fancybox:

$("a.overajax").fancybox({
    'width': 400,
    'height': 400,
    ajax: {
        type     : "GET",
        cache    : false,
        url      : "user/user-posts?ajax=true",
        success: function(data) {
              $.fancybox(data);
        }
    }
});
  • 1
    Could it be that this suggestion only works for Drupal 6? The template_files key seems deprecated in Drupal 7. – Bart Braem Oct 19 '11 at 6:34
  • You are right :) – Shoaib Nawaz Oct 19 '11 at 13:25
2

You can use Colorbox Node module:

Gives the user the ability to display ANY page inside a colorbox modal without the header and footer.

Your link should look like this: href="blogs/my-example?width=600&height=600"

0

For D7, I had to follow stricter naming conventions than in Shuaib Nawaz's answer. My code looks like this:

function my_theme_preprocess_page(&$variables, $hook){
    if( isset($_GET['ajax']) && $_GET['ajax']=='true' ){
        $variables['theme_hook_suggestions'][] = 'page__ajax'; 
        // then use page--ajax.tpl.php for page template file.
    }
}

Perhaps OP can add this to the comments on accepted answer, my score is too low.

0

Have you tried the Colorbox node module ? I think that's exactly what you need ;)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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