Possible to insert a page when user clicks on gallery?

Backlight Customization
#1

When a user clicks on a gallery thumbnail, is it possible to then display a page of terms and conditions text with an “Agree/Decline” button BEFORE the gallery loads?

I do a lot of event work over the summer months, and I’m getting increasingly frustrated at the number of people who just screenshot images (complete with the watermark) and then use them on social media etc without paying for them. So I just want to make it very clear that we don’t allow this. I know I can’t stop it from happening!

#2

There may be a way of doing what you want, but I don’t have those skills.
But I did figure out something that sort of works. It doesn’t prevent viewers from going directly to albums via URL, but it does make is so first time visitors will see your message (a couple of times).

It involves using the Fancybox pop-up feature.

First, create a new page. I named mine “Access to event albums”. You can put this page in your navigation menu.

In the Page copy, add the code below. Note I have the “I agree” button leading to a top-level album set named “Events”. Use the url to the album set that your events live in. The “I do not agree” button leads to the site’s home page. Change as you see fit:

##Access to Event albums  
<button data-fancybox data-src="#popup">Click here for access to events</button>

<div id="popup" style="display:none;"><p> Image Usage </p><p>Images in these albums are for viewing only. Any usage, including usage on social media, requires a paid license</p>
<a href="/events"><button>I agree</button></a>
<a href="/"><button>I do not agree</button></a></div>

In your Events album set, you can then add the same licensing message.

Here’s my example:

#3

Hi Rod, that looks exactly what I need, thanks ever so much! I haven’t used Fancybox at all, I’ll have a play around on my test site.

#4

My original idea was to add the code for just the pop up box to the album template copy so that the pop up and overlay would appear when someone accessed the album.
But that didn’t work. There needs to be a trigger to invoke the pop up. Perhaps @Matthew or @Daniel will have an idea of how to do that.
(I did figure out how to make the “I agree” button dismiss the pop-up though.)

#5

Here’s more on creating and styling the pop up box

#6

That’s helpful, thank you!

#8

@rod_barbee , maybe use some css to hide the albums grid (eg, display: none;) per default. Then use your pop-up with <button onclick="showAlbum()">I agree</button>. Add some custom javascript code to show the album if one clicks on ‘I agree’.

Maybe something like this (note, I didn’t test this…)

function showAlbum(){
   var elem = document.getElementsByClassName("the__albumSet");
   elem[0].style.display = 'block'; 
}