- Oct 28, 2020
- 11,663
- 14,616
no idea what "class stage" means, but I'll research it tomorrow... actually, I'll take care of the entire thing tomorrow when my head is clear. Thanks a bunch for the help
how can I obtain a lightbox effect on image click in HTML page?
- Thread starter tazarbm
- Start date
-
- Tags
- html java event lightbox onclick
- Sep 10, 2010
- 11,822
- 26,663
Open the file with Visual Studio Code, you will see things like:no idea what "class stage" means, but I'll research it tomorrow... actually, I'll take care of the entire thing tomorrow when my head is clear. Thanks a bunch for the help
Code:
<div class="something">abc</div>Best of luck!
sam55
Power Member
- Dec 5, 2013
- 578
- 892
It means you need to add a <div> element with class="stage" and put your image inside that div like this:no idea what "class stage" means, but I'll research it tomorrow... actually, I'll take care of the entire thing tomorrow when my head is clear. Thanks a bunch for the help
HTML:
<div class="stage">
<div>
<img src="/images/image-1.jpg" alt="" />
</div>
</div>- Oct 28, 2020
- 11,663
- 14,616
I added the style and script, but nothing happens (as expected since I don't have the stage class).
But the thing is that I have no idea where to put that class because my images are within a table, so I have a 2c4r table (as you can see in the screenshot below) and each one of the 8 images is within its own cell, it's the only content in that cell actually... so where does this "div class stage" thing gets inserted then?
I know it looks limiting, but it's the only thing that I got used to when editing HTML, and if I have to learn how to use VSC (whatever that thing is), I might as well start learning CSS, python, C++, and all other programming languages, and this is pointless for me since I've never been a tech guy. I simply don't get coding and period! It's not my thing... I can easily teach everyone from toddler to old man what's right to do, just don't put me anywhere near coding, I'm not cut out for it...Open the file with Visual Studio Code, you will see things like:
<div class="something">abc</div>vscode will make everything easier for you. Don't use that gui based thing you are using. It looks seriously limiting.
Anyway, here's the screenshot with how the source code of my table looks, please tell me where to insert that div class thing and I'll be finally done with this page that took me nearly 3 days to edit
EDIT: oh, I almost forgot... is it possible for the click to open up a different URL instead of the image's URL?? This is not very important, so if it can't be done, no problem. But I had to ask
- Sep 10, 2010
- 11,822
- 26,663
I added the style and script, but nothing happens (as expected since I don't have the stage class).
But the thing is that I have no idea where to put that class because my images are within a table, so I have a 2c4r table (as you can see in the screenshot below) and each one of the 8 images is within its own cell, it's the only content in that cell actually... so where does this "div class stage" thing gets inserted then?
I know it looks limiting, but it's the only thing that I got used to when editing HTML, and if I have to learn how to use VSC (whatever that thing is), I might as well start learning CSS, python, C++, and all other programming languages, and this is pointless for me since I've never been a tech guy. I simply don't get coding and period! It's not my thing... I can easily teach everyone from toddler to old man what's right to do, just don't put me anywhere near coding, I'm not cut out for it...
Anyway, here's the screenshot with how the source code of my table looks, please tell me where to insert that div class thing and I'll be finally done with this page that took me nearly 3 days to edit
View attachment 252865
May be just do <table class=“stage”> as you don’t have a div.
- Oct 28, 2020
- 11,663
- 14,616
yep, it workedMay be just do <table class=“stage”> as you don’t have a div.
Also, probably that you didn't see the edit on my previous post, but I was wondering... is it possible for the click to open up a different URL instead of the base image?
- Sep 10, 2010
- 11,822
- 26,663
Hmmm you mean a different image for the actual preview right? You can do that in many ways.. for example change the img element to have the big image as data-attribute, such as:yep, it worked
Also, probably that you didn't see the edit on my previous post, but I was wondering... is it possible for the click to open up a different URL instead of the base image?
Code:
<img style="border:0px; width: 300px; height: 193px;" alt="" src="images/batch_6.jpg" data-src="images/batch_6_big.jpg"/>and then change the script like so (replace the before with after)..
before (line 80 in the demo):
Code:
img.src = image.src;after
Code:
img.src = image.dataset.src;That should do it.
Last edited:
- Oct 28, 2020
- 11,663
- 14,616
you read my mind
and do, it did...change the img element to have the big image as data-attribute, such as:
<img style="border:0px; width: 300px; height: 193px;" alt="" src="images/batch_6.jpg" data-src="images/batch_6_big.jpg"/>
and then change the script like so (replace the before with after)..
before (line 80 in the demo):
img.src = image.src;
after
img.src = image.dataset.src;
That should do it.
Thanks for all the help, and...
- Sep 10, 2010
- 11,822
- 26,663
My pleasure man. Enjoy!
- Oct 28, 2020
- 11,663
- 14,616
oh, I will be enjoying it...