I've created a photo gallery by setting up a grid in a Div and inserting picture elements into it. I've also got some files that create modal windows that I've installed with this site AFTER export. But for it to show the pic in a modal window, I have to edit the html and make the link target for each pic be - target="slideshow_multi_links".

I don't know how to get to the html of an SD site until after it's exported. And in SD the only options for "Target" are the standard selections: self, blank, parent, top.

Is there a way for me to make the target of each picture link be what I want it to be (target="slideshow_multi_links") inside the SD program?

I can go do it manually after export. But that will take longer and it will mean that each time I update this page or gallery IN the SD program and re-export it, all those custom target changes will be overwritten and I'd have to go do them again manually.

I wish for those of us not afraid that there were a way to access the html before export.
But for now, anyone know of any workarounds IN the SD program?

Since you didn't provide a link or any screenshot of what you are doing, I don't kn ow if this is relevant, but take a look: https://eikweb.com/sharing/sd3-gallery/. This has been done in SD, BEFORE export.

Hey Inger, Thanks for that!

Yes! if there is a way to do it ALL within SD then I'd rather do that anyway!
How do I do this? It says to save it as a component select the 'gallery-wrapper' container.
How do I do that? In the Chrome 'Inspect' panel somehow? I've never done that.

But is this all done with the Attributes? Any links to some instructions somewhere? Or Wayans original post?

Go to my sharing library, you find the URL in my signature. Check the bottom left, before all the building blocks, there you find a link to my how-to regarding components. I have tried to explain properly, but if you still find it 'Double Dutch', then just ask. And you don't need to fire up Chrome's inspect thingie, it's all done in SD3.
And yes, it is connected up using attributes. If you are asking if Wayan made an original post about this, I really don't remember if he did. But in that same Sharing library you'll find my project file which you can download, then you can study it, how it is all pieced together. You find it under 'Galleries', by the name of 'Image gallery (ZF)'

You are awesome! I will dive into it shortly!
Thanks!!!!

I'm glad to be of some help!

Inger,
I am LOVING this!!! I've got one of my gallery pics all worked out (from looking at how you did yours) and it opens in a modal window and everything! Thank you SO much for sharing this with me! I learn best by having something to look at and follow along with.

Three questions:

1) I want to adjust the opacity of the reveal-overlay. When I use the Chrome inspect tool it shows me that there is a div with the class 'reveal-overlay', and I can adjust the opacity (temporarily) in there. But I don't see that class on any div IN SD3 and so I don't know how to go about adjusting it. Can you help me with that?

2) After I get the opacity how I like it and my first pic (img1) is all complete and working properly, do I just duplicate the container with .pic1 (and all it's children) and go in and change the pic and numbers to create the modal for all the other pics in my gallery?

3) So saving the entire '.gallery-wrapper' container as a component will let me use it again on other sites but I'd just have to go in and set which pics will be used, how many, and then change any css details if I want to?

Your 3rd question first: Yes, you can save the 'gallery-wrapper as a component and use it wherever you want. But don't forget to grab also the css and js from the Page manager. That is why I very often recommend saving as a theme, then in a component you don't get the stuff in the Page manager included.

2nd Q: The 'gallery-wrapper' has two main subfolders, 'thumbs-holder' and 'hidden'. The former contains the thumb size images, the latter has the larger images. When editing the gallery, you need to copy the picture links from the 'thumbs-holder', and the folders pic1, pic2 etc in 'hidden'. If it is of no importance what the image files are called, you just copy those folders and change out the images. Otherwise, you need to go into each folder and change name, ID, attributes (where they point to) etc.

1st Q: The class you are looking for is '.reveal' You find it in 'hidden', in each of the 'pic' containers. You just need to change the opacity on one of them, they all have the same class name and will therefore change accordingly.

I hope this helps.

Thanks for all the answers. It's so cool of you to help me out!
But on the 1st question......

There is a container with a class of '.hidden'
Inside that is a container with a class of '.pic1'
Inside that is a container with a class of '.reveal' with an id of #img1

The only one of these that has any CSS is the 3rd one ('.reveal'). BUT.... if you change the opacity for that div and in that class, it changes the opacity for the actual picture itself.
I'm looking to change the opacity of the rest of the screen - the part that partially hides your web page while looking at the modal window pic.

If you will open your flower gallery, click on one to get the modal window up, and then right-click to get the Chrome Inspect tool you will see that there is an entire DIV that we can't see in SD3 and it has a class of '.reveal-overlay'
And then over in the right-side styles pane of the Inspect tool you can see:
.reveal-overlay {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1005;
display: none;
background-color: rgba(10, 10, 10, 0.45);
overflow-y: auto;

And if you adjust that 0.45 (opacity) at the end of the background-color you will see what I'm trying to be able to set IN SD3.

Apparently SD3 and it's attributes (or something) sets this up for us when we do a modal window. But it's not anywhere I can see it and adjust it.
I know I can do it after export by opening it in notepad before I transfer the files to my host. But I'm trying to figure out how to get to it in the SD3 program. You have brought me SO far toward being able to do it all inside the program and I hope I can get to this last little thing.

OK, I see. I misunderstood earlier.
The .reveal-overlay is a Foundation class and is styled in the file foundation.css. It is not advisable to start editing the Foundation's css or js files that come with the programme, and besides, you would have to do that after export. And to make it more difficult still, the programme uses the minified version, foundation.min.css, where it it hard to find what you're looking for.
What you can do instead is, overriding it by taking this bit of code:

and edit the rgba values to your liking, and then paste it into the Head section in the Page manager (Pages - Manage Project).

Another thing I discovered is, that the current css and js in the Page manager most likely come from an earlier use of this gallery and actually has nothing to do with the gallery itself. So you can safely delete them. It's a good while since I made this building block, so I don't remember why I didn't remove them at that time.