how can I obtain a lightbox effect on image click in HTML page?

tazarbm · Apr 28, 2023

Hi,

I am trying (well, it's almost done) to create a landing page to promote in Google Ads, and I'm using an old-school HTML editor named Kompozer and I can't figure out for the life of me how to obtain a lightbox effect on image click in that HTML page. Well, it's not like I know coding to be able to figure this out, which is why I'm asking for help in the first place

More specifically, I would like to know what to type into the "value" field to make the image open up a lightbox effect within the same page (which will be named index.html) when it gets clicked on.

This is what I'm referring to:

Thanks in advance for any help!

Setox · Apr 28, 2023

This can be done with CSS & JS :

https://www.w3schools.com/howto/howto_js_lightbox.asp
It would have been easier if you use Bootstrap.

tazarbm · Apr 28, 2023

Setox said:
This can be done with CSS & JS :

https://www.w3schools.com/howto/howto_js_lightbox.asp
It would have been easier if you use Bootstrap.

I did come across that page yesterday when I researched this topic, but I didn't know what to do with that code so I clicked away

Can you tell me what to introduce in that field? That's all I need to know, really... unless... I might need to create different files and put different coding in each file in order to make this field work, in which case I'll just give up on using lightbox...

Setox · Apr 28, 2023

tazarbm said:
I did come across that page yesterday when I researched this topic, but I didn't know what to do with that code so I clicked away

Can you tell me what to introduce in that field? That's all I need to know, really... unless... I might need to create different files and put different coding in each file in order to make this field work, in which case I'll just give up on using lightbox...

The "onclick" value only trigger the script which do the job, The truth is I do suck at giving instructions, maybe @RoiBox or @BlurryBit could help.

tazarbm · Apr 28, 2023

Setox said:
The "onclick" value only trigger the script which do the job, The truth is I do suck at giving instructions, maybe @RoiBox or @BlurryBit could help.

all good, thanks for tring to help

Gogol · Apr 28, 2023

Lightbox effect as in an image popup?

Dopious · Apr 28, 2023

I use the Featherlight Wordpress plugin, BUT they have a version for html sites to, take a look at their github, maybe you can find something useful.

https://github.com/noelboss/featherlight/#usage

tazarbm · Apr 28, 2023

BlurryBit said:
Lightbox effect as in an image popup?

I'm just trying to enlarge the image that people click on so they can see it better, the only requirement is that they stay on that page, I don't care if it's popup, lightbox, iframe, etc as long as they're still on page after they close the enlarged image

RoiBox said:
I use the Featherlight Wordpress plugin, BUT they have a version for html sites to, take a look at their github, maybe you can find something useful.

https://github.com/noelboss/featherlight/#usage

thanks

Gogol · Apr 28, 2023

BlurryBit said:
Lightbox effect as in an image popup?

For the onclick, you could do something like:

Code:

document.getElementById('popup').style.display='block'

Here's a jsfiddle (looks crappy... but nothing you can't fix with a little css...) that shows how to..

https://jsfiddle.net/ej8mapdz/22/

LilMosey · Apr 28, 2023

Something like this?

> https://codepen.io/gschier/pen/kyRXVx

tazarbm · Apr 28, 2023

LilMosey said:
Something like this?

> https://codepen.io/gschier/pen/kyRXVx

yep, that's exactly what I'm looking for. But that coding scares the hell outta me

BlurryBit said:
For the onclick, you could do something like:
document.getElementById('popup').style.display='block'

it does work (and I might use this in the absence of a better option, but... is it possible to make the image open up in a smaller window instead of occupying the entire screen, and also have transparent background so that people can see that they're still on the same page? If that's not possible, no problem, but I thought I'd ask just to make sure

)

Veil123 · Apr 28, 2023

tazarbm said:
yep, that's exactly what I'm looking for. But that coding scares the hell outta me

it does work (and I might use this in the absence of a better option, but... is it possible to make the image open up in a smaller window instead of occupying the entire screen, and also have transparent background so that people can see that they're still on the same page? If that's not possible, no problem, but I thought I'd ask just to make sure )

Hey hey... Reach out to me via PM and if it is not anything that u would want to 'hide', send me the html to have a look at it and I'll help you out with the code (will edit it accordingly for you). Cheers.

tazarbm · Apr 28, 2023

Veil123 said:
Hey hey... Reach out to me via PM and if it is not anything that u would want to 'hide', send me the html to have a look at it and I'll help you out with the code (will edit it accordingly for you). Cheers.

it's a page that I'll advertise in Google Ads, so I'd rather not share it

But thanks, your good deeds have traveled far and wide across the forum, I've read about them a few days ago and I would have no problems sharing with you anything else. Just not this particular page, I hope you can understand

Gogol · Apr 28, 2023

tazarbm said:
it does work (and I might use this in the absence of a better option, but... is it possible to make the image open up in a smaller window instead of occupying the entire screen, and also have transparent background so that people can see that they're still on the same page? If that's not possible, no problem, but I thought I'd ask just to make sure )

May be something like this?
https://jsfiddle.net/03y96atn/34/

tazarbm · Apr 28, 2023

BlurryBit said:
May be something like this?
https://jsfiddle.net/03y96atn/34/

yep, exactly like that

And yeah, I did see this link in your previous reply, but I didn't bring it up because I didn't know what to do with the code... I mean, I assume I have to add it in the source code of the file, but the thing is that I have 8 different images for which I need to do this, and I don't know how to handle them all with one piece of code... Oh well...

Gogol · Apr 28, 2023

tazarbm said:
yep, exactly like that

And yeah, I did see this link in your previous reply, but I didn't bring it up because I didn't know what to do with the code... I mean, I assume I have to add it in the source code of the file, but the thing is that I have 8 different images for which I need to do this, and I don't know how to handle them all with one piece of code... Oh well...

I got it! So the popup content needs to be dynamic as well. Just went outside for some exercise. Once I am back, I will modify the fiddle so that it works for multiple images. Stay tuned for 2-3 hrs may be.

tazarbm · Apr 28, 2023

BlurryBit said:
I got it! So the popup content needs to be dynamic as well. Just went outside for some exercise. Once I am back, I will modify the fiddle so that it works for multiple images. Stay tuned for 2-3 hrs may be.

I don't know what you mean by "dynamic", but you know better anyway, so I'm not disputing it

Take your time, I'm not in a rush yet, I need to have this page ready in 2 days, and this is the only thing that's left to do...

Gogol · Apr 28, 2023

Alright so here is the updated demo that can take any amount of images..

Code:

https://blurrybit.github.io/lightbox.html

Source code

Code:

https://raw.githubusercontent.com/BlurryBit/blurrybit.github.io/master/lightbox.html

This is the part you need for styling the lightbox ( put it in your html head, inside the style tag, as shown in the example)..

Code:

https://github.com/BlurryBit/blurrybit.github.io/blob/f0ac13ecd9f39c21977f5f1b137f8107b3b0242d/lightbox.html#L50-L72

As for the script, just copy and paste this section

Code:

https://github.com/BlurryBit/blurrybit.github.io/blob/f0ac13ecd9f39c21977f5f1b137f8107b3b0242d/lightbox.html#L75C1-L115

No need to add any onclick to the images. The code will work out of the box, given you have a div with class name stage, and inside you will have div > img, as shown here.

Code:

https://github.com/BlurryBit/blurrybit.github.io/blob/f0ac13ecd9f39c21977f5f1b137f8107b3b0242d/lightbox.html#L121-L146

Hope that helps.

tazarbm · Apr 28, 2023

BlurryBit said:
This is the part you need for styling the lightbox ( put it in your html head, inside the style tag, as shown in the example)..

https://github.com/BlurryBit/blurrybit.github.io/blob/f0ac13ecd9f39c21977f5f1b137f8107b3b0242d/lightbox.html#L50-L72

Hi,

Do I need to copy all 149 lines, or just the ones you've highlighted?? Because the code in my file doesn't correspond to the one you've written (which is normal I guess), but since it's different code I'm afraid that I'll break something if I don't insert the right code in the right position, I know from experience that one single ">" or trailing slash can mess up everything, so I'd rather ask twice before doing any change.

Actually, here's a screenshot of how my file's source code looks like, maybe it's easier for you to pinpoint me to the exact line that I should add your code before / after:

I've blocked the ad copy (content, niche, product) with the black boxes so that it can't be seen, hopefully it won't be an issue for you to still be able to guide me

Gogol · Apr 28, 2023

tazarbm said:
Hi,

Do I need to copy all 149 lines, or just the ones you've highlighted?? Because the code in my file doesn't correspond to the one you've written (which is normal I guess), but since it's different code I'm afraid that I'll break something if I don't insert the right code in the right position, I know from experience that one single ">" or trailing slash can mess up everything, so I'd rather ask twice before doing any change.

Actually, here's a screenshot of how my file's source code looks like, maybe it's easier for you to pinpoint me to the exact line that I should add your code before / after:

View attachment 252815

I've blocked the ad copy (content, niche, product) with the black boxes so that it can't be seen, hopefully it won't be an issue for you to still be able to guide me

Just add the style and script like highlighted, in your header. Make sure your image container has the class stage, and that should be it. Really hard to judge from that screenshot lol.

how can I obtain a lightbox effect on image click in HTML page?

Elite Member

Elite Member

Elite Member

Elite Member

Elite Member

Moderator

Elite Member

Elite Member

Moderator

Elite Member

Elite Member

Elite Member

Elite Member

Moderator

Elite Member

Moderator

Elite Member

Moderator

Elite Member

Moderator

Main Menu

Marketplace

Making Money

BlackHatWorld

Other