Open Foundation 6 reveal modal via URL

User 2659348 Photo


Registered User
98 posts

I want to be able to send people links in emails. When they click the link it goes to the page of the photo gallery indicated in the link but also opens the modal for the exact image indicated in the link.

For instance, clicking on: arkansaslocalbusinessreview.com/multi_gallery.html#img11 should open the Multi-level decks gallery page AND open the modal for image 11 (img11). I mean, that's what I want to happen anyway.
And I need to set up each and every image to be able to do this incase I have to send a link to any image to someone. If there is a script I need to place, please tell me exactly where to place it (on the page? Or on a certain element? Head or footer?)
Thanks!

Knowing is half the battle
User 2659348 Photo


Registered User
98 posts

That URL is a domain I use to test things. It does not have an SSL. When I get the warning I just proceed anyway because I know it's my domain on my server. It's all I've got right now. If no one wants to "proceed anyway" then that's fine. But surely my explanation is clear enough? ....I've got a photo gallery where each pic opens bigger in a modal when clicked on. I just want going to it from a link to also open the page with the modal already open. I've searched the internet and found others asking this over many years but there were never any clear answers (or the answers applied to old versions of Foundation, etc.)
Knowing is half the battle
User 2699991 Photo


Registered User
3,752 posts
Online Now

Chris S Peterson wrote:
That URL is a domain I use to test things. It does not have an SSL. When I get the warning I just proceed anyway because I know it's my domain on my server. It's all I've got right now. If no one wants to "proceed anyway" then that's fine. But surely my explanation is clear enough? ....I've got a photo gallery where each pic opens bigger in a modal when clicked on. I just want going to it from a link to also open the page with the modal already open. I've searched the internet and found others asking this over many years but there were never any clear answers (or the answers applied to old versions of Foundation, etc.)


Hi Chris
It is possible to have a modal window "open" instead of hidden but then what's the point, one may as well just have a big image on a page,,, it's ether 1 or the other, it can't be selective, as in closed for people just browsing and open for others that have been sent, or at least I can't work out the code that could do that, but then I am no expert at JS stuff, I have forgotten more than I ever knew.

The Help You Need: When You Need It The Most
Website Design & Development
Website Renovations
Wayans' Theme Park
Watch Listen & Learn Video Tutorials
User 2699991 Photo


Registered User
3,752 posts
Online Now

It can be done but only for 1 modal per page, which would mean a new page for every modal that you needed to send a link to

The Help You Need: When You Need It The Most
Website Design & Development
Website Renovations
Wayans' Theme Park
Watch Listen & Learn Video Tutorials
User 2659348 Photo


Registered User
98 posts

This site about calendars does exactly what I want to do:
https://www.nativeoceanphoto.com/galler … 9-crop-750

Each modal shows some extra stuff in the address (.../#&gid=1&pid=blah, blah, blah). That extra info is the id of that modal image. So if it were my site and I wanted to send someone a link to an exact pic, I would go to it myself and copy the link (like I did with the example site above) and then email that link to them. When they click the link in my email, it opens the site and the modal. Then all modal controls work as normal.
Knowing is half the battle
User 2699991 Photo


Registered User
3,752 posts
Online Now

Chris S Peterson wrote:
This site about calendars does exactly what I want to do:
https://www.nativeoceanphoto.com/galler … 9-crop-750

Each modal shows some extra stuff in the address (.../#&gid=1&pid=blah, blah, blah). That extra info is the id of that modal image. So if it were my site and I wanted to send someone a link to an exact pic, I would go to it myself and copy the link (like I did with the example site above) and then email that link to them. When they click the link in my email, it opens the site and the modal. Then all modal controls work as normal.


That site uses some special JS $ jQuery code written by some super intelligent coder, it maybe available to purchase, or they have someone inside,

I am almost certain that something like that cannot be done WITHIN SITE DESIGNER without some real heavy 3rd party intervention.

I have however thrown something together, not exactly like that and it's going to take as lot of work and a lot of pages.

dear sirs
thank you for your enquiry about our "Decking Products"
Perhaps you would like to view a sample of our work which might be suitable

https://rsd-tutorialscom.coffeecup.com/decks1.html
or
https://rsd-tutorialscom.coffeecup.com/decks2.html
or
https://rsd-tutorialscom.coffeecup.com/decks3.html

should you wish to accept this mission, there can be a "How To" tutorial
please note this demo will self destruct in 3 days

The Help You Need: When You Need It The Most
Website Design & Development
Website Renovations
Wayans' Theme Park
Watch Listen & Learn Video Tutorials
User 187934 Photo


Senior Advisor
19,684 posts
Online Now

They are loading content through url variables. It's a fairly simple feature to do using a database to load the images and or information. Or if your data is static use id's or data tag properties.
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 2699991 Photo


Registered User
3,752 posts
Online Now

Eric Rohloff wrote:
They are loading content through url variables. It's a fairly simple feature to do using a database to load the images and or information. Or if your data is static use id's or data tag properties.


His images are static (in his resources) which when clicked open the relevant modal windows on the same page, so what would the variable data tag properties be that he should use on the URL to have the URL open choice of which modal window should be opened? (different url's open different modal windows

The Help You Need: When You Need It The Most
Website Design & Development
Website Renovations
Wayans' Theme Park
Watch Listen & Learn Video Tutorials
User 2659348 Photo


Registered User
98 posts

Eric, I'd love to hear more about using data tag properties! I will try to look it up in the meantime.

I found how that site does it. It uses js created by PhotoSwipe.com. I looked through the documentiation and it made my head spin - because I don't understand most js. This feature is important enough to me that I'll learn js if I have to.... if there isn't another way. But SURELY there is another way.
Knowing is half the battle
User 187934 Photo


Senior Advisor
19,684 posts
Online Now

Here's the library they are using.
https://www.photo.gallery/
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.