Navigation bar underneath content - javascript

I am using this tutorial. So I have a navigation bar with image links that hides when the user scrolls down.
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_navbar_hide_scroll
So this works, though.
However, when I scroll down, the images in the body show above the navigation bar. The text in the body is unaffected, however. So my question is how to stop this from happening. Another thing is how do I make the headline which is the orange "Sample Queen" to show up below the navigation bar, because it is now hidden underneath it. I want the content to start below the navigation bar
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" type="text/css" href="main.css">
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script>
/* When the user scrolls down, hide the navbar. When the user scrolls up, show the navbar */
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
if (prevScrollpos > currentScrollPos) {
document.getElementById("navbar").style.top = "0";
} else {
document.getElementById("navbar").style.top = "-190px";
}
prevScrollpos = currentScrollPos;
}
</script>
<body style="font-family:Century Gothic;">
<div id="navbar" style="background-color:#f1f1f1;padding:15px;text-align: center;">
<img src="/Index Files/insta.png" id="border" alt="sample Queen" style="width:100px;height:100px;">
<img src="/Index Files/sample.png" id="border" alt="sample Queen" style="width:100px;height:100px;">
<img src="/Index Files/asample.png" id="border" alt="sample Queen" style="width:100px;height:100px;">
<img src="/Index Files/amazon.jpg" id="border" alt="sample Queen" style="width:100px;height:100px;">
<img src="/Index Files/sample.jpg" id="border" alt="sample Queen" style="width:100px;height:100px;">
<img src="/Index Files/sampleos.jpg" id="border" alt="sample Queen" style="width:100px;height:100px;">
</div>
<h1><font color="orange">sample Queen</font>
</h1>
<h2>sample Queen is a small soap businets </h2>
</head>
<p>________</p>
<div class="slideshow-container">
<div class="mySlides1" >
<img src="/sample Queen/fm1.jpg" id="border" style="width:100%">
</div>
<div class="mySlides1">
<img src="/sample Queen/fm2.jpg" id="border" style="width:100%">
</div>
<div class="mySlides1">
<img src="/sample Queen/fm3.jpg" id="border" style="width:100%">
</div>
<div class="mySlides1">
<img src="/sample Queen/fm4.jpg" id="border" style="width:100%">
</div>
<div class="mySlides1">
<img src="/sample Queen/fm5.jpg" id="border" style="width:100%">
</div>
<div class="mySlides1">
<img src="/sample Queen/fm6.jpg" id="border" style="width:100%">
</div>
<div class="mySlides1">
<img src="/sample Queen/fm7.jpg" id="border" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1, 0)">❮</a>
<a class="next" onclick="plusSlides(1, 0)">❯</a>
</div>
<p>________</p>
<div class="slideshow-container">
<div class="mySlides2">
<img src="/sample Queen/nd1.jpg" id="border" style="width:100%">
</div>
<div class="mySlides2">
<img src="/sample Queen/nd2.jpg" id="border" style="width:100%">
</div>
<div class="mySlides2">
<img src="/sample Queen/nd3.jpg" id="border" style="width:100%">
</div>
<div class="mySlides2">
<img src="/sample Queen/nd4.jpg" id="border" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1, 1)">❮</a>
<a class="next" onclick="plusSlides(1, 1)">❯</a>
</div>
<p>________</p>
<div class="slideshow-container">
<div class="mySlides3">
<img src="/sample Queen/gel1.png" id="border" style="width:100%">
</div>
<div class="mySlides3">
<img src="/sample Queen/herbal1.png" id="border" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1, 2)">❮</a>
<a class="next" onclick="plusSlides(1, 2)">❯</a>
</div>
<div class="slideshow-container">
<p>________</p>
<div class="mySlides5">
<img src="/sample Queen/hs.jpg" id="border" style="width:100%">
</div>
</div>
<p>________</p>
<div class="slideshow-container">
<div class="mySlides4">
<img src="/sample Queen/hairmask1.png" id="border" style="width:100%">
</div>
<div class="mySlides4">
<img src="/sample Queen/lip.png" id="border" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1, 3)">❮</a>
<a class="next" onclick="plusSlides(1, 3)">❯</a>
</div>
<p></p>
<div id="imgGrey" style="background-color:#f1f1f1;padding:15px;text-align: center;">
</div>
</div>
<script>
var slideIndex = [1,1,1,1,1];
var slideId = ["mySlides1", "mySlides2", "mySlides3", "mySlides4", "mySlides5"]
showSlides(1, 0);
showSlides(1, 1);
showSlides(1, 2);
showSlides(1, 3);
showSlides(1, 4);
function plusSlides(n, no) {
showSlides(slideIndex[no] += n, no);
}
function showSlides(n, no) {
var i;
var x = document.getElementsByClassName(slideId[no]);
if (n > x.length) {slideIndex[no] = 1}
if (n < 2) {slideIndex[no] = x.length}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex[no]-1].style.display = "block";
}
</script>
</body>
</html>
h1 {
text-align: center;
font-family: "Century Gothic";
font-size:50px;
font-weight: bold;
}
p {
color: lightgrey;
text-align: center;
font-family: "Century Gothic";
font-size:40px;
}
h2 {
color: black;
text-align: center;
font-family: "Century Gothic";
font-size:20px;
padding-right: 15px;
padding-left: 15px;
}
/* Now disable grayscale on hover */
#border:hover {
filter: none;
-webkit-filter: grayscale(0);
}
#border {
border-radius: 10px;
text-align: center;
vertical-align: middle;
filter: gray; /* For IE6-9 */
filter: grayscale(1); /* For Microsoft Edge and Firefox 35+ */
-webkit-filter: grayscale(1); /* For Google Chrome, Safari 6+ & Opera 15+ */
}
/* Slideshow container */
.slideshow-container {
max-width: 500px;
position: relative;
margin: auto;
padding-right: 15px;
padding-left: 15px;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 40%;
width: auto;
padding: 20px;
color: lightgrey;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 10px 10px 0;
user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 0;
}
/* On hover, add a grey background color */
.prev:hover, .next:hover {
background-color: #f1f1f1;
color: black;
}
/* width */
::-webkit-scrollbar {
width: 20px;
}
/* Track */
::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px grey;
border-radius: 0px;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: lightgrey;
border-radius: 5px;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: orange;
}
#navbar {
background-color: #333; /* Black background color */
position: fixed; /* Make it stick/fixed */
top: 0; /* Stay on top */
width: 100%; /* Full width */
transition: top 0.3s; /* Transition effect when sliding down (and up) */
}
/* Style the navbar links */
#navbar a {
float: left;
display: block;
color: white;
text-align: center;
padding: 15px;
text-decoration: none;
}
#navbar a:hover {
background-color: #ddd;
color: black;
}


Please add the below lines to your CSS.
#navbar{
z-index: 1000;
}
body{
padding-top: 200px;
}
You may control the padding-top value according to the height of your navbar.

Related

Not able to to display the third slideshow on my html

I basically copied code of multiple slideshows from w3schools https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_slideshow_multiple
The first two slideshows are working just fine but, the third slideshow I tried adding afterwards isn't displaying at all and neither the images seems to be loading on the inspection page.
I wanted images to load lazily as well
Please help me with this.
Any help is appreciated. Thanks in advance.
var slideIndex = [1,1];
var slideId = ["mySlides1", "mySlides2", "mySlides3"]
showSlides(1, 0);
showSlides(1, 1);
showSlides(1, 2);
function plusSlides(n, no) {
showSlides(slideIndex[no] += n, no);
}
function showSlides(n, no) {
var i;
var x = document.getElementsByClassName(slideId[no]);
if (n > x.length) {slideIndex[no] = 1}
if (n < 1) {slideIndex[no] = x.length}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex[no]-1].style.display = "block";
}
* {box-sizing: border-box}
.mySlides1, .mySlides2 {display: none}
img {vertical-align: middle;}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a grey background color */
.prev:hover, .next:hover {
background-color: #f1f1f1;
color: black;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h2 style="text-align:center">Multiple Slideshows</h2>
<p>Slideshow 1:</p>
<div class="slideshow-container">
<div class="mySlides1">
<img loading="lazy" src="img_nature_wide.jpg" style="width:100%">
</div>
<div class="mySlides1">
<img loading="lazy" src="img_snow_wide.jpg" style="width:100%">
</div>
<div class="mySlides1">
<img loading="lazy" src="img_mountains_wide.jpg" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1, 0)">❮</a>
<a class="next" onclick="plusSlides(1, 0)">❯</a>
</div>
<p>Slideshow 2:</p>
<div class="slideshow-container">
<div class="mySlides2">
<img loading="lazy" src="img_band_chicago.jpg" style="width:100%">
</div>
<div class="mySlides2">
<img loading="lazy" src="img_band_la.jpg" style="width:100%">
</div>
<div class="mySlides2">
<img loading="lazy" src="img_band_ny.jpg" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1, 1)">❮</a>
<a class="next" onclick="plusSlides(1, 1)">❯</a>
</div>
<div class="slideshow-container">
<div class="mySlides3">
<img loading="lazy" src="https://m.media-amazon.com/images/I/313CFbI-YjL._SX512_.jpg" style="width:100%">
</div>
<div class="mySlides3">
<img loading="lazy" src="https://m.media-amazon.com/images/I/41zOmaUKehL._SX512_.jpg" style="width:100%">
</div>
<div class="mySlides3">
<img loading="lazy" src="https://m.media-amazon.com/images/I/41ePfTRprsL._SX512_.jpg" style="width:100%">
</div>
<div class="mySlides3">
<img loading="lazy" src="https://m.media-amazon.com/images/I/31bjKqlul6L._SX512_.jpg" style="width:100%">
</div>
<div class="mySlides3">
<img loading="lazy" src="https://m.media-amazon.com/images/I/311m3klP3oL._SX512_.jpg" style="width:100%">
</div>
<div class="mySlides3">
<img loading="lazy" src="https://m.media-amazon.com/images/I/315hICqUx0L._SX512_.jpg" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1, 2)">❮</a>
<a class="next" onclick="plusSlides(1, 2)">❯</a>
</div>
</body>
</html>

Your third slideshow is not functioning because when plusSlides is called on the third slideshow, it references index 2 of the array slideIndex. However, you've defined the array only up to index 1: var slideIndex = [1, 1];. Changing this line to var slideIndex = [1, 1, 1]; fixes your third slideshow.

Your problem is that the variable slideIndex only have two positions:
var slideIndex = [1,1];
For solve the problem, add one position more to the array:
var slideIndex = [1,1,1];
Greetings.

Adding Multiple Image Slideshows

I have this worksheet to complete and one of the questions is to explain this code and to add one more image slideshow.
I don't really understand the javascript code and a bit confused as to how to add another image slideshow.
I understand the HTML and css but the javascript is confusing.
Any help would be appreciated.
var slideIndex = [1,1];
var slideId = ["mySlides1", "mySlides2"]
showSlides(1, 0);
showSlides(1, 1);
function plusSlides(n, no) {
showSlides(slideIndex[no] += n, no);
}
function showSlides(n, no) {
var i;
var x = document.getElementsByClassName(slideId[no]);
if (n > x.length) {slideIndex[no] = 1}
if (n < 1) {slideIndex[no] = x.length}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex[no]-1].style.display = "block";
}
* {box-sizing: border-box}
.mySlides1, .mySlides2 {display: none}
img {vertical-align: middle;}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a grey background color */
.prev:hover, .next:hover {
background-color: #f1f1f1;
color: black;
}
<h2 style="text-align:center">Multiple Slideshows</h2>
<p>Slideshow 1:</p>
<div class="slideshow-container">
<div class="mySlides1">
<img src="https://homepages.cae.wisc.edu/~ece533/images/airplane.png" style="width:100%">
</div>
<div class="mySlides1">
<img src="https://homepages.cae.wisc.edu/~ece533/images/arctichare.png" style="width:100%">
</div>
<div class="mySlides1">
<img src="https://homepages.cae.wisc.edu/~ece533/images/boat.png" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1, 0)">❮</a>
<a class="next" onclick="plusSlides(1, 0)">❯</a>
</div>
<p>Slideshow 2:</p>
<div class="slideshow-container">
<div class="mySlides2">
<img src="https://homepages.cae.wisc.edu/~ece533/images/pool.png" style="width:100%">
</div>
<div class="mySlides2">
<img src="https://homepages.cae.wisc.edu/~ece533/images/sails.png" style="width:100%">
</div>
<div class="mySlides2">
<img src="https://homepages.cae.wisc.edu/~ece533/images/watch.png" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1, 1)">❮</a>
<a class="next" onclick="plusSlides(1, 1)">❯</a>
</div>

I updated the code using an IDE to be human readable.
I believe it is pretty straight forward now. If you don't understand specific parts you can ask me in comments. (This not quality code, I believe it's a learning exercise so I kept it as it is)
var slideIndex = [1, 1, 1];
var slideContainerSelectors = ["mySlides1", "mySlides2", "mySlides3"]
function showSlides(nextslideIndex, slideContainerIndex) {
var i;
var slideContainerElement = document.getElementsByClassName(slideContainerSelectors[slideContainerIndex]);
if (nextslideIndex > slideContainerElement.length) {
slideIndex[slideContainerIndex] = 1
}
if (nextslideIndex < 1) {
slideIndex[slideContainerIndex] = slideContainerElement.length
}
for (i = 0; i < slideContainerElement.length; i++) {
slideContainerElement[i].style.display = "none";
}
slideContainerElement[slideIndex[slideContainerIndex] - 1].style.display = "block";
}
function plusSlides(increment, index) {
showSlides(slideIndex[index] += increment, index);
//----------------------------^ slideIndex[index] = slideIndex[index] + increment
}
showSlides(1, 0);
showSlides(1, 1);
showSlides(1, 2);
* {
box-sizing: border-box
}
.mySlides1,
.mySlides2 {
display: none
}
img {
vertical-align: middle;
}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* Next & previous buttons */
.prev,
.next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a grey background color */
.prev:hover,
.next:hover {
background-color: #f1f1f1;
color: black;
}
<h2 style="text-align:center">Multiple Slideshows</h2>
<p>Slideshow 1:</p>
<div class="slideshow-container">
<div class="mySlides1">
<img src="https://homepages.cae.wisc.edu/~ece533/images/airplane.png" style="width:100%">
</div>
<div class="mySlides1">
<img src="https://homepages.cae.wisc.edu/~ece533/images/arctichare.png" style="width:100%">
</div>
<div class="mySlides1">
<img src="https://homepages.cae.wisc.edu/~ece533/images/boat.png" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1, 0)">❮</a>
<a class="next" onclick="plusSlides(1, 0)">❯</a>
</div>
<p>Slideshow 2:</p>
<div class="slideshow-container">
<div class="mySlides2">
<img src="https://homepages.cae.wisc.edu/~ece533/images/pool.png" style="width:100%">
</div>
<div class="mySlides2">
<img src="https://homepages.cae.wisc.edu/~ece533/images/sails.png" style="width:100%">
</div>
<div class="mySlides2">
<img src="https://homepages.cae.wisc.edu/~ece533/images/watch.png" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1, 1)">❮</a>
<a class="next" onclick="plusSlides(1, 1)">❯</a>
</div>
<p>Slideshow 3:</p>
<div class="slideshow-container">
<div class="mySlides3">
<img src="https://picsum.photos/200/300" style="width:100%">
</div>
<div class="mySlides3">
<img src="https://picsum.photos/id/237/200/300" style="width:100%">
</div>
<div class="mySlides3">
<img src="https://picsum.photos/id/238/200/300" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1, 2)">❮</a>
<a class="next" onclick="plusSlides(1, 2)">❯</a>
</div>

More than one slideshows on one page

I'm trying to add multiple slideshows to one page but am having some difficulty. I can add two functioning slideshows but when I add a third everything breaks.
Can someone please suggest a solution to add multiple slideshows to one page?
Here is the codepen: https://codepen.io/anon/pen/YmWNqMc
HTML:
<h2 style="text-align:center">Multiple Slideshows</h2>
<p>Slideshow 1:</p>
<div class="slideshow-container">
<div class="mySlides1">
<img src="https://www.w3schools.com/howto/img_nature_wide.jpg" style="width:100%">
</div>
<div class="mySlides1">
<img src="https://www.w3schools.com/howto/img_snow_wide.jpg" style="width:100%">
</div>
<div class="mySlides1">
<img src="https://www.w3schools.com/howto/img_mountains_wide.jpg" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1, 0)"></a>
<a class="next" onclick="plusSlides(1, 0)"></a>
</div>
<p>Slideshow 2:</p>
<div class="slideshow-container">
<div class="mySlides2">
<img src="https://www.w3schools.com/howto/img_band_chicago.jpg" style="width:100%">
</div>
<div class="mySlides2">
<img src="https://www.w3schools.com/howto/img_band_la.jpg" style="width:100%">
</div>
<div class="mySlides2">
<img src="https://www.w3schools.com/howto/img_band_ny.jpg" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1, 1)"></a>
<a class="next" onclick="plusSlides(1, 1)"></a>
</div>
CSS:
* {box-sizing: border-box}
.mySlides1, .mySlides2 {display: none}
img {vertical-align: middle;}
/* Slideshow container */
.slideshow-container {
max-width: 800px;
position: relative;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 4%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
height:100%;
width:49.5%;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a grey background color */
.prev:hover, .next:hover {
color: black;
}
JAVASCRIPT:
var slideIndex = [1,1,1];
var slideId = ["mySlides1", "mySlides2"]
showSlides(1, 0);
showSlides(1, 1);
function plusSlides(n, no) {
showSlides(slideIndex[no] += n, no);
}
function showSlides(n, no) {
var i;
var x = document.getElementsByClassName(slideId[no]);
if (n > x.length) {slideIndex[no] = 1}
if (n < 1) {slideIndex[no] = x.length}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex[no]-1].style.display = "block";
}

Updated your code and 3 slideshows can run easily.
You just have to adapt your js code (like I did);
Add class name of the 3rd slideshow,
Call showSlides(1, id);.
var slideIndex = [1,1,1];
var slideId = ["slide", "slide2", "slide3"]
showSlides(1, 0);
showSlides(1, 1);
showSlides(1, 2);
function plusSlides(n, no) {
showSlides(slideIndex[no] += n, no);
}
function showSlides(n, no) {
var i;
var x = document.getElementsByClassName(slideId[no]);
if (n > x.length) {slideIndex[no] = 1}
if (n < 1) {slideIndex[no] = x.length}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex[no]-1].style.display = "block";
}
* {box-sizing: border-box}
.mySlides{display: none}
img {vertical-align: middle;}
/* Slideshow container */
.slideshow-container {
max-width: 800px;
position: relative;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 4%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
height:100%;
width:49.5%;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a grey background color */
.prev:hover, .next:hover {
color: black;
}
<h2 style="text-align:center">Multiple Slideshows</h2>
<p>Slideshow 1:</p>
<div class="slideshow-container">
<div class="mySlides slide">
<img src="https://picsum.photos/150/150" style="width:100%">
</div>
<div class="mySlides slide">
<img src="https://picsum.photos/150/151" style="width:100%">
</div>
<div class="mySlides slide">
<img src="https://picsum.photos/151/150" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1, 0)">prev</a>
<a class="next" onclick="plusSlides(1, 0)">next</a>
</div>
<p>Slideshow 2:</p>
<div class="slideshow-container">
<div class="mySlides slide2">
<img src="https://picsum.photos/152/150" style="width:100%">
</div>
<div class="mySlides slide2">
<img src="https://picsum.photos/150/152" style="width:100%">
</div>
<div class="mySlides slide2">
<img src="https://picsum.photos/150/154" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1, 1)">prev</a>
<a class="next" onclick="plusSlides(1, 1)">next</a>
</div>
<p>Slideshow 3:</p>
<div class="slideshow-container">
<div class="mySlides slide3">
<img src="https://picsum.photos/152/151" style="width:100%">
</div>
<div class="mySlides slide3">
<img src="https://picsum.photos/151/152" style="width:100%">
</div>
<div class="mySlides slide3">
<img src="https://picsum.photos/151/154" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1, 2)">prev</a>
<a class="next" onclick="plusSlides(1, 2)">next</a>
</div>

Several questions regarding, image resizing (viewport)

I am having some Issues with how my images are aligned on my website.
1. I would the images to have equal spacing from the left and the right, meaning centered because currently as you make the browser smaller the right side is a lot bigger than the left.
2. Also as I make the browser smaller the page realigns nice, but when I view it on a mobile device it is very different.
You can find my code at https://codepen.io/anon/pen/mpKvMx
$("#myinput").keyup(function() {
var val = $.trim(this.value);
if (val === "")
$('img').show();
else {
$('img').hide();
val = val.split(" ").join("\\ ");
console.log(val)
$("img[alt*=" + val + " i]").show();
}
});
$(".img").wrap('<div class="alt-wrap"/>');
$(".img").each(function() {
$(this).after('<p class="alt">' + $(this).attr('alt') + '</p>');
})
h1 {
color: red;
}
h2 {
color:red;
}
p {
font-family: Arial;
}
body {
background-color: grey;
}
div {
text-align: justify;
}
div img {
display: inline-block;
width: auto;
max-height: 200px;
height: auto;
}
input[type=text] {
width: 130px;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
}
input[type=text]:focus {
width: 100%;
}
.alt-wrap {
display: block;
position: relative;
margin: 20px;
color: whitesmoke;
border: 1px solid mediumorchid;
}
.alt-wrap p.alt {
position: absolute;
opacity: 0; /* hide initially */
left: 0; right: 0; bottom: 0;
margin: 0;
padding: 15px;
font-size: 14px;
line-height: 22px;
background-color: rgba(0,0,0,0.8);
transition: all 300ms ease;
transition-delay: 300ms;
}
.alt-wrap:hover > p.alt {
opacity: 1;
transition-delay: 0s;
}
.imgContainer{
float:left;
}
img {
width: 200px !important;
}
body {
background: white !important;
}
.imgContainer {
position: relative;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0,0,0,0.5);
overflow: hidden;
width: 0;
height: 100%;
transition: .5s ease;
}
.imgContainer:hover .overlay {
width: 100%;
}
.text {
white-space: nowrap;
color: white;
font-size: 20px;
position: absolute;
overflow: hidden;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
.dl {
margin-top: 400px;
}
<html>
<title>Title</title>
<head>
<link href="style.css" type="text/css" rel="stylesheet" />
<h1 align=center>Heading</h1>
<h2 align=center>Sub-Heading</h2>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<input type="text" id="myinput" name="search" placeholder="Search.." style="border-radius: 4px;">
</head>
<br>
<br>
<body>
<div class="image123">
<div class="imgContainer">
<img src="https://i.warosu.org/data/biz/img/0063/87/1515861781137.png" alt="Bitcoin"><div class="overlay"><div class="text">Bitcoin</div></div>
</div>
<div class="imgContainer">
<img src="https://upload.wikimedia.org/wikipedia/commons/b/b7/ETHEREUM-YOUTUBE-PROFILE-PIC.png" alt="Ethereum"><div class="overlay"><div class="text">Ethereum</div></div>
</div>
<div class="imgContainer">
<img src="https://www.profitconfidential.com/wp-content/uploads/2018/11/ripple-icon-1-300x300.png" alt="Ripple"><div class="overlay"><div class="text">Ripple</div></div>
</div>
<div class="imgContainer">
<img src="http://199.180.133.206/img/Bitcoin_Cash.png" alt="Bitcoin Cash"><div class="overlay"><div class="text">Bitcoin Cash</div></div>
</div>
<div class="imgContainer">
<img src="http://199.180.133.206/img/ada.png" alt="Cardano"><div class="overlay"><div class="text">Cardano</div></div>
</div>
<div class="imgContainer">
<img src="http://199.180.133.206/img/NEM.png" alt="NEM"> <div class="overlay"><div class="text">NEM</div></div>
</div>
<div class="imgContainer">
<img src="http://199.180.133.206/img/Litecoin.png" alt="LiteCoin"><div class="overlay"><div class="text">LiteCoin</div></div>
</div>
<div class="imgContainer">
<img src="http://199.180.133.206/img/stellar.png" alt="Stellar Lumens"><div class="overlay"><div class="text">Stellar Lumens</div></div>
</div>
<div class="imgContainer">
<img src="http://199.180.133.206/img/iota.png" alt="IOTA"><div class="overlay"><div class="text">IOTA</div></div>
</div>
<div class="imgContainer">
<img src="http://199.180.133.206/img/dash.png" alt="Dash"><div class="overlay"><div class="text">Dash</div></div>
</div>
<div class="imgContainer">
<img src="http://199.180.133.206/img/neo.png" alt="NEO"><div class="overlay"><div class="text">NEO</div></div>
</div>
<div class="imgContainer">
<img src="http://199.180.133.206/img/tron.png" alt="Tron"><div class="overlay"><div class="text">Tron</div></div>
</div>
<div class="imgContainer">
<img src="http://199.180.133.206/img/monero.png" alt="Monero"><div class="overlay"><div class="text">Monero</div></div>
</div>
<div class="imgContainer">
<img src="http://199.180.133.206/img/eos.png" alt="EOS"><div class="overlay"><div class="text">EOS</div></div>
</div>
<div class="imgContainer">
<img src="http://199.180.133.206/img/icon.png" alt="ICON"><div class="overlay"><div class="text">ICON</div></div>
</div>
<div class="imgContainer">
<img src="http://199.180.133.206/img/bitcoingold.png" alt="Bitcoin Gold"><div class="overlay"><div class="text">Bitcoin Gold</div></div>
</div>
<div class="imgContainer">
<img src="http://199.180.133.206/img/qtum.svg" alt="QTUM"><div class="overlay"><div class="text">QTUM</div></div>
</div>
<div class="imgContainer">
<img src="http://199.180.133.206/img/ethereum_classic.png" alt="Ethereum Classic"><div class="overlay"><div class="text">Ethereum Classic</div></div>
</div>
<div class="imgContainer">
<img src="http://199.180.133.206/img/raiblocks.png" alt="RaiBlocks"><div class="overlay"><div class="text">RaiBlocks</div></div>
</div>
<div class="imgContainer">
<img src="http://199.180.133.206/img/lisk.png" alt="Lisk"><div class="overlay"><div class="text">Lisk</div></div>
</div>
<div class="imgContainer">
<img src="http://199.180.133.206/img/verge.png" alt="Verge"><div class="overlay"><div class="text">Verge</div></div>
</div>
<div class="imgContainer">
<img src="http://199.180.133.206/img/omisego.png" alt="OmiseGo"><div class="overlay"><div class="text">OmiseGO</div></div>
</div>
</div><br>
</body>
</html>

1) All you need is to add the following css to the element you want to align horizontally: margin: 0 auto;
2) Use media queries, so for example you can have:
on mobile: all the images stacked (you may need width:100% on your image container)
for wider viewports: images inlined as in your code sample
If you are not confortable with media queries please see the following example: https://codepen.io/TrentWalton/pen/kqxDy.

Javascript responsive image gallery thumbnail

I need to do a responsive image thumbnail gallery and mine currently looks like this the one you can see in the snippet.
Since I must have 30 images showing, Is there a way a can make my code more efficient so that I dont have to repeat images all the time?
Unfortunately I cannot use plugins but I am free to use jQuery.
You can check my pen here
My html and css look like this:
HTML:
<h2 style="text-align:center">Lightbox</h2>
<div class="row">
<div class="column">
<img src="https://placehold.it/180x180.jpg " style="width:100%" onclick="openModal();currentSlide(1)" class="hover-shadow cursor">
</div>
<div class="column">
<img src="https://placehold.it/180x180.jpg " style="width:100%" onclick="openModal();currentSlide(2)" class="hover-shadow cursor">
</div>
<div class="column">
<img src="https://placehold.it/180x180.jpg " style="width:100%" onclick="openModal();currentSlide(3)" class="hover-shadow cursor">
</div>
<div class="column">
<img src="https://placehold.it/180x180.jpg " style="width:100%" onclick="openModal();currentSlide(4)" class="hover-shadow cursor">
</div>
</div>
<div id="myModal" class="modal">
<span class="close cursor" onclick="closeModal()">×</span>
<div class="modal-content">
<div class="mySlides">
<div class="numbertext">1 / 4</div>
<img src="https://placehold.it/180x180.jpg " style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">2 / 4</div>
<img src="https://placehold.it/180x180.jpg " style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">3 / 4</div>
<img src="https://placehold.it/180x180.jpg " style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">4 / 4</div>
<img src="https://placehold.it/180x180.jpg " style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
<div class="caption-container">
<p id="caption"></p>
</div>
<div class="column">
<img class="demo cursor" src="https://placehold.it/180x180.jpg " style="width:100%" onclick="currentSlide(1)" alt="Nature and sunrise">
</div>
<div class="column">
<img class="demo cursor" src="https://placehold.it/180x180.jpg " style="width:100%" onclick="currentSlide(2)" alt="Trolltunga, Norway">
</div>
<div class="column">
<img class="demo cursor" src="https://placehold.it/180x180.jpg " style="width:100%" onclick="currentSlide(3)" alt="Mountains and fjords">
</div>
<div class="column">
<img class="demo cursor" src="https://placehold.it/180x180.jpg " style="width:100%" onclick="currentSlide(4)" alt="Northern Lights">
</div>
</div>
</div>
CSS:
body {
font-family: Verdana, sans-serif;
margin: 0;
}
* {
box-sizing: border-box;
}
.row > .column {
padding: 0 8px;
}
.row:after {
content: "";
display: table;
clear: both;
}
.column {
float: left;
width: 25%;
}
/* The Modal (background) */
.modal {
display: none;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: black;
}
/* Modal Content */
.modal-content {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
width: 90%;
max-width: 1200px;
}
/* The Close Button */
.close {
color: white;
position: absolute;
top: 10px;
right: 25px;
font-size: 35px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #999;
text-decoration: none;
cursor: pointer;
}
.mySlides {
display: none;
}
.cursor {
cursor: pointer
}
/* Next & previous buttons */
.prev,
.next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -50px;
color: white;
font-weight: bold;
font-size: 20px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
-webkit-user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
background-color: rgba(0, 0, 0, 0.8);
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
img {
margin-bottom: -4px;
}
.caption-container {
text-align: center;
background-color: black;
padding: 2px 16px;
color: white;
}
.demo {
opacity: 0.6;
}
.active,
.demo:hover {
opacity: 1;
}
img.hover-shadow {
transition: 0.3s
}
.hover-shadow:hover {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)
}

You are going to have to have the image elements one way or another, so that shouldn't be your focus. But, there certainly are other things you can do to reduce redundancy, separate the content, presentation and behavior and provide yourself a better way to scale and debug the page as time goes on.
First, instead of applying inline styles to elements, use CSS selectors to reduce redundancy and separate the content from the presentation.
Also, while static HTML doesn't use any of the JavaScript runtime's power, you can automate the application of those classes as well as the setting up of the click event handlers (which shouldn't be done with inline HTML event handling attributes anyway) with JavaScript. This won't eliminate having all the image elements, but it will decrease the redundancy of that code.
A couple of other things... Some of your HTML is invalid as some of your image elements don't have the required alt attribute to provide an alternate text description for those who use screen reader software or otherwise can't see the images.
Lastly, it looks like many of your image paths have a trailing space as part of the attribute value.
// Place all of this code into a <script></script> element and place that element
// just before the closing of the <body> element (</body>) so that by the time
// the script is reached, all the HTML will have already been parsed into memory.
// Get references to the elements you need to work with:
var prev = document.querySelector(".prev");
var next = document.querySelector(".next");
var close = document.querySelector(".close");
// Get a node list of the sets of images and turn the node list into a proper array
var columnImages1 = Array.prototype.slice.call(document.querySelectorAll("div.row > div.colum > img.hover-shadow.cursor"));
var columnImages2 = Array.prototype.slice.call(document.querySelectorAll("div.column > img.demo"));
// Loop over the first group of images and set up their click event handlers
columnImages1.forEach(function(img, index){
img.addEventListener("click", function(){
openModal();
currentSlide(index + 1);
});
});
// Loop over the second group of images and set up their click event handlers
columnImages1.forEach(function(img, index){
img.addEventListener("click", function(){
currentSlide(index + 1);
});
});
// Set up the click event handler for the close, previous and next buttons
close.addEventListener("click", closeModal);
prev.addEventListener("click", function(){ plusSlides(-1) });
next.addEventListener("click", function(){ plusSlides(1) });
* { box-sizing: border-box; }
body {
font-family: Verdana, sans-serif;
margin: 0;
}
/* This will eliminate the need to repeat "width:100%" on all your slides */
.mySlides > img, .column > img { width: 100%; }
.row > .column {
padding: 0 8px;
}
.row:after {
content: "";
display: table;
clear: both;
}
.column {
float: left;
width: 25%;
}
/* The Modal (background) */
.modal {
display: none;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: black;
}
<h2 style="text-align:center">Lightbox</h2>
<div class="row">
<div class="column">
<img src="https://placehold.it/180x180.jpg" alt="You need a short description here"
class="hover-shadow cursor">
</div>
<div class="column">
<img src="https://placehold.it/180x180.jpg" alt="You need a short description here"
class="hover-shadow cursor">
</div>
<div class="column">
<img src="https://placehold.it/180x180.jpg" alt="You need a short description here"
class="hover-shadow cursor">
</div>
<div class="column">
<img src="https://placehold.it/180x180.jpg" alt="You need a short description here"
class="hover-shadow cursor">
</div>
</div>
<div id="myModal" class="modal">
<span class="close cursor">×</span>
<div class="modal-content">
<div class="mySlides">
<div class="numbertext">1 / 4</div>
<img src="https://placehold.it/180x180.jpg" alt="You need a short description here">
</div>
<div class="mySlides">
<div class="numbertext">2 / 4</div>
<img src="https://placehold.it/180x180.jpg" alt="You need a short description here">
</div>
<div class="mySlides">
<div class="numbertext">3 / 4</div>
<img src="https://placehold.it/180x180.jpg" alt="You need a short description here">
</div>
<div class="mySlides">
<div class="numbertext">4 / 4</div>
<img src="https://placehold.it/180x180.jpg" alt="You need a short description here">
</div>
<a class="prev">❮</a>
<a class="next">❯</a>
<div class="caption-container">
<p id="caption"></p>
</div>
<div class="column">
<img class="demo cursor" src="https://placehold.it/180x180.jpg" alt="Nature and sunrise">
</div>
<div class="column">
<img class="demo cursor" src="https://placehold.it/180x180.jpg" alt="Trolltunga, Norway">
</div>
<div class="column">
<img class="demo cursor" src="https://placehold.it/180x180.jpg" alt="Mountains and fjords">
</div>
<div class="column">
<img class="demo cursor" src="https://placehold.it/180x180.jpg" alt="Northern Lights">
</div>
</div>
</div>

Categories