How to do modal gallery in v4? - Post...

User 2699991 Photo


Registered User
4,782 posts
Online Now

Andrea La Vigne wrote:
Wayan Jaya wrote:


Here is a link to a video for a modal gallery using site designer 4 foundation wireframe

https://youtu.be/z_trbSc_Dfs

I clicked on the link, and it said the video had been removed by the user. Take care, & I hope the fire affecting you is contained quickly, and you don't have any damage to your property! :(

Yes I took it down after having 63 views I assumed everyone interested in looking had seen it.
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … an%281%29/
User 2368890 Photo


Registered User
24 posts

Inger wrote:
Try my sharing gallery, URL in my signature. Last time I looked it was online, it opened, and it is not for sale! :lol:

I have a modal gallery, it is simply called 'Image Gallery'. Maybe you can use that. The image sizes can be changed.
I made that gallery after getting the idea from Wayan, and I know that he has 'refined' it further. He may pop in here before you know it...

OK, Inger, so I downloaded your modal/image gallery file, saved it as a component, and added that to the site I'm working on. I changed the images to the drawings the artist wants on her website. (I've only done the "graphite.html" page with this so far.) But I can't figure out how to make the pop-up image appear, or to add the title & description that will show with the picture. (Ideally, I would have a caption with the painting title, size, medium, & sale price.) I assigned id's to each of the first 2 images on the page, just to test. I tried different settings for the href in the Elements pane, including using the id for the picture--with hashtag, of course. No go. The best it's given me so far is, when I preview it in Firefox & click on the image, it jumps to the page header. :( I even tried changing the target attribute to "_blank." That opens the whole gallery in a new tab. I tried to attach the file I'm working on (as a zip file), but both times I've tried posting, it's returned a 500 error. If you need to see the file, I'll try again. Hope you or someone can point me in the right direction! :/ Thanks in advance!
User 2699991 Photo


Registered User
4,782 posts
Online Now

Andrea La Vigne wrote:
Inger wrote:
Try my sharing gallery, URL in my signature. Last time I looked it was online, it opened, and it is not for sale! :lol:

I have a modal gallery, it is simply called 'Image Gallery'. Maybe you can use that. The image sizes can be changed.
I made that gallery after getting the idea from Wayan, and I know that he has 'refined' it further. He may pop in here before you know it...

OK, Inger, so I downloaded your modal/image gallery file, saved it as a component, and added that to the site I'm working on. I changed the images to the drawings the artist wants on her website. (I've only done the "graphite.html" page with this so far.) But I can't figure out how to make the pop-up image appear, or to add the title & description that will show with the picture. (Ideally, I would have a caption with the painting title, size, medium, & sale price.) I assigned id's to each of the first 2 images on the page, just to test. I tried different settings for the href in the Elements pane, including using the id for the picture--with hashtag, of course. No go. The best it's given me so far is, when I preview it in Firefox & click on the image, it jumps to the page header. :( I even tried changing the target attribute to "_blank." That opens the whole gallery in a new tab. I tried to attach the file I'm working on (as a zip file), but both times I've tried posting, it's returned a 500 error. If you need to see the file, I'll try again. Hope you or someone can point me in the right direction! :/ Thanks in advance!


The thumbnails need the attribute "data open| with the vale of the relevant modal window ID
the thumbnail;s don't nee #tag link but if you want to then that has to be the ID of the modal window too

To open the modal window so you can change the image add a caption whatever
go to the inspector tab & look for the relevant modal window (orange ID) it will have the eyeball icon with a strikethrough,, lick on the eyeball open it. do your editing hit the eyeball again and it will close it,, repeat as many times as required
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … an%281%29/
User 2140875 Photo


Registered User
364 posts

I am in search of a way to easily great a lightbox effect. Different paintings will be displayed and I would like to be able to click on one and have it pop-up to an enlarged version. Only on picture though. I don't want to have a slide show. Each individual painting would be clicked on to show only that one picture.

Right now I am using visual lightbox, but not getting the results I want.
Here is the site I am working on: https://africanwildlifebymichelle.com/

Thanks.
User 2699991 Photo


Registered User
4,782 posts
Online Now

Galen Garretson wrote:
I am in search of a way to easily great a lightbox effect. Different paintings will be displayed and I would like to be able to click on one and have it pop-up to an enlarged version. Only on picture though. I don't want to have a slide show. Each individual painting would be clicked on to show only that one picture.

Right now I am using visual lightbox, but not getting the results I want.
Here is the site I am working on: https://africanwildlifebymichelle.com/

Thanks.

So use the component reveal for each image
Set the small image attribute to "data open" value = ID of reveal style however you want replace image in modal with large image.

Then while you are at it I would give the paragraphs on the page some padding especially for mobile devices as on my phone the paragraph goes out of the viewport by a little bit making it hard to read 10 px padding left and right should do it
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … an%281%29/
User 2140875 Photo


Registered User
364 posts

Thanks for the tip Wayan. Not being to smart about all this stuff I tried what you suggested. When I use the Reveal component it inserts a text link rather than a picture link. When I try to change that it messes up the modal function. I can try putting a picture above the text link and still have the user click on the text rather than the picture.

Any other suggestions would be vey helpful.

While in SD4 I feel like I am in the cockpit of a Boeing 747 with no flight training under my belt!
User 2699991 Photo


Registered User
4,782 posts
Online Now

Galen Garretson wrote:
Thanks for the tip Wayan. Not being to smart about all this stuff I tried what you suggested. When I use the Reveal component it inserts a text link rather than a picture link. When I try to change that it messes up the modal function. I can try putting a picture above the text link and still have the user click on the text rather than the picture.

Any other suggestions would be vey helpful.

While in SD4 I feel like I am in the cockpit of a Boeing 747 with no flight training under my belt!


It's really simple, delete the text link. Change the reveal ID to something more easy (image1)
On the small image set it's attribute to "data open" and the value to the ID of the reveal component which you just made.

PS the smaller image doesn't need to be a picture link, just a normal image will do it.
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … an%281%29/
User 2699991 Photo


Registered User
4,782 posts
Online Now

Galen
I don't want to appear like I'm teaching someone to suck eggs but I think that one needs to open a new project for learning how to fly a 747 rather than try with a real project. That way one can master the learning experiment and if mistakes are made simply close the new project without saving it and then open another new one and try again.
Also embrace and enjoy the learning without the stress of worry about breaking the real project.

Then when you have mastered the controls you will be good not only for 747's but piloting space X to mars .
I am in Bali again not back home until Sunday when I can do a demo video about reveal unless you have already mastered it or someone else has something for you.

Good luck in the meantime
Wayan
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … an%281%29/
User 187934 Photo


Senior Advisor
20,181 posts

I would also recommend making the gallery in a blank project then make it into a Component.;)
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 2140875 Photo


Registered User
364 posts

Wayan,

A demo would be greatly appreciated. Whenever it is convenient for you can do it. Thanks for all your suggestions.

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.