Creating a video gallery, from thumbnail to lightbox video

DjebbZ - May 14, 2009 - 11:50
Project:Lightbox2
Version:6.x-1.9
Component:Miscellaneous
Category:support request
Priority:normal
Assigned:Unassigned
Status:active
Description

Hello guys

I'm working on a video gallery and I can't find the solution to my problem, after many tests.

Based on a custom content-type "Video", with a title, a .flv filefield and a thumbnail imagefield, I'm creating a view to display all the video of the website. I want to display the thumbnail image (resized with imageCache), then on a click play the video with Lightbox effect. I know it's been done, so I'm confident a solution exists. The view is a node-type view. I retrieved the video field as the "path to the file" and excluded it from the display, so I can use this path to write my own ouput of the thumbnail field, which is :

<a href="[field_video_fid]" rel="lightvideo[Videos]">[field_thumbnail_fid]</a>

So the link is correct, but on the click it starts displaying the lightbox during half a second then show the flv file inside the browser as text, with undecipherable caracters. I can display the video directly without any Lightbox effect, with the "as Flash video" format, but I found no way within a lightbox...

Modules used :

  • Drupal 6.12
  • Lightbox2 1.9
  • CCK last -dev (because of the Flash player)
  • Views 2.5
  • SWF Embed 1.0
  • Flashy last -dev (no official release yet, but stable)
  • getId3 1.2 (last release - used to retrieve video size)

Maybe my method isn't correct, or I missed a detail. If I used Flashy, it's because the video are self-hosted (light traffic, own videos, free player). Please help !

#1

DjebbZ - May 15, 2009 - 06:44

Ok, now for some unknown reasons - maybe a "flush all caches", documentation reading so the link is better written now, and many more tests with views - the flash appears within a lightbox normally, but I have no playback...

I think I found out why : when viewving the node (node/id) without lightbox, the html for the flash player looks like this :
<object type="application/x-shockwave-flash" data="/skyzone/sites/all/modules/flashy/videoPlayer.swf" height="240" width="320"><param value="true" name="allowFullScreen"><param value="maintainAspectRatio=true&amp;video=http://localhost:8080/[client-name]/sites/default/files/videos/cheezipuffs.flv" name="flashvars"></object>
It's embedded within <object> markup, thanks to SWF Embed module.

But within the lightbox, through the view, the code changes to :
<embed type="application/x-shockwave-flash" src="/skyzone/sites/all/modules/flashy/videoPlayer.swf?file=http://localhost:8080/[client-name]/sites/default/files/videos/jumps_3.flv" id="flvplayer" name="flvplayer" bgcolor="#ffffff" quality="high" wmode="transparent" allowfullscreen="true" height="400" width="600">

Does anybody know how to alter this behavior ? Or know a simple solution to display a few (max. 10) self hosted videos already converted to flv ?

#2

wilgrace - June 10, 2009 - 15:45

I'm trying to to nearly exactly the same thing, with the same install details - only difference is that I'm not using flash video, rather allowing .mov, .mpg etc, so the <object> issues above don't apply

Using the Image Attach field, I'm Rewriting the output of the field to:
<a href="[field_filefield_fid]" rel="lightvideo[Videos]">[iid]</a>
which is triggering lightbox, but then disappears and fails to play.

DJebbz, how did you rewrite your link to make it work? Any other Views tweaking needed?

#3

DjebbZ - June 18, 2009 - 08:55

Well, I didn't manage to make it... So now I'm displaying my videos one by one normally. Furthermore, I don't use SWF Embed + Flashy, I changed to SWF Tools + Flow Player 3.

You can specify the video player under Lightbox, maybe it works for the Flow Player 3 player run by SWF Tools ? I can't try, because the site's already online, but maybe you could give it a try.
Maybe it comes from the width and height not hard-coded in the output of the field : the Lighbox documentation talks about lightvideo[group|width:300px; height: 200px;].

Hope this helps

#4

wilgrace - July 4, 2009 - 13:08

Well, I managed to get it working (of sorts) after a lot of tinkering.

Now using SWF Tools and Flowplayer 3, as well as everything above

Referencing the relevant Filefields in Views > Fields with Format 'URL to File', and Exclude from Display

Then, using the image attach thumbnail, rewrote the output of the field to:
<a href="[field_videolink_value][field_filefield_fid]" rel="lightvideo">[iid]</a>

This is working well for me, thanks for your help man

#5

e-anima - July 28, 2009 - 17:59

i am trying that, too

flowplayer is not working for me. JW player does. any hints about the flowplayer3?

#6

wilgrace - July 29, 2009 - 15:34

No, I've given up on flowplayer and am now just playing my .mov videos in Quicktime within the Lightbox overlay. Not perfect, but still a pretty good experience wtih the overlay video from thumbnails

#7

e-anima - July 30, 2009 - 07:29

did you manage to play a swf in lighbox?

#8

wilgrace - July 31, 2009 - 14:55

I didn't try, I'm only using .mov. I'll try to test and report back

#9

michellepurestock - August 17, 2009 - 12:43

Hi DjebbZ

Would you mind posting a link to the site that you are building using these modules? I am looking for a solution that is very much the same as you are working on for my companies site.

Thank you.

#10

Yuki - September 2, 2009 - 13:09

Subscribing

#11

luco - September 11, 2009 - 21:32

+1 o/

#12

e-anima - September 22, 2009 - 09:22

i finally used LIGHTWINDOW and included it in my code. that was no problem. example: http://www.artwaves.de/landmark
works great and supports swf natively.

#13

DjebbZ - October 30, 2009 - 22:29

I should have answered long ago to #9. Here's the website, with videos displaying normally (I gave up about Lightbox) : www.skyzoneprod.com

#14

superduperdan - November 8, 2009 - 17:51

So I managed to get my thumbs linked to my FLV videos and trigger the lightbox.

Modules:
- Views
- SWF Tools: JW Player 4
- Lightbox2
- CCK

Views Fields:
1. Content: Video Upload: Excluded from display and set Format as URL to file. (make sure this field is above the View Thumb field)
2. Content: Video Thumbnail: Rewrite the output of this field:
<a href="[field_video_fid]" rel="lightvideo">[field_video_thumb_fid]</a>
Format: set to only display thumbnail image.

Test page: http://new.imedge.biz/testvideo

Issue:
When I click on the image thumbs in my gallery, the lightbox opens and the option to download my FLV appears.

Question:
How do I trigger the FLV to play in the lightbox using the Rewrite I have provided above? My player is JWPlayer 4

 
 

Drupal is a registered trademark of Dries Buytaert.