Easiest way to create a "lightbox"...

User 2699991 Photo


Registered User
5,392 posts
Online Now

Ricardo wrote:
Wayan Jaya wrote:

here is a link to the videos on youtube
the first one showing how to put sure modal window in & link to the thumbnails (if you already familiar with the process for that skip it
https://youtu.be/lwsO-8xXg_4

Part2 following on from part 1
https://youtu.be/52u3Yq0BiWo

part3
https://youtu.be/HtJST8JDn7c

have a look hope they help any problems let me know

Wayan

Thank you Wayan! That was extremely helpful.
Now to complicate things a little more, is it possible that in the pop up some thumbnails can be included?
For example, when you click on the pic, the pop up comes and inside I would have another 3 or 4 thumbnails of other pictures that could be viewed in the same pop up. It's sort of having the "orbit" but in the pop up? Does that make sense? Is possible to do?
Many thanks,

Ricardo

Sure is
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


A simple quick way to contact me
https://mawarputih.coffeecup.com/forms/contact-wayan/
User 470292 Photo


Registered User
19 posts

Wayan Jaya wrote:

Sure is

Do you have any tutorial that I can learn how to do it?
Many many thanks!
Ricardo
User 2699991 Photo


Registered User
5,392 posts
Online Now

Ricardo wrote:
Wayan Jaya wrote:

Sure is

Do you have any tutorial that I can learn how to do it?
Many many thanks!
Ricardo


The videos (last one )show the concept, its just a matter of inserting a container to hold images instead of the next/previous button links, then linking the images to the container holding the larger image.
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


A simple quick way to contact me
https://mawarputih.coffeecup.com/forms/contact-wayan/
User 2699991 Photo


Registered User
5,392 posts
Online Now

Ricardo wrote:
Wayan Jaya wrote:

Sure is

Do you have any tutorial that I can learn how to do it?
Many many thanks!
Ricardo

Are you wanting to put some thumbnail images from the original thumbnails or new thumbnails (say different views of the larger image) do you want all the thumbnails images in the reveal to open on top of each other ? then when close the reveal go back to the original reveal image which then has the next/previous arrows?

It's difficult to picture (pun intended) what you are trying to accomplish & why)
How about a slideshow for each reveal image showing the different views of the same image (if thats the sort of thing you are doing
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


A simple quick way to contact me
https://mawarputih.coffeecup.com/forms/contact-wayan/
User 122279 Photo


Senior Advisor
14,649 posts
Online Now

I was just sitting here wondering about the same...
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 470292 Photo


Registered User
19 posts

Wayan Jaya wrote:

Are you wanting to put some thumbnail images from the original thumbnails or new thumbnails (say different views of the larger image) do you want all the thumbnails images in the reveal to open on top of each other ? then when close the reveal go back to the original reveal image which then has the next/previous arrows?

It's difficult to picture (pun intended) what you are trying to accomplish & why)
How about a slideshow for each reveal image showing the different views of the same image (if thats the sort of thing you are doing


It's the latter. I want to put new thumbnails, as you said, different views of the larger image. So these thumbnails will nly be visible when you first click on an image and have it enlarged. When you close it you just go back to the main page as it is now in your videos.
So, using the example on your video, your first pic is a guy drawing a face. You click on it a and it is enlarged. Then I would like it (when enlarged) to also show next to it on a vertical, thumbnails showing different views of that large picture, where the user could click and select which one to enlarge. Once the user is done with it, close it and is returned back to the page (as it is now in your videos).
Does that make sense? I guess it is what you mentioned above that it would be a slide show, but inside this "lightbox".
What is the easiest way to do it?
Many thanks!!!
Ricardo
User 2699991 Photo


Registered User
5,392 posts
Online Now

Once the user is done with it, close it and is returned back to the page (as it is now in your videos).
Do you mean the original thumbnail page or the modal window page so that they can open another view of the image in the modal window
is it essential that the secondary thumbnails are vertical or can they be horizontal
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


A simple quick way to contact me
https://mawarputih.coffeecup.com/forms/contact-wayan/
User 470292 Photo


Registered User
19 posts

Wayan Jaya wrote:
Once the user is done with it, close it and is returned back to the page (as it is now in your videos).
Do you mean the original thumbnail page or the modal window page so that they can open another view of the image in the modal window
is it essential that the secondary thumbnails are vertical or can they be horizontal

Hi Wayan,
The modal window, I guess is the pop up window like a "lightbox"?, if so, then answering your question, when they close the modal window they return to the original thumbnail page.
For each of the pictures in the original thumbnail page, there will be 3 or 4 thumbnails in the modal window to select (and only there these new thumbnails will appear).
Ideally I would like vertical thumbnails but if that's not possible (or it is easier) then horizontal is fine.

Many thanks again!!!

Ricardo
User 2699991 Photo


Registered User
5,392 posts
Online Now

Ricardo wrote:
Wayan Jaya wrote:
Once the user is done with it, close it and is returned back to the page (as it is now in your videos).
Do you mean the original thumbnail page or the modal window page so that they can open another view of the image in the modal window
is it essential that the secondary thumbnails are vertical or can they be horizontal

Hi Wayan,
The modal window, I guess is the pop up window like a "lightbox"?, if so, then answering your question, when they close the modal window they return to the original thumbnail page.
For each of the pictures in the original thumbnail page, there will be 3 or 4 thumbnails in the modal window to select (and only there these new thumbnails will appear).
Ideally I would like vertical thumbnails but if that's not possible (or it is easier) then horizontal is fine.

Many thanks again!!!

Ricardo

the problem with vertical thumbnails is at the lower viewports, not going to look good
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


A simple quick way to contact me
https://mawarputih.coffeecup.com/forms/contact-wayan/
User 2699991 Photo


Registered User
5,392 posts
Online Now

have a look at this
http://rsd-tutorialscom.coffeecup.com/index.html

only the first 2 thumbnails working

the first one opens with the additional thumbnails which when clicked opened the larger image ,,, which when closed goes back to the modal window so you can select the second thumbnail etc,,, seems to me to be a lot of work,,for the visitor,, personally I think better to just have a link that says something like "VIEW ALTERNATE IMAGES which would then open a modal window with the alternate one with a next & previous button
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


A simple quick way to contact me
https://mawarputih.coffeecup.com/forms/contact-wayan/

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.