Views lightbox2 custom field handler (update)

The way lightbox2 currently works:
It integrates with imagefield and other CCK modules, and provides display options for them. These display options control the image that is displayed on the page (e.g. thumbnail) and the full size image that should be displayed in the lightbox. Other settings, such as field grouping is controlled on admin/settings/lightbox2 (ugh), and there's not much flexibility when it comes to the caption. So the proposed solution would fix all of these limitations.

Currently, lightbox2 takes the display options from Views and CCK content type settings, renders the field as normal and wraps it in a link. The attributes of the link control how lightbox handles the field. The href attribute points lightbox at the target image to display, and the rel attribute gives it (a) the caption (b) the lightbox group name if any (c) lightbox behaviour (lightbox, lightshow, lightvideo, etc).

One of the nice things about the proposal, is that long list of formatters (which grows exponentially!) will be gone - major bonus!

Information that the field handler would need to gather/handle (1st guess):

• Target field(s)
• Which field to use as the caption
• If grouping is required, and if so how (on nid, field name, etc)
• If image count should be displayed

So I really like the proposed idea, but there are some areas that need careful consideration:

1. We need to maintain support for non-CCK fields, like the image module, or even just manually created image links.
2. Lightbox2 CCK display options also appear on the content type's "display fields" settings page - if we're moving away from formatters, we need a solution that should work here too. Can we extend the proposed solution to this?
3. Lightbox output is constrained by the browser window size, so adding too much content to the lightbox could result in screen overflow (if rel="lightbox" or "lightshow") or scrollbars (if rel="lightframe" or "lightmodal").
4. The lightbox content is generated using JavaScript, meaning drupal_render() has no effect. I would like to make lightbox.js use Drupal.theme() function so the output is themable, but this can be only overridden by another JS file, not via php layer.
5. The previous point hints at the biggest problem of all - generating the lightbox content. I don't want to overload the rel attribute any further, so placing 3 different text fields as the caption in the rel attribute (which could include the body!) could result in a lot of text. Also if there are a lot of lightbox links on the page, it could result in an initial page load performance hit.
6. Leading on from that, lightbox currently can only handle displaying one image in the lightbox (you can't have 2 href attributes!), so if more than one field is chosen to be the main lightbox area, then we need to consider an alternative.

I've been thinking about this over night, and I'm not totally sure how to address these issues. The only idea I've had so far is described below, but I'm definitely open to alternatives as I can't help but feel that this is a bit hack-ish:

• Create a new menu item like: lightbox2_json/$field_identifier - figuring out what $field_identifier is, is the tricky bit.
• When the view / node is output, lightbox2 displays the field as normal, but instead of setting the href attribute to the target image it sets it to the appropriate lightbox2_json path
• When the link is clicked, lightbox2 makes an ajax request to lightbox2_json and uses the path info to gather the settings from the view / field config (possible?) and outputs the data appropriately.
• Lightbox displays the data in a lightframe - to prevent the screen overflow issue

The above solution could probably be improved, and may not even work, but just wanted to get ideas flowing. The advantage to this method is that it allows other lightbox content to continue working, and allows php layer more control over what's output (main advantage). In order for the php layer to retain control over the output, Lightbox2 needs some sort of ajax request to retrieve the data - but the main problem is giving the lightbox2_json page the data needed to identify the field to be displayed.

One possibility for the lightbox2_json path definition could be lightbox2_json/view/$viewname/$fieldname/$fieldvalue or (lightbox2_json/ccknode/$content_type_name/$fieldname/$fieldvalue for non-views) where $fieldvalue is e.g. image filename or other identifier of the triggering field (e.g thumbnail). Not sure about this, just throwing it out there.

There could be a small time delay in loading the content via ajax, but it shouldn't be any worse that what's there already. In addition lightbox2 preloads the previous / next images in a group, so navigating between images in a group isn't too slow - we can re-use that same js code here.

Thoughts?

I tried to implement this and I'm having a problem...

I am getting this error after I created the lightbox2 field type, saved & submitted the form and then tried to go back to the form:
In the fields area:
Broken/missing handler Lightbox text

In the form area:
Error: handler for lightbox2 > doesn't exist!

I have the patch attached

I think it's to do with the following code in lightbox2_handler_field_lightbox2:

    $form['field'] = array(
      '#type' => 'select',
      '#title' => t('Fields'),
      '#options' => $fields,
      '#default_value' => $this->options['field'],
      '#weight' => -10,
    );

I don't know the reason why, but when you remove that code or change 'field' to a different name, e.g. 'myfield', then the error no longer appears.

The Live Preview in the views module is replacing the tokens with the correct field values, but the actual page that I want to display it on isn't replacing the tokens. So it looks like this [field] blah blah [field] instead of hello blah blah hello or something to that degree. Let me know if more information is needed. Here's the patch.

Works fine on test. When using token replacement, remember that all token fields must be loaded before your field.

Other than that, the select list for target field should use the human-readable names of the field, not the machine name.

Needs work. It works to a certain extent. Using the tokens I can successfully load other fields in the lightbox.

So I created a node view in which I put the node title and it's associated imagefield in the view. I excluded both of these fields from the display. I then added a lightbox trigger field and set the 'title' field to be the trigger and using the replacement tokens, got it to load both the title and the image in the lightbox. When clicking on the first trigger field, it correctly loads the title and images associated with the first node. When clicking on the second trigger field, it also loads the title and image of the first node, and not the second node.

It'd also be nice if you could configure the lightmodal size and grouping as described at http://drupal.org/node/276378 but that's a non-blocker.

Cheers,
Stella

Got it working to some extent, but with a bug -- given a table view of thumbnails (and other excluded fields) the popup lightbox window contains fields for the first image, regardless of the thumbnail clicked. The source code contains right data (in a div with 'display: none;') for all other thumbnails, but these are not displayed.

Grouping options would also be great.

Hi, this looks like it could fix my problem. I have a Jcarousel showing image thumbnails and short captions, any of which launch a lightbox slideshow with larger versions of all the images from the carousel. I would like to use the node title and body as a caption in the lightbox (the body text is short). Is it possible to do this using the patch at #6, and should I apply it to the latest dev? I'm using D6 with views 2, imagecache, CCK imagefield and panels 3, the site is still in development at: http://213.175.197.130/~northern/

Any info would be much appreciated, to avoid rushing in to another dead end ;-}

Hi Crell,

I've just signed on to help Stella as a co-maintainer of lightbox2

I applied the patches to my test site, drupal 6.13 with cck, views, image assist, imagefield, imageapi, imagecache and filefield.

I am getting this fatal error when I try to activate the patched version of lightbox2:

atal error: Class 'views_handler_field' not found in /opt/lampp/htdocs/drupal6/sites/all/modules/lightbox2/lightbox2.module on line 9

Are their other modules that I should install? Or any other configurations that I need?

Thanks,
Tracy

The previous patch was ignoring the width and height from the settings.

Awesome patch everyone! I committed it with just one change to allow the user to specify whether or not lightbox grouping should be enabled.

Thanks!

Hi all,

I've been trying (without luck) to get a video Emfield to play in lightbox 2 from the media content type.

I was watching your work on this patch and since you added it to -dev, I tried it. But, I am getting this Drupal error on the view when it's run:

warning: Missing argument 1 for views_handler_field::get_render_tokens(), called in /var/www2/sites/all/modules/lightbox2/lightbox2_handler_field_lightbox2.inc on line 113 and defined in /var/www2/sites/all/modules/views/handlers/views_handler_field.inc on line 639.

I've cleared the Drual cache and the views cache.

I've attached my View as a file. The HTML in the page doesn't really make sense, with all the nested A links, as follows:

  <div class="views-field-lightbox2">
          <label class="views-label-lightbox2">
        Lightbox trigger:
      </label>
                <span class="field-content"><a href='http://ubu.emersonav.local/node/106 #lightbox-popup-1'  rel='lightmodal[|width:600px;height:400px]'><div class="filefield-file clear-block"><div class="filefield-icon field-icon-video-x-ms-wmv"><img class="field-icon-video-x-ms-wmv"  alt="video/x-ms-wmv icon" src="http://ubu.emersonav.local/sites/all/modules/filefield/icons/protocons/16x16/mimetypes/video-x-generic.png" /></div><a href="http://ubu.emersonav.local/sites/default/files/video/Wildlife.wmv" type="video/x-ms-wmv; length=26246026">Wildlife.wmv</a></div></a>
                <div style='display: none;'><div id='lightbox-popup-1' class='lightbox-popup'></div></div></span>
  </div>
  </div>

What am I missing?

[[Aside: I have to say this is disappointingly difficult. Wouldn't it all be much easier to add a CCK display field like "lightbox2:thumb->video" so all you have to do is set the display field to get your emfield to play in a lightbox? Just like you have for all the lightbox2: x->y types...]]

-- glen

I love the idea of this new feature but I have run into some problems no doubt operator difficulties. when implemented the lightbox trigger displays the filefield as it is selected in its field settings(generic files or lightbox:iframe). if I click on the file name it takes me to the file displayed in a pdf viewer on a different page. if I click on the pdf icon it starts loading lightbox but then gives me the broken image in the lightbox. if there is something I am missing please let me know. do I need to give it a special class? pdfs should work in this setup I assume so let me know as soon as you can so I can deliver this sweet feature to my client.

when trying to add a lightbox trigger i get the following error. any help would be appreciated. i have the following config:
FileField 6.x-3.2
Image 6.x-1.0-alpha5
ImageAPI 6.x-1.6
ImageCache 6.x-2.0-beta10
Lightbox2 6.x-1.x-dev (2009-Oct-02)

Subscribing. I strongly believe this feature is a big plus! :)

subscribing

Would be and interesting option

I tried to sum up the current situation (for me) at: http://drupal.org/node/697624

The views trigger works well for me, but it lacks of some features I needed.
I added two configuration options, at first a parsed field where one can specify a title of the object to show (like the title of images).

Second, I modified the way the group is caclulated. I wanted to show a view with arguments and ran into problems, so I included the view arguments into the grouping string. I added an configuration option to set the grouping string manually.

Feel free to integrate this into cvs, I am a drupal developing novice.

sry, something with attachment went wrong

Beautiful job on this new feature! I'm using it in Lightbox2 6.x-1.x-dev.

However, when using it with grouped items (built with a view), I'm getting a flash of the old content with every new item. For example, I open up item1 in the lightbox, then click the forward arrow to go to item2. After the transition to item2 is done, I still see the item1 content for a brief second, then it flashes to item2.

If I click the trigger for item1, then close it, then click the trigger for item2, it works fine. So the content div doesn't seem to be refreshing properly when grouped. Ideas?

Patch from comment #32 committed. Thanks!

Thank you for all this work, the integration with CCK is extremely important for the future.

Main problems encountered:

1. Labels CCK fields are not kept.
2. No resizing of the popup to fit the format of the image. It's the whole purpose of graphic Lightbox, in my opinion.
3. Fields should be sent in the "caption" and keep only the image in the "popup".
4. No more «loading» sign, blank screen for a while?

subscribe

I'd love the trigger field to trigger a lightbox instead of a lightmodal.

I see on line 144 in lightbox2_handler_field_lightbox2.inc file that the rel=lightmodal is set but if i change this to "rel=lightbox" the images aren't found and the grouping ie. {$group_name} groups the images by the whole view name rather than grouping the multiple images that were uploaded for each node(by node id). I do have "Automatic generated Lightbox group" checked but if I uncheck it, there's no grouping at all.

@mikiciuk this issue is closed. Please create a new issue if you'd like.

Documentation for this functionality is found at http://drupal.org/node/735424