ProGallery w Dataset to open 2 types of pages

Ask the community
, , , ,
1

Question:
How can I make items in a ProGallery connected to a Dataset open one of two types of page, depending on the size/complexity of the work.

Product:
I’m using Wix Studio. I don’t need to be, but I am.

What are you trying to achieve:
I’m creating my own portfolio site. I have a ProGallery connected to a Dataset where I have 2 groups of work that I’d prefer to showcase together (so long as this works). One type of work is video where I’d include a long description and credits etc. So likely leading to a Dynamic Page. The other type of work is simpler, a single image or short video, less to look at and read, so I feel like it’s not worth jumping to a whole new page and returning to the portfolio over and over again. So likely a Lightbox or any type of overlay (needs to be Dynamic) where we don’t leave the portfolio.

What have you already tried:
I’d tried looking this up on YouTube, Wix tutes, and other sites, but it never answers this question exactly.
I’m not a coder as such, ChatGBT made some suggestions that looked promising, but it’s just not working.

Additional information:
I’m not a Wix nor Web designer, be simple on me. :slight_smile:

2

This would require a bit of coding, here’s how I’d do it:

  • Setup a database field through which you determine the operation performed when clicking the image (e.g. clickAction (text), or redirect (boolean))
  • In the gallery settings, set the click action to ‘Nothing Happens’ and disconnect the links from the dataset
  • Create the dynamic lightbox (for example purposes I’ll call it ‘galleryImage’) and set the triggers to not automatically open on the page

As for the code, I’ll be spinning up a small demo, and send it once it’s functioning

3

So here you can see a working demo, two pictures leading to URLs, and two opening a lightbox

Here’s my setup:

‘Images’ database:

  • mainImage (Image) field
  • title (Text) field - Unique
  • redirect (Boolean) field
  • link (URL) field for pages with redirect set to true

Gallery Actions page:

  • pro gallery #gallery
    • Connected to dataset, links disconnected, click action is none

Gallery Image lightbox:

  • Image #image

Code:

Gallery Actions page
Gallery Image lightbox

4

Hey there @DeanAyalon , thanks so much for your effort here.

So I didn’t realise I had to turn off all the automatic link actions! So that’s one issue fixed.

Something is not working and I’m a tad confused, since you spread your instructions over two messages and they’re slightly different.

In your first message you said to have a database with " (e.g. clickAction (text), or redirect (boolean)) ". I assume you meant I need both fields, not one OR the other.
If I’m not mistaken, I think your code looks at the boolean first, if unticked it reads “clickAction”, if ticked looks at “link”?
Anyhow, in your step by step in message 2, it seems you didn’t mention “clickAction”.

So now its opening the Lightbox fine, but it isn’t working dynamically. I’m seeing the same content no matter which image I click. How do I make a “dynamic” lightbox? There’s no specific interactive/dynamic lightbox to add in Wix Studio.

The link option is not working, nothing seems to happen which I click a "redirect"ed item.

I could’ve got some naming wrong, but I don’t know how to tell, as I don’t know what the code is doing exactly.
I’m guessing you can’t give me your temp project can you, would that require access to your actual account? If so, forget that idea.

Here’s a list of all elements’ Names and ids, and associated settings:

• Dataset Collection: Collection is “Portfolio”, Dataset name is “Portfolio dataset”, Dataset ID is “dataset1Portfolio”.

• Dataset fields:

  • Text field “Title”, ID “title”
  • Image field (for thumbnail in gallery): “Main Image”, ID “mainImage”
  • Image field (for larger image in lightbox): “Project Main Image”, ID “image”.
  • URL field “link”, ID “link”
  • Text field: “Click Action”, ID “clickAction” (unsure what to put in fields, or if needed)
  • Boolean field: “redirect”, ID “redirect”

• Lightbox: “Gallery Image”, “galleryImage”

• Image in Lightbox: ID is “image”

• Pro Gallery: ID is “gallery”. Settings “When clicking on an item” set to “Nothing happens”. The gallery is connected to PortfolioDataset but Connections “Links connect to” is set to “Not connected”.

Sorry for the long message, just trying to include everything!
Thanks!

5
  1. No, I meant either or, my apologies for the confusion. In the example, I used a Boolean field called ‘redirect’ which told me either to redirect or not. I proposed an alternative ‘clickaction’ text field in case you wanted to, in the future, extend the functionality into more than two options, with click action specifying which to take.

My code looks at the redirect field, if it is ticked, redirects to what’s in the links field, and if unticked, opens the light box.

  1. The dynamic content on the light box is generated using code, I have provided it in the second link. Basically, when opening the light box, the page also transfers the data of the image clicked, and then the light box uses that data to set the image source before the page (light box) loads

  2. Not sure what is wrong in your code without looking at it, feel free to share as much as you’re comfortable.
    As for access to my demo website, I can definitely help with that - I can duplicate it and transfer to your account

The long message is fine, the settings look alright, probably a code error

6

Legend!

OK, now that I know that detail, and that you can actually show/send me you sample project, let me compare yours with mine to see if I can figure out what’s going wrong.

Failing that, I’ll take the next step of sharing it with you. Thanks so much.
I’m still only working with a skeleton, just a couple of wireframe templates I’m tinkering with to get functionality to work. There’s nothing sensitive data on my “site”. yet. No design or art or anything.

How does transferring your sample to me work?

7

I will need your Wix account email address, I’ll duplicate the site and send you a site collaboration invite

8

Just the email address for my Wix log in?
Sure, but I’ll delete it from here as soon as you we’re done, I prefer it not remain public.

[deleted]

9

You can remove it then, I got it, and the invite will be sent in a moment

For future private data, you may contact me through dev@deanayalon.com if you’d prefer

10

It seems the code was not replicated along with the site
Give me a minute, I’ll add it again

Code added and working :+1:

11

Got it thanks. I’ll look into it.
Thanks for your email too.
I’m probably being paranoid about the email address, but whatever!
Appreciate your help!

12

Hello again Dean.
So I got one step further, but it’s still not opening URLs.
Also, when I returned to your shades project this morning it’s not working properly. It’s functioning the same as mine, when I preview the links don’t open. I tried the Site History, and also re-input the code you gave me, it still doesn’t work. :frowning:

Could I take up your offer to share my project with you?
Is it the “Add Collaborators” option?

Cheers,
Paul.

13

Using preview mode, the wixWindow.to() function which redirects you is disabled, so it can only be tested on the live site or using a preview deployment (which is not really available unless you use the git integration, which I would not recommend to you)

You may indeed share your project with me, though keep in mind giving me collaboration access would allow me to edit and modify the site. I do not intend to do so, but it is something to be considered.
I assure you I mean no harm, but I do still recommend duplicating your site whenever allowing someone else access to it

Also worth noting that if the error can be perceived simply by looking at the code, you may want to simply send the code here and avoid the whole collaboration access deal

Either way, I will gladly help :slight_smile:

To check if the code is running, you can put console.log('redirecting to' + img.link) before the wixWindow.to method

14

ProGallery’s integration with the dataset allows for streamlined management of content across two distinct page types. This feature enhances the flexibility and efficiency of displaying various content forms, catering to diverse presentation needs. By leveraging this setup, users can optimize their galleries and data-driven pages for better user engagement and organization.

15

Oh I see, well that’s unhelpful during the wireframing phase!
I don’t know enough about error logging, I’m pretty new to Wix, and even coding.
My extent of knowledge is basic Java in After Effects.

I’m happy to send the site for collaboration, as I said it’s only a bare skeleton where I’m trying to get the functionality to work before I apply any design to it.

I’ll send it now.

Are you a website creator/designer or just a lover of all things geeky? Because I’m getting bogged down by other elements in the platform too.

Paul

16

I’m a software engineer, I don’t particularly build Wix websites, but I do have extensive experience with it from back in the day when my father (The original owner of this account) used to build websites, and I used to do his coding.

I am a lover of all things geeky, and you’re welcome to ask anything, worst case is I won’t know ¯\_(ツ)_/¯

As for the debugging, when you enter the preview mode, the bottom part of the screen opens as a console output window (or, you can press the bottom toolbar to open it)
That window outputs the text you specify in console.log, warn and error methods, and allows checking in preview mode what is actually in your data and variables

So for example, changing the redirection part of my code to this:

if (img.redirect) {
    console.log('Redirecting to ' + img.link)
    wixLocation.to(img.link)
}

Would output ‘Redirecting to <url>’ to the console, before redirecting you

I have just accepted the collaboration invite, and will be taking a look at your site shortly