Download & Extend

Creating a video gallery, from thumbnail to lightbox video

Project:Lightbox2
Version:6.x-1.9
Component:Miscellaneous
Category:support request
Priority:normal
Assigned:Unassigned
Status:closed (duplicate)

Issue Summary

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 !

Comments

#1

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

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

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

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

i am trying that, too

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

#6

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

did you manage to play a swf in lighbox?

#8

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

#9

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

Subscribing

#11

+1 o/

#12

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

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

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

#15

Hi superduperdan,

did you manage to find a solution to your problem?

Any help is greatly appreciated!

Thanks

#16

Hi,

I'm using Flowplayer with Lightbox2. I'm trying to play a flv video inside of lightbox. When click on a thumbnail image, lightbox opens up with Flowplayer but nothing gets played.

Has anyone been able to play video inside of Lightbox using Flowplayer?

#17

This solution works for me for "Flowplayer with Lightbox2"

I had also this kind of problem and found a patch here: http://drupal.org/node/369032

After inlcuding the path it was working.

Just make sure your path to the player begins with a "/" in the video options "/sites/all/modules/flowplayer/flowplayer/flowplayer.swf".

Now I'm struggeling with changing the layout of the embedded player. Everytime I change something the player does not show at all.

dexi

#18

hello,
i'm new to lightbox2 but I created a page where I displayed an image and it worked fine but when I changed the rel to equal lightvideo my youtube video would not play in lightbox. The video will work but it plays from youtube as a full screen and doesn't play in lightbox2. Does anyone know what is missing in my code and what I have to do to change this. Please write in details- this is new to me thank you
ericarasm@gmail.com

#19

ericarasm, I can't believe this worked, but I was able to wade through things and get 'er done:

relevant module topology:
Drupal 6
CCK+Views
Lightbox2
EmbedMediaField
JWPlayer 5.1 (just copied the included files to the public webroot, with exception to the readme.html file in that package)
FileField, ImageField and ImageCache
[I may have left out other dependencies, but you get the picture, right?]

CCK, views, field environment:
I'm using two fields in a content type and using both in a view (view is set for grid, in my case): 1) an embedded-video field provided by the EmbedMediaField module and 2) a generic text field for a caption under the video in the view. A note: when you go to Content Management -> Content Types -> Manage Fields (for the video CCK that you've set up) -> Configure (on the actual video field), you can select Embed Custom Thumbnails -> Allow custom thumbnails on this field. The custom thumbnail will be attached to this content type, eliminating the need for a separate user-defined field (a development path I thought might be necessary from some of the above posts and a path I was happy to abandon). You can also set your thumbnail size at this point while you are still in Configure.

EmbedMediaField:
Site Configuration -> Lightbox2 -> Video Settings: check enable video support, player path: /player-viral.swf

Views (and this is the part that brought it all together):
Inside of Views, when you are editing (configuring) that video field under Fields
uncheck Exclude from Display
uncheck rewrite the output of this field (unless you a special need to do so; specifically, using rewrite and the rel="lightbox" were not necessary for me)
and go to the bottom under Format:
Lightbox2: Image Thumbnail -> Full Size Video

Worked for me like a charm. Now I have a smallish thumbnail in my "gallery", opening up to a nice sized video that plays automatically without having to go to another page and back and all that jazz.

#20

for #19, Just in case you want to find module EmbedMediaField, it locates here http://drupal.org/project/emfield which is not easy to find since it not follows the name rule.

Truyenle

#21

It appears the emfield only works with embed code or a url to a video. I'm using the video_module so that a user can upload a video. I couldn't figure out why I was not seeing the option Lightbox2: Image Thumbnail -> Full Size Video. That is only available to an EmbedMediaField.

Currently, I'm using the rewrite and the url to file in views in order to use the lightbox player. However, all of my mov files are playing with quicktime player instead of flowplayer. I've changed every setting I can find to make sure that flowplayer is the default player for all video file types. I've changed this within Lightbox2>video settings, Video>players, Swftools>file handling, Videofield>general settings - yet they still play in quicktime player inside of the lightbox window. I thought maybe flowplayer couldn't handle the mov files, but I can check the actual content node and the mov plays inside of flowplayer there. I'm using:

Views and CCK
Swftools with Flowplayer3
Video Module
Embedded Media Field
Lightbox2
FileField, ImageField and ImageCache

Any suggestions from anyone that's gotten this to work?

#22

After some more looking into I've found that the lightbox_video.js file appears to override whatever player you have set in your Lightbox2 General settings based on the type of file it is. In my case, I'm wanting to stream H.264 mov files using flowplayer. The videos play fine in flowplayer, but when I try to use lightbox it looks for quicktime player. So, I thought maybe that it would use the player that I've specified in the Lightbox2 General settings if it did not find the quicktime player. So, I removed qt player completely and tried again. Now, it will not play the video - just asking me to install some missing plugins. So, I'm wondering what the purpose of specifying a path to the video player is if the lightbox_video.js file is just going to overwrite based on the type of file.

Is there a workaround that anyone knows without tampering with the lightbox source code? Or is this an issue that is being addressed in the current development module?

#23

Hi,

in case anyone else is having problems I was pointed to this tutorial http://www.waldbeek.com/blog/drupal-flash-video-lightbox-tutorial which helped. It's written about SWF Tools but it seems to be a generic solution as I'm using the JW Player Module.

If after following the instructions you find that your video is downloading instead of playing then under the Lightbox2 video settings 'FLV Player flashvars:', add the following : "autoplay=1&playerMode=normal".

Hope all is well,

Evelyn

#24

Does it possible with Flash Node module? then we dont have to install/create so many fields,module. Just need few settings under views but I still failed to do can you help what am I missing?

#25

Hi Yuki,

really sorry but I don't know anything about the Flash Node module, I only know how to do this with SWF Tools and JW Player Module for Drupal.

I hope you find a solution.

Take care of yourself,

Evelyn

#26

Status:active» closed (duplicate)

duplicate of #369032: Flowplayer FlashVars not working If you're still having problems with the new release then please open a separate issue for each.