Html Question posted in
Some basic documentation can be found here.

Html – Need Help making a gallery

I am trying to make a gallery in a website i am working on for school, I have tried a bunch of different methods and ways of doing it, none of them are giving me what I want.

I tried all the ways provided by w3 schools and none of them work the way I want them to, or they go over the wrapper for whatever reason.

I am currently trying to get the images I have on a grid to zoom in when you click on them, and be able to click/swipe to the side to go to the next image, how do i do that?

this is the code I have so far

HTML

 <div class="grid-container">
<div class="gallery">
<a target="_blank" href="img/jinxedfinalpg.png">
    <img src="img/jinxedfinalpg.png" alt="Cinque Terre" width="600" height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>

<div class="gallery">
<a target="_blank" href="img/jinxedfinalpg.png">
    <img src="img/jinxedfinalpg.png" alt="Forest" width="800" height="600">
</a>
<div class="desc">Add a description of the image here</div>
</div>

<div class="gallery">
<a target="_blank" href="img/jinxedfinalpg.png">
    <img src="img/jinxedfinalpg.png" alt="Northern Lights" width="800" height="600">
</a>
<div class="desc">Add a description of the image here</div>
</div>

<div class="gallery">
<a target="_blank" href="img/jinxedfinalpg.png">
    <img src="img/jinxedfinalpg.png" alt="Mountains" width="800" height="600">
</a>
<div class="desc">Add a description of the image here</div>
</div>

`

CSS

.grid-container {
display: grid;
grid-template-columns: 1fr;
grid-gap: 0%;
}

.gallery {
margin: 2%;
border: 1px solid #ccc;
}

.gallery:hover {
border: 1px solid #777;
color: blueviolet;
}

.gallery img {
width: 100%;
height: auto;
}

.desc {
 padding: 1%;
 text-align: center;
}`

currently if you click on an image it will just open a new tab, which is not what I want.

Tags:

2

Answers


  1. 0

    if you click on an image it will just open a new tab, which is not what I want.

    It appears you followed this tutorial: W3: CSS Image Gallery that is designed specifically to open the images in a new tab.

    The reason the images are opening in a new tab is that you have set target="_blank" in the anchor elements

    To start off with, remove the <a> element altogether:

    <div class="gallery">
  <img src="img/jinxedfinalpg.png" alt="Northern Lights" width="800" height="600">
  <div class="desc">Add a description of the image here</div>
</div>

    Then if you want to make the image zoom in when you click on them you should use a javascript solution triggered by a click event on the image.

    W3: How TO – Tab Gallery shows an example of using onclick event callback to render the clicked image in a larger canvas

    W3: Slideshow / Carousel shows an example of being able to click/swipe to the side to go to the next image

    There is another example on w3Schools that matches your description almost prefectly: W3: How TO – Lightbox

    I would suggest you start with their example and swap out for your images or add more as you need to, also experiment with moving the image carousel above the viewport to understand how it works.

    Login or Signup to reply.
  2. 0

    You need to add any lightbox jquery to add the effect you want.

    For reference you can check here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search