Need to create a video gallery

Hey Everyone,

is there something (plugin, snippet) that can manage video, similar to maxigallery?
I need to be able to generate thumbnails that when clicked pop-up a lightbox running the video.

I would do this by hand, but my client would like the ability to manage the video assets themselves.

thanks.

C

I am looking for the same thing bro. i’ll post if i find something interesting.

I was planning to do this some day, but I figured out that you need a lot of stuff installed on your server to make it work, are you planning to do something like the client would post anything an then it would get converted and thumbnailed or the client would just upload an flv video and a thumbnail?

The second one it’s pretty easy to do.

hey,

I am planning to use YouTube as the source of the video, which means the user needs to know how to use YouTube and have the video online. I do not think it’s such a hassle, and it’s more visibility for your video anyways.

I will use Maxigallery to manage the videos so that it looks like the image gallery. The user will only have to specify the id of the video. I got insipred by the YouTube snippet. Don’t know if I will use it yet.

So basically I will have a page where you see all the thumbnails for the videos (you can get thumbnails directly from youtube at a hard-coded address) and then FancyBox will display the video when you click on the thumbnail. I am using fancybox for my pics as well and it is awesome.

I hard coded the whole thing and it works wonderfully. Now I just have to integrate it in Maxigallery. I will let you know when it’s online. SHould be by the end of this day, at least a working version.

Peace.

Here is a link to my video gallery.

http://www.prawdzik.ca/testingserver/FondationSemafo/index.php?id=30

I have a container document for my video gallery, and under it i create documents which will represent my videos. I fill the template variable tvYouTubeID with the YouTube video ID (example: for the http://www.youtube.com/watch?v=svg9Dx_ID5U video, the ID is "svg9Dx_ID5U")

I do not use Maxigallery for this because there aren’t really pictures in my galleries. To go through the children of the container document (i.e. the videos), I used Ditto. The container document has id 30, and the &dateFormat, &dateSource and sorting are needed because I want to show the pub_date of each video beside its thumbnail.



The &tpl is the following:


Notes:
1- the <a> is a link to the <div> that contains an embeddect flash movie.
2- as far as I know, the "class" parameter in the <a> has to be "fancybox".
3- use the "rel" paramater if you want to have a gallery of videos. you will be able to loop through the videos as you do with pictures. fancybox will group together videos with the same value for "rel".
4- the "title" parameter of the <a> is the text used for the video’s caption. insert any value you want as usual.
5- the img src is a static address where you can find thumbnails for your videos. there are a few thumbnails and i also found a bigger image, perfect for my needs. you resize it in CSS and the job is done.
- make sure the id of the <div> is the same as the #href of the <a>
6- the embedded flash movie is a bit of an annoyance, because i did not find a perfect solution. if you leave the <object> as is, the code will not validate xhtml strict but works great in all browsers. to have code that validates, you can use this code, which validates xhtml strict but does not work that well. once displayed by fancybox, the object seems on top of my navigation and close icons, which doesn’t work for me...



It is somewhat the same as the one produced by the YouTube snippet ([[YouTube? &id=`TOUTUBE_ID`]]), which doesn’t validate xhtml strict either:



Until I find a solution I will use the first solution, the non-validating but working well one. By the way, I am using Fancybox 1.2.1 , downloaded from http://fancy.klade.lv/home which comes with jQuery 1.3.2. You need these lines in your header as well.

<link rel="stylesheet" href=".....fancybox/jquery.fancybox.css" type="text/css" media="screen" />
<script type="text/javascript" src="...../fancybox/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="...../fancybox/jquery.fancybox-1.2.1.js"></script>
<script type="text/javascript" src="...../fancybox/jquery.easing.1.3.js"></script>

<script type="text/javascript">
jQuery.noConflict();
</script>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery("a.fancybox").fancybox();
});
</script>


This way the end-user only has to input a YouTube videoID and a description and it’s done. I’m sure you can use some snippet to make a front-end for this.

I am sure I can do many things better, but this is what I could come up with. Is this something like what you were looking for?

I just did this for a site containing podcasts and videos. Ditto was easy to set up and work. Biggerbrother’s solution is the exact same as mine except I didn’t use youtube. The client uploads their own video and podcasts.

I would like to do the same as you JWMSales but I really don’t know how. The clients and users need to register and then they can upload their videos on the site. Is this possible with MODx?

Just to say, that I’m working since April 2010 on a YouTube "integration" with a channel to a MODx Site, and will release it soon.

thanks, that’s nice. tested & a little customized to look cool.

There is a great thread about using a snippet that automatically pulls in videos from a Vimeo album. Works great...