So I am trying to make a photo gallery with html and css but its not working-CodePudding

body {
  margin: 0;
  padding: 0;
  background: #ffffff;
}

.slidershow {
  width: 700px;
  height: 400px;
  overflow: hidden;
}

.middle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.navigation {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translate(-50%);
  display: flex;
}

/*this is where the button is supposed to be but like I'm not sure where it went wrong.*/
 .bar {
  width: 50px;
  height: 10px;
  border: 2px solid #fff;
  margin: 6px;
  cursor: pointer;
  transition: 0.4s;
}

.bar:hover {
  background: #fff;
}

input[name="r"] {
  position: absolute;
  visibility: hidden;
}

//I made the slides here to show that when clicking the bottom would reveal the next picture.
.slides {
  width: 500%;
  height: 100%;
  display: flex;
}

//this part is where the slide would slowly transition to the next picture.
.slide {
  width: 20%;
  transition: 0.6s;
}

.slide img {
  width: 100%;
  height: 100%;
}

#r1:checked~.s1 {
  margin-left: 0;
}

#r2:checked~.s1 {
  margin-left: -20%;
}

#r3:checked~.s1 {
  margin-left: -40%;
}

#r4:checked~.s1 {
  margin-left: -60%;
}

#r5:checked~.s1 {
  margin-left: -80%;
}

#r6:checked~.s1 {
  margin-left: -100%;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Image Gallery</title>
</head>

<body>
  <a href="index.html">Home</a>
  <div >
    <div >
      <input type="radio" name="r" id="r1" checked>
      <input type="radio" name="r" id="r2">
      <input type="radio" name="r" id="r3">
      <input type="radio" name="r" id="r4">
      <input type="radio" name="r" id="r5">
      <input type="radio" name="r" id="r6">

      <div >
        <img src="https://popmenucloud.com/lptemfjr/973db751-7915-4c33-abcf-784ef635b66e.jpg" width="285" height="350">
      </div>

      <div >
        <img src="https://images.squarespace-cdn.com/content/v1/5ebe52753562c1382763652b/1626229881191-V13LZ5XOFEGAOW3P998O/image-asset.jpeg" width="200" height="200">
      </div>

      <div >
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT5F6N4b4ylX07XIJ7kGiT88pBwBi3sqq-VPw&usqp=CAU" width="200" height="198">
      </div>

      <div >
        <img src="https://popmenucloud.com/lptemfjr/cd3e12fe-2e4c-4f25-af21-d30dc2c771ed.jpeg" width="320" height="404">
      </div>

      <div >
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTqAnzTuMrG_oISwd5iqGOWQUndvg799wYY3A&usqp=CAU">
      </div>

      <div >
        <img src="https://eatclub.com.au/wp-content/uploads/2019/06/Gotcha-Tea.jpg" width="377" height="460">
      </div>
    </div>

    <div >
      <label for="r1" ></label>
      <label for="r2" ></label>
      <label for="r3" ></label>
      <label for="r4" ></label>
      <label for="r5" ></label>
      <label for="r6" ></label> This part is where the pictures are but I don't think this where the error is.
    </div>

  </div>

</body>

</html>

So I am trying to make a photo gallery with buttons so that the user can see all 6 photos, but it doesn't even make the photos in a gallery. And it also just places the photos in a line. I'm really not sure where it went wrong, I am looking at the code and I am really confused about what I did wrong.

CodePudding user response：

I don't understand exactly what you want but I think I see you want to make a gallery system without using JS.

I hope the following is useful for you.

HTML

<div >
  <div id="image1" >
    <img src="https://popmenucloud.com/lptemfjr/973db751-7915-4c33-abcf-784ef635b66e.jpg" width="285" height="350">
  </div>
  <div id="image2" >
    <img src="https://images.squarespace-cdn.com/content/v1/5ebe52753562c1382763652b/1626229881191-V13LZ5XOFEGAOW3P998O/image-asset.jpeg" width="200" height="200">
  </div>
</div>
<div >
  <a href="#image1" >Image 1</a>
  <a href="#image2" >Image 2</a>
</div>

CSS

.slider-item {
  display: none;
}

:target {
  display: block;
}

Example here: https://codepen.io/yasgo/pen/vYpvqbj

CodePudding user response：

I have done the same using javascript

Example: https://jsfiddle.net/Karthik471/9dnhcp0e/13/

HTML

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Image Gallery</title>
    </head>
    <body>
    <a href="index.html">Home</a>
        <div >
            <div >
                <input type="radio" name="r" id="r1" >
                <input type="radio" name="r" id="r2" >
                <input type="radio" name="r" id="r3" >
                <input type="radio" name="r" id="r4" >
                <input type="radio" name="r" id="r5" >
                <input type="radio" name="r" id="r6" >

                <div >
                    <img src="https://popmenucloud.com/lptemfjr/973db751-7915-4c33-abcf-784ef635b66e.jpg" width="285" height="350">
                </div>

                <div >
                    <img src="https://images.squarespace-cdn.com/content/v1/5ebe52753562c1382763652b/1626229881191-V13LZ5XOFEGAOW3P998O/image-asset.jpeg" width="200" height="200">
                </div>

                <div >
                    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT5F6N4b4ylX07XIJ7kGiT88pBwBi3sqq-VPw&usqp=CAU" width="200" height="198">
                </div>

                <div >
                    <img src="https://popmenucloud.com/lptemfjr/cd3e12fe-2e4c-4f25-af21-d30dc2c771ed.jpeg" width="320" height="404">
                </div>

                <div >
                    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTqAnzTuMrG_oISwd5iqGOWQUndvg799wYY3A&usqp=CAU">
                </div>

                <div >
                    <img src="https://eatclub.com.au/wp-content/uploads/2019/06/Gotcha-Tea.jpg" width="377" height="460">
                </div>
            </div>

            <div >
                <label for="r1" ></label>
                <label for="r2" ></label>
                <label for="r3" ></label>
                <label for="r4" ></label>
                <label for="r5" ></label>
                <label for="r6" ></label>
                This part is where the pictures are but I don't think this where the error is.
            </div>

        </div>

    </body>
</html>

CSS

.slide{
  display:none;
}

let selectElement = document.querySelector('.slides');

let selectElement1 = document.querySelectorAll('.slide');

selectElement.addEventListener('change', (event) => {
  /* alert( event.target.id ); */
  let selectElement1 = document.querySelectorAll('.slide');
for (element of selectElement1) {
  element.style.display = 'none';
}
  let value = event.target.id;
  let class_selected = document.getElementsByClassName(value);
  if (class_selected[0].style.display == "none"){
     class_selected[0].style.display = "block"
  }
  else{
 class_selected[0].style.display = "none";
  }

});

Hope that the following code is useful for you.

I have used the event listener and based on the radio click event to display the respective images

CodePudding user response：

You need to add your css file

<head>
 .
 .
 <link rel=”stylesheet” type=”text/css” href=”yourfile.css” />
 .
 .
</head>