By nyleve101 on

Hi,

I would like to implement the following in a view: an imagecache thumbnail, which when clicked triggers a lightbox with a larger version of the image or a video if one has been uploaded.

Suggestions have been outlined in this thread http://drupal.org/node/462450 but unfortunately none of these solutions work. I’m after an effect similar to this http://www.artwaves.de/landmark but with the option of a larger version of the image appearing if no video is uploaded.

I am using the following modules:

JW Player 5
Views 2
Lightbox 2
CCK filefield
JW Player Module for Drupal

Views Fields:
field_video_advert_fid
field_image_product_fid

If this can be achieved by rewriting a fields output in a view that would be great but I'm open to other solutions.

Thanks,

Evelyn

⋅ Categories: Drupal 6.x

Comments

jvizcarrondo’s picture

jvizcarrondo commented

Maybe this link can help you

Drupal Flash Video Lightbox Tutorial (http://www.waldbeek.com/blog/drupal-flash-video-lightbox-tutorial)

Juan

nyleve101’s picture

nyleve101 commented

Hi Juan,

as always thanks for your help. The tutorial was successful in getting the video to play in a lightbox where a video existed the issue is that sometimes there is only an image without a video and in these cases I need the thumbnail to trigger a lightbox that contains a larger version of the image. Any ideas?

Thanks again for your help,

Evelyn

nyleve101’s picture

nyleve101 commented

Hi Juan,

I was thinking- it seems unlikely that an either or rule can be achieved with an html rewrite. Would it be possible to rewrite the views tpl you helped with a few weeks back to achieve the result? I’ve included the code below.

The logic would be as follows:

An image cache thumbnail, which when clicked produces a video in a lightbox or a larger version of the image in a lightbox if there isn’t a video.

// Get file ids
global $base_path;

$fid_video = $row->{$field->field_alias};

// Find real field alias for image field

$fid_image = false;

$suffix = "field_image_product_fid";

foreach($row as $key => $val)
    if (substr($key, -1*strlen($suffix)) == $suffix)
        $fid_image = $val;

// If we got some data, display it.

if (!empty($fid_video) || !empty($fid_image))
{
    $node = (object)array();

    $node->field_video_advert[0] = field_file_load($fid_video);
    $node->field_image_product[0] = field_file_load($fid_image);

    // Check if we got an image

    if ($node-> field_video_advert[0]['filepath']!='')
    {
   
     // Displays the media player with an Imagefield preview
     $flash_vars['file'] = $base_path . $node->field_video_advert [0]['filepath'];
     $flash_vars['image'] = imagecache_create_url('views_videos', $node->field_image_product[0]['filepath']);     print theme("jwplayermodule_render_player", 'views', $flash_vars);
    }
    else
      print theme('imagecache', 'views_videos', $node->field_image_product[0]['filepath']);
}

Thanks again for your help so far.

Evelyn

jvizcarrondo’s picture

jvizcarrondo commented

I think you can do something like this

      if ($node-> field_video_advert[0]['filepath']!='') {
       // Displays the media player with an Imagefield preview
       print '<a href="' . $base_path . $node->field_video_advert [0]['filepath'] . '" rel="lightvideo" title="my caption">'  .  theme('imagecache', 'views_videos', $node->field_image_product[0]['filepath']) . '</a>';
     }
     else
       print '<a href ="'  .  $base_path .$node->field_image_product[0]['filepath']  .  '" rel ="lightbox">'  . theme('imagecache', 'views_videos', $node->field_image_product[0]['filepath']) . '</a>';
     }

hope that helped you
Juan

nyleve101’s picture

nyleve101 commented

Hi Juan,

thanks- that worked perfectly. My only question is how do I control the height and width of the image and video in the lightbox?

Thanks again!

Evelyn

jvizcarrondo’s picture

jvizcarrondo commented

you only need to change rel:
video rel="lightvideo" change by rel="lightvideo[|width:400px; height:300px;]"
and image rel ="lightbox" change by rel ="lightbox[|width:400px; height:300px;]"
for more information, you can see link http://drupal.org/node/144488
Juan

nyleve101’s picture

nyleve101 commented

Ah ok! Thanks Juan, that did the trick! Thanks for the link.

Your help has been very much appreciated!

Evelyn