Easiest way to create a "lightbox"...

User 470292 Photo


Registered User
19 posts

Wayan Jaya wrote:

The one for earthquakes fully works,, only the next button works to open the volcanos one.it's just a quick demo to show that one can put another set of images inside a modal window that opens another modal window, just to give an idea
I'm not making a full finished project,just a demo
works fine on all browsers from over here.

Hello Wayan,
The only thing is that the thumbnails are disappearing after you click on them and you see them "big". They should be kept visible inside the modal window. Then that's it. :-)

Many thanks,

Ricardo
User 2699991 Photo


Registered User
5,392 posts
Online Now

Ricardo wrote:
Wayan Jaya wrote:

The one for earthquakes fully works,, only the next button works to open the volcanos one.it's just a quick demo to show that one can put another set of images inside a modal window that opens another modal window, just to give an idea
I'm not making a full finished project,just a demo
works fine on all browsers from over here.

Hello Wayan,
The only thing is that the thumbnails are disappearing after you click on them and you see them "big". They should be kept visible inside the modal window. Then that's it. :-)

Many thanks,


Ricardo


That was done deliberately because once your visitor has seen the second big image from the second thumbnail they needn't keep going backwards & forwards. But then that is up to you what & how you do it if you want keep all the thumbs then do so,
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:

That was done deliberately because once your visitor has seen the second big image from the second thumbnail they needn't keep going backwards & forwards. But then that is up to you what & how you do it if you want keep all the thumbs then do so,


I would like to keep the thumbnails, i.e., do not make them disappear. Could you send me the RSD source or tutorial for this please?

Many thanks,

Ricardo
User 2699991 Photo


Registered User
5,392 posts
Online Now

Ricardo wrote:
Wayan Jaya wrote:

That was done deliberately because once your visitor has seen the second big image from the second thumbnail they needn't keep going backwards & forwards. But then that is up to you what & how you do it if you want keep all the thumbs then do so,


I would like to keep the thumbnails, i.e., do not make them disappear. Could you send me the RSD source or tutorial for this please?

Many thanks,

Ricardo


Open a modal window in the normal way

keep it at class "full" "reveal"
delete the on-line image paragraph if you don't need it
in the container "full" "reveal" insert the element "subgrid"
make the subgrid the width that you require
delete or keep the top subgrid row/column (for a title or something if you want)
in the first column on the second subgrid row, make it around 7 or 8 spans,,, this one is the wrapper for the larger image

insert the larger image give it a % width of around 90% left/right margin auto auto (this just give a bit of breathing space around the image for the next previous arrows to sit in comfortably )maximum width =none

In the second column on the second row (right hand one) set the span to whatever number is left from 12 (7 spans = second column = 5 spans etc) you can play around with these widths as you please until you think it's looking good,,, insert picture-links (as many as you want thumbnails for set the images to whatever width you want.

BOOM there it is, the triggers next/previous etc are the same in the video's already up (ID names etc) (data open etc)

Get your first one set up, then duplicate the container "full" "reveal" as many times as you have thumbnails,.

For the next modal window for the next main thumbnail select the "row containing the first modal window & DUPLICATE THAT (remember to change all ID's to something else, they will be appended copy-1 etc.

change the images accordingly & the modal window trigger (data open / value etc.

Boom that's it again

I can do a video showing the process, but not until after the weekend (preparations are starting tomorrow for the Chinese New Year I will be too busy.until after that, then probably too hungover to be of much use for at least another day ):rolleyes:
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:


I can do a video showing the process, but not until after the weekend (preparations are starting tomorrow for the Chinese New Year I will be too busy.until after that, then probably too hungover to be of much use for at least another day ):rolleyes:


Hi Wayan, your help is exceptional! Thank you very much!
I will try to have a go - heavens help me! - but if you could do a video, even after the weekend that would be brilliant, because I will probably have more time to concentrate on this during the weekend as well.

Thank you so much for your help! (Here from the blighty :-) )
User 458539 Photo


Registered User
1,647 posts

Ditto here Wayan!
User 2622524 Photo


Registered User
97 posts

Have a look at this website, I currently use their Menu system and it is very easy to include in a RSD website

http://www.likno.com/jquery-builders/ex … php?p=lwmw

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.