Search…

X3 Photo Gallery Support Forums

Search…
 
failax
Experienced
Topic Author
Posts: 88
Joined: 24 Apr 2012, 03:38

Youtube video gallery

17 Sep 2016, 14:35

Hello, 

I'm coming from x2 and I need to re create a youtube video gallery like this:

http://www.annamariapierangeli.com/inde ... e%20Clips/

I know that is no more possible to attach  a link to an image thumbnail, what it is possible to do now in x3?

Thank you very much
 
User avatar
mjau-mjau
X3 Wizard
Posts: 14452
Joined: 30 Sep 2006, 03:37

Re: Youtube video gallery

18 Sep 2016, 01:15

failax wrote:I'm coming from x2 and I need to re create a youtube video gallery like this:
http://www.annamariapierangeli.com/inde ... e%20Clips/

I know that is no more possible to attach  a link to an image thumbnail, what it is possible to do now in x3?
Actually, it's a very similar approach in X3, but a bit easier. It's different though since X3 doesn't use manually uploaded thumbnails like in X2, and the links apply differently.

Tutorial on how to create a Youtube gallery:

1. If you upgraded from X2, remove all tn_files inherited X2, as they have no function in X3.

2. Create a normal "gallery" in X3 from your preview images. This is generally done by going to the page -> gallery, and clicking "upload" to upload your images that represent the videos. Images uploaded should be normal size, since smaller "preview" images are created automatically by X3. If you only have the small sizes, that's ok.

3. Check the page in your website, and you should see a normal gallery. Unlike X2, you can also change gallery layouts from page settings -> gallery. I would perhaps recommend a block grid layout, or you can use justified and columns also.

4. Back in your panel page -> gallery tab, click the "pencil" icon top left, until you see the "edit" layout:
Image

5. Simply add your Youtube "embed" video links:
Image

6. Finally, since the special x3 popup window is not currently an option for image links, go to main settings -> custom -> custom javascript, and add the following code snippet:
Code
function x3_load_page(){
  $('.gallery').find('a[href*="youtube.com"]').attr('data-popup','');
}
Done! Check your Youtube gallery.

PS! In the future, we will add some feature to make it even easier to create a Youtube/Vimeo gallery, where thumbnails are actually loaded directly from Youtube.
 
failax
Experienced
Topic Author
Posts: 88
Joined: 24 Apr 2012, 03:38

Re: Youtube video gallery

18 Sep 2016, 08:46

It works perfectly thanks!How can I add autoplay setting in javascript?
 
failax
Experienced
Topic Author
Posts: 88
Joined: 24 Apr 2012, 03:38

Re: Youtube video gallery

18 Sep 2016, 08:59

A little problem..when i close youtube video, audio keeps playing the same.
 
User avatar
mjau-mjau
X3 Wizard
Posts: 14452
Joined: 30 Sep 2006, 03:37

Re: Youtube video gallery

18 Sep 2016, 09:16

failax wrote:It works perfectly thanks!How can I add autoplay setting in javascript?
I think you would have to add your links like this:
https://www.youtube.com/embed/G46ygBKsTZI?autoplay=1
 
failax
Experienced
Topic Author
Posts: 88
Joined: 24 Apr 2012, 03:38

Re: Youtube video gallery

18 Sep 2016, 11:45

mjau-mjau wrote:
failax wrote:It works perfectly thanks!How can I add autoplay setting in javascript?
I think you would have to add your links like this:
https://www.youtube.com/embed/G46ygBKsTZI?autoplay=1
Yes, thanks.
Another question, I dont' see appear on the image the title of the picture.
 
User avatar
mjau-mjau
X3 Wizard
Posts: 14452
Joined: 30 Sep 2006, 03:37

Re: Youtube video gallery

19 Sep 2016, 06:50

failax wrote:Another question, I dont' see appear on the image the title of the picture.
The title is part of your page gallery settings, and depend on the layout you are using ... I see you are using the "justified" grid layout for your videos? This layout only supports "captions" that overlay the images:
Image

For other layouts like "grid", you can add titles/descriptions directly in the layout:
Image