I am making a photography website and I wanted to have a gallery of images and a list like
- Wildlife
- Landscape
- Ocean
and when I click on them it opens a gallery of images.
I tried looking some tutorials up on youtube and google but couldn't find anything and since I'm not very experienced in HTML and CSS I don't know where to start
Currently I only have a gallery like this
<h1>### </h1>
<h1>###</h1>
<table align="center">
<tr>
<td>
<img src="Images/plant_with_web.png" height="150" width="200" alt="rocks" />
</td>
<td>
<img src="Images/rock_in_water.png" height="150" width="200" alt="rock_on_log" />
</td>
<td>
<img src="Images/rock_on_log.png" height="150" width="200" alt="sunset" />
</td>
</tr>
<tr>
<td>
<img src="Images/Rocks.png" height="150" width="200" alt="sun_on_beach" />
</td>
<td>
<img src="Images/sunset.png" height="150" width="200" alt="rock_in_water" />
</td>
<td>
<img src="Images/waves_crashing.png" height="150" width="200" alt="bird" />
</td>
</tr>
<tr>
<td>
<img src="Images/bird.png" height="150" width="200" />
</td>
<td>
<img src="Images/birdrock.png" height="150" width="200" />
</td>
<td>
<img src="Images/DSC04758.jpg" height="150" width="200" />
</td>
</tr>CodePudding user response：
I don't really understand your problem.
However, if you are trying to make a button then use the <input type='text'> button </input> or the button element.
Or if you want an image to be clickable then use <a href="image_URL"><img href="image_URL></a>"
CodePudding user response：
If galleries are on their separate page: use <a href="SITE.COM/gallary/wildlife">Wildlife</a>
If galleries will open as a full screen pop-up: use <button id="wildlife">Wildlife</button>
You can also use <details><summary> element to get the same functionality without depending more on JavaScript
EDIT 1:
you can us a js library like PhotoSwipe, it could fit perfectly in your use case
CodePudding user response：
You mean like this??
button {
background-color:white;
border:0px;
}
button:hover {
text-decoration:underline;
}<button> Button 1 as a text
</button>
<button> Button 2 as a text
</button>$(document).ready(function(){
$("button#wildlife").click(function(){
$(".wildlife> img").toggle();
$(".landscape> img").hide();
$(".ocean> img").hide();
});
$("button#landscape").click(function(){
$(".landscape> img").toggle();
$(".ocean> img").hide();
$(".wildlife> img").hide();
});
$("button#ocean").click(function(){
$(".ocean> img").toggle();
$(".wildlife> img").hide();
$(".landscape> img").hide();
});
});button {
background-color:white;
border:0px;
}
button:hover {
text-decoration:underline;
cursor:pointer;
}
.landscape >img {display:none;}
.ocean>img {display:none;}
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<body>
<button id="wildlife">Wildlife</button><br>
<button id="landscape">Landscape</button><br>
<button id="ocean">Ocean</button>
<div >
<img src=https://image.shutterstock.com/image-vector/squirrel-silhouette-hand-drawn-image-260nw-748191586.jpg eight="150" width="200" alt="rocks" />
<img src=https://image.shutterstock.com/image-vector/squirrel-silhouette-hand-drawn-image-260nw-748191586.jpg eight="150" width="200" alt="rocks" />
<img src=https://image.shutterstock.com/image-vector/squirrel-silhouette-hand-drawn-image-260nw-748191586.jpg eight="150" width="200" alt="rocks" />
<img src=https://image.shutterstock.com/image-vector/squirrel-silhouette-hand-drawn-image-260nw-748191586.jpg eight="150" width="200" alt="rocks" />
<img src=https://image.shutterstock.com/image-vector/squirrel-silhouette-hand-drawn-image-260nw-748191586.jpg eight="150" width="200" alt="rocks" />
<img src=https://image.shutterstock.com/image-vector/squirrel-silhouette-hand-drawn-image-260nw-748191586.jpg eight="150" width="200" alt="rocks" />
</div>
<div >
<img src="https://media-cdn.tripadvisor.com/media/photo-s/0e/54/cb/51/beautiful-morning-green.jpg" height="150" width="200" alt="rocks" />
<img src="https://media-cdn.tripadvisor.com/media/photo-s/0e/54/cb/51/beautiful-morning-green.jpg" height="150" width="200" alt="rocks" />
<img src="https://media-cdn.tripadvisor.com/media/photo-s/0e/54/cb/51/beautiful-morning-green.jpg" height="150" width="200" alt="rocks" />
<img src="https://media-cdn.tripadvisor.com/media/photo-s/0e/54/cb/51/beautiful-morning-green.jpg" height="150" width="200" alt="rocks" />
<img src="https://media-cdn.tripadvisor.com/media/photo-s/0e/54/cb/51/beautiful-morning-green.jpg" height="150" width="200" alt="rocks" />
<img src="https://media-cdn.tripadvisor.com/media/photo-s/0e/54/cb/51/beautiful-morning-green.jpg" height="150" width="200" alt="rocks" />
</div>
<div >
<img src="https://image.shutterstock.com/image-photo/school-dolphins-underwater-photography-260nw-1582116775.jpg" height="150" width="200" alt="rocks" />
<img src="https://image.shutterstock.com/image-photo/school-dolphins-underwater-photography-260nw-1582116775.jpg" height="150" width="200" alt="rocks" />
<img src="https://image.shutterstock.com/image-photo/school-dolphins-underwater-photography-260nw-1582116775.jpg" height="150" width="200" alt="rocks" />
<img src="https://image.shutterstock.com/image-photo/school-dolphins-underwater-photography-260nw-1582116775.jpg" height="150" width="200" alt="rocks" />
<img src="https://image.shutterstock.com/image-photo/school-dolphins-underwater-photography-260nw-1582116775.jpg" height="150" width="200" alt="rocks" />
<img src="https://image.shutterstock.com/image-photo/school-dolphins-underwater-photography-260nw-1582116775.jpg" height="150" width="200" alt="rocks" />
</div>
</body>
</html>CodePudding user response：
Use input type="submit" value="add"
Value mean Name This button name is add
CodePudding user response：
I don't recommend the use of a table for a gallery. You can maybe put each gallery in a different html page and use the tag to access them. like:
<a href="wildlife.html">Wildelife</a>
But if you want them to appear or slide dynamically on the same page you may need some javascript or jquery.
CodePudding user response：
you should use <a href="/"><img src="" alt="" /></a>