CMS Dynamic Page: Youtube/Vimeo like Static Pro Gallery

Got it! I’ll make that change! I feel like I’m far from it working, but grateful for your patience and ongoing help!

1 Like

No worries! :slight_smile:

As for repeater vs gallery I think we have an issue, not a big one but the code at the moment is for an image element (play button or thumbnail) in a repeater, so we’d have to change that for a pre-made Wix gallery element that you are using, I don’t know how they work… it’s something we could try to figure out of course, but a repeater would work for how we currently have the code!

I’ll re-explain the naming ID wise because it might be getting a little muddled up with me not explaining well, of course you can change these but I’ll explain what mine are in the original code:

For the dynamic page:
gallery = the repeater or the media gallery
play = the play button in my repeater… we’d have to work out what this would be or an alternative for the media gallery you’re using… it’s sort of one whole element I guess?

videobox = I think we have worked out this is the name of the lightbox on the left hand panel, if not it’s the Lightbox element you already changed to videolightbox, make sure both these are the same until we work it out for sure!

And now for the Lightbox itself:

lboxvideo = the ID I gave to the dataset added to the lightbox, so dataset1 or whatever the default ID is

video = the video element

As far as I know the idea of the code is that we are populating the lboxvideo dataset with the context imported from the click we made on the dynamic page, that’s how I understand it works, lol, but it’s probably more complicated than I really understand! :stuck_out_tongue:

And I am certain we are not far off getting it working for you!! :smiley:

Keep going, i will monitor :face_with_raised_eyebrow:

1 Like

@russian-dima I just added a Wix gallery element out of curiosity and see the equivalent click action would be:
gallery_itemClicked

How would you amend the code to use that instead of the onClick of an image in a repeater (how I have it currently) to open the lightbox? Or is it not worth trying to do it that way? Of course also making sure the settings of it = nothing happens when you click the premade gallery image, otherwise it will open it’s own popup as well as the Lightbox!

I’m happy to change to a repeater! I’ll do that now and circle back

1 Like

In this case we’d probably use the same principle but just use an image element for the thumbnail but with no repeater, connect this to Thumbnail 1 and send it to a lightbox called video 1 with the video in there connected to the video 1 url.

Then copy this process for Video 2 with a lightbox called video 2 and so on… it’d be a little longer way of doing it but totally workable! If we end up going that route I’ll make an example for you on how this could work, it’s easier to see it sometimes than me explaining badly! :stuck_out_tongue:

1 Like

I think you are to fast, by providing a solution using a repeater.

If i would be you, i would first check all given possibilities in a …

a) ordinary-GALLARY
b) Wix-Pro-Gallary.

Which options do i have regarding the GALLERY and Wix-Pro-Gallary API ???
a) https://www.wix.com/velo/reference/$w/gallery
b) wix-pro-gallery-backend - Velo API Reference - Wix.com

Maybe it is worth to read first all about the wix-pro gallary first.

Like i always say → there are always many different solution-possibilities.

You even could generate your own CUSTOM-GALLARY → using a HTML-Component or Custom-Element, but this would go to far.

So, we will stay on the 3-current possibilities…
a) ordinary-GALLARY
b) Wix-Pro-GALLARY
c) REPEATER

Yes, you found currentItem → https://www.wix.com/velo/reference/$w/gallery/currentitem
Looks already promissing, don’t it?

Or this one…

You can GET / SET and ADD → ITEMS…

You can even get the GALLARIES CAPABILITIES…

I would say → first take a deeper look onto all given options, before trying to reconstruct a gallery by usage of a repeater.

EDIT: Some additional informations about gallaries…

  1. Randomizing ENTIRE image gallery - #6 by christopherb
  2. Autoplay for "Slider Gallery (Sphere)" - #2 by mrtobor
  3. Pass Dynamic Pro Gallery Dataset Item to Lightbox
  4. Expanding a pro gallery doesn't work - #8 by russian-dima
  5. Pro Gallery won't direct to dynamic page
  6. Problem Loading Dynamic Gallery - #24 by alinbaho
  7. …and some more…

I would collect all informations first.

1 Like

Awesome, thanks for the info! :slight_smile:

I forgot there is a difference between Gallery and Pro Gallery, I think we’re all talking about the Pro Gallery element in this instance! :smiley:

The reason I personally have always used repeaters for doing this premise is that I tend to have other info in each item of the repeater (a title and a date for example) so a repeater has always worked for me rather than a Pro Gallery.

Of course in this specific case a gallery could work out better so it’s interesting to think about this option as well as the others mentioned! :+1:

Take your time and do enough → brainstorming first. :wink:

1 Like

I think this is the way! I’m going to format 2 video thumbnails and titles in a container on the dynamic page. I’ll see how far I can get with your last instructions.

1 Like

I’m currently doing the same, but I’m going to call it a night and get back on it tomorrow if anything else comes up that we didn’t forsee but hopefully you’ll have it up and running without me anyway! :smiley: :+1:
Here’s how far I got with it, obviously something isn’t quite right but it’s a start! :stuck_out_tongue:

https://themusingsofmaars.wixstudio.io/codetest/imageversion

Latest detailed update, but not working yet. I created a new page to troubleshoot.

DYNAMIC PAGE
Dataset
I have a dataset connected to the page (#maleVideodataset)

Container
I created a 2x2 container with
thumbnail image one and play button 1 (1x1)
title 1 (2x1)

thumbnail image 2 and play button 2(2x1)
title 2 (2x2)

container id: #videoContainer

video cover thumbnail 1: #imgVideoCover1
play vector image 1: #vectorImagePlay1
title 1: #textDemoTitle1

video cover thumbnail 2: #imageVideoCover2
play vector img 2: #vectorImagePlay2
title 2: #textDemoTitle2

The dynamic page thumbnails and titles connect to the following CMS dataset field id:
video cover thumbnail 1: #demoCoverImg
title 1: #videoReelTitle

video cover thumbnail 2: #demoCoverImg1
title 2: #videoReelTitle1

Javascript to Collapse & Hide Blank Fields
I have javascript written to hide and collapse any field (and the container and button) if the dataset field is blank:

$w.onReady(function () {
$w("#maleVideodataset").onReady( () => { 

       let item = $w("#maleVideodataset").getCurrentItem(); 

       // Demo Reel Button and Gallery
       if (item.demoCoverImg) {

          $w("#imgVideoCover1").show();

       } else {

          $w("#imgVideoCover1").hide();
          $w("#imgVideoCover1").collapse();                
  
       }

if (item.demoReels) {

          $w("#demoCoverImg").show();

       } else {

          $w("#videoContainer").hide();
          $w("#videoContainer").collapse(); 
          $w("#videoContainer").hide();
          $w("#videoContainer").collapse();  		   
  
       }
	
    } );

});

Lightbox Page
I need a lightbox to open the corresponding dataset field when the thumbnail image or vector play button are clicked:
video URL 1 (dataset field): #video
video URL 2 (dataset field): #video1

I’m still unsure about how to do that. At this point, I will follow any formatting guidelines. I’m happy to create 2 lightbox pages to play video 1/#video and video 2/#video1

I’ve created a lightbox page:
name: videolightbox
page ID: #demoLightbox
lightbox: #video

Lastly, I need to replicate the same formatting for 3 other CMS Collections.

Please advise. At this point, I am happy to pay anyone who is willing to help me create this solution on this page, and I can implement on the other pages. Feel free to email me at katwillis@gmail.com

@russian-dima @themusingsofmaars

1 Like

I give priority to @themusingsofmaars to solve this project-problem.
Let him get his CHANCE and prove himself.

How are going things so far here ?

hey @russian-dima, No progress on my end. Thanks for checking in.

1 Like

Not sure if you received it but I sent an email with my progress!