473,320 Members | 2,000 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,320 software developers and data experts.

how to click on image so view large

<img src="http://example.com/images/gallery_3.png" />
Oct 22 '13 #1
3 6414
Dormilich
8,658 Expert Mod 8TB
Lightbox ?
Oct 22 '13 #2
Sherin
77 64KB
Try This Code

Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html>
  2. <html>
  3. <meta name="viewport" content="width=device-width, initial-scale=1">
  4. <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
  5. <body>
  6.  
  7. <div class="w3-container">
  8.   <h2> Image Gallery</h2>
  9.   <p>Click on the images to display them in full size.</p>
  10. </div>
  11.  
  12. <div class="w3-row-padding">
  13.   <div class="w3-container w3-third">
  14.     <img src="img_snowtops.jpg" style="width:100%;cursor:pointer" 
  15.     onclick="onClick(this)" class="w3-hover-opacity">
  16.   </div>
  17.   <div class="w3-container w3-third">
  18.     <img src="img_lights.jpg" style="width:100%;cursor:pointer" 
  19.     onclick="onClick(this)" class="w3-hover-opacity">
  20.   </div>
  21.   <div class="w3-container w3-third">
  22.     <img src="img_mountains.jpg" style="width:100%;cursor:pointer" 
  23.     onclick="onClick(this)" class="w3-hover-opacity">
  24.   </div>
  25. </div>
  26.  
  27. <div id="modal01" class="w3-modal" onclick="this.style.display='none'">
  28.   <span class="w3-button w3-hover-red w3-xlarge w3-display-topright">&times;</span>
  29.   <div class="w3-modal-content w3-animate-zoom">
  30.     <img id="img01" style="width:100%">
  31.   </div>
  32. </div>
  33.  
  34. <script>
  35. function onClick(element) {
  36.   document.getElementById("img01").src = element.src;
  37.   document.getElementById("modal01").style.display = "block";
  38. }
  39. </script>
  40.  
  41. </body>
  42. </html>
  43.  
Oct 23 '20 #3
SwissProgrammer
220 128KB
Sherin,

Nice.


Ahtisham,

You might want to refresh the elements as soon as they are removed so that they zoom in each time that they are clicked. Currently they zoom in the first time, then after being clicked on and removed they simply show up without the zoom. Sherin gave you some nice code. Let us see how you create that new-zoom effect each time that the same one is clicked.

Thanks.
Oct 26 '20 #4

Sign in to post your reply or Sign up for a free account.

Similar topics

1
by: The Roys | last post by:
I want to be able to detect if an image has been right-clicked. I have 5 images in my program. If I Click the image it gets selected by my program. But I want to be able to Right-Click one of the...
29
by: lori3laz | last post by:
How do you disable the right click>view source option on web pages so people can't view your coding and copy it? What's the html I need to include in my website to utilize this feature? Thank...
1
by: deepaks85 | last post by:
Dear Friends, I have created a website in which user can register their profile and view their profile. But when they upload their picture, they can not see their photo in proper view. I want that...
1
by: Rajendra Prasad | last post by:
Hello, I'm working on project, in which I have to display images when a user select it. And I've to display it subparts from the diagram. It's image and it has part numbers on it.But its image....
3
underscore
by: underscore | last post by:
To all TSDN am here again to ask your assistance about this problem in updating my project. I have a project ROOM RESERVATION and in my 'setuproom.php' theres a table display of all room names...
8
by: squash+go | last post by:
For an abstract algebra class that I will be teaching, I'm trying to convert a text-based game that I wrote in Common Lisp to a graphical game in javascript. (I know nothing of javascript, but I...
1
by: MU | last post by:
Hello Can someone give me some ideas on the best way to do the following? I have a product page and it has 1 large image and 6 thumbnails. The main image is the first photo from a data table...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
0
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
0
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.