Linking to specific slide

Linking to specific slide - javascript

I've got this slideshow on one page and on my homepage I've got a list of images (the same ones as in the slide).
I want to be able to, by clicking on a specific picture on the homepage, come to the same picture of the slide on the slideshow-page.
I tried to ID everything, but the slide starts from the first picture however I do it.
Is there any way to make the slideIndex a specific number from the start by having something in the link?
<div class="nav" style="font-size: 15px; margin-top: 7px;">
<div class="">
<a class="" onclick="plusDivs(-1)"><div class="triangle-right"></div></a>
<div class="fyrkant"></div>
<a class="" onclick="plusDivs(1)"><div class="triangle-left"></div></a>
</div>
Slides
<div class="w3-display-container mySlides">
<img src="img/1.jpg" style="width:100%">
<div class="">
<h1>
1
</h1>
<p>
Description
</p>
</div>
<img src="img/1.1.jpg" style="width:100%">
</div>
<div class="w3-display-container mySlides">
<img src="img/2.jpg" style="width:100%; background-color: #fff;">
<div class="">
<h1>
2
</h1>
<p>
</p>
</div>
<img src="img/2.2.jpg" style="width:100%">
</div>
Script
<script>
var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex += n);
}
function showDivs(n) {
var i;
var x = document.getElementsByClassName("mySlides");
if (n > x.length) {slideIndex = 1}
if (n < 1) {slideIndex = x.length}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex-1].style.display = "block";
}
</script>

Is this what you're looking for maybe?
<script>
var slideIndex = 1;
var hash = window.location.hash;
if(hash){
hash = parseInt(hash.split('#')[1]);
slideIndex = hash;
}
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex += n);
}
In this way you can pull a number from the url when a user visits your site and uses a "#[number]" at the end of the url. example: http://google.com/#3 - would show slide 3

hope to help
function openModal() {
document.getElementById('myModal').style.display = "block";
}
function closeModal() {
document.getElementById('myModal').style.display = "none";
}
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("demo");
var captionText = document.getElementById("caption");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
captionText.innerHTML = dots[slideIndex-1].alt;
}
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)
}
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<body>
<h2 style="text-align:center">Lightbox</h2>
<div class="row">
<div class="column">
<img src="http://placekitten.com/420/600" style="width:100%" onclick="openModal();currentSlide(1)" class="hover-shadow cursor">
</div>
<div class="column">
<img src="http://placekitten.com/450/600" style="width:100%" onclick="openModal();currentSlide(2)" class="hover-shadow cursor">
</div>
<div class="column">
<img src="http://placekitten.com/460/700" style="width:100%" onclick="openModal();currentSlide(3)" class="hover-shadow cursor">
</div>
<div class="column">
<img src="http://placekitten.com/420/600" 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="http://placekitten.com/420/600" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">2 / 4</div>
<img src="http://placekitten.com/450/600" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">3 / 4</div>
<img src="http://placekitten.com/460/700" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">4 / 4</div>
<img src="http://placekitten.com/420/600" 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="http://placekitten.com/420/600" style="width:100%" onclick="currentSlide(1)" alt="Nature and sunrise">
</div>
<div class="column">
<img class="demo cursor" src="http://placekitten.com/450/600" style="width:100%" onclick="currentSlide(2)" alt="Trolltunga, Norway">
</div>
<div class="column">
<img class="demo cursor" src="http://placekitten.com/460/700" style="width:100%" onclick="currentSlide(3)" alt="Mountains and fjords">
</div>
<div class="column">
<img class="demo cursor" src="http://placekitten.com/420/600" style="width:100%" onclick="currentSlide(4)" alt="Northern Lights">
</div>
</div>
</div>
</body>
</html>

Related

Multiple Slider With same Class and same Controller using shopify liquid and javascript

I want to make multiple slider but slider should stop on last slide of first slider.
as well for all slider's last slide.
i'm creating dynamic sections in liquid file but my basic need is something like this. how can i solve that?
My Need: Shopify dynamic section with multiple block. each block contain sliders. how can i start and stop slider for perticular block. if i add section twice. or block twice. all slider work same as below.
`<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
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);
}
.myModal{
display:none;}
</style>
<body>
<h2 style="text-align:center">Lightbox</h2>
<div>
<button onclick="activeMe();">Here click </button>
<div id="myModal" class="">
<span class="close cursor" onclick="closeModal()">×</span>
<div class="modal-content">
<div class="mySlides">
<div class="numbertext">1 / 4</div>
<img src="img_nature_wide.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">2 / 4</div>
<img src="img_snow_wide.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">3 / 4</div>
<img src="img_mountains_wide.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">4 / 4</div>
<img src="img_lights_wide.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>
<div id="left">
<button onclick="activeMe();">Here click </button>
<div id="myModal" class="">
<span class="close cursor" onclick="closeModal()">×</span>
<div class="modal-content">
<div class="mySlides">
<div class="numbertext">1 / 4</div>
<img src="img_nature_wide.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">2 / 4</div>
<img src="img_snow_wide.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">3 / 4</div>
<img src="img_mountains_wide.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">4 / 4</div>
<img src="img_lights_wide.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>
</div>
</div>
<script>
function activeMe(){
var element = document.getElementById("myModal");
element.classList.toggle("myModal");
}
function openModal() {
document.getElementByClassName("myModal").style.display = "block";
}
function closeModal() {
document.getElementByClassName("myModal").style.display = "none";
}
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("demo");
var captionText = document.getElementById("caption");
if (n > slides.length) {slideIndex = slides.length}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
captionText.innerHTML = dots[slideIndex-1].alt;
}
</script>
</body>
</html>
`

Changing a CSS Class using Javascript If / Then

I am looking for help making an Image Carousel work that only uses HTML, CSS, and Javascript. I was able to get it to function rather well;however, it does not display the 1st image on load.
Script is provided below:
HTML:
<div class="slideshow-container" style="max-width:400px;">
<img class="original-image" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAAPFBMVEX8AgT8AAD9oKD9o6P9qqr9tLT9vr39vLv+3t79mpv9nJz//v7+8/L95uX92dj90dH9ysn9rq79p6f9rKwROItaAAABX0lEQVR4nO3dO1LDUBAFUVm25A8fG3v/e8UBCSRQZP10zg46nqm608vr2/v1dlvX9bg8Hb7c99/M/7f/1f1x+N3H8hfrT8fTtOzGdn4WTiPbzQrrnoUHhW0K+xT2KexT2LeJwsfwhffhC/cK2xT2KexT2KewT2Gfwj6FfQr7FPYp7FPYp7BPYZ/CPoV9myicFbYp7FPYp7BPYZ/CPoV9CvsU9insU9insE9hn8I+hX0K+xT2KexT2KewbxMfQwrjFPYp7FPYp7BPYZ/CPoV9CvsU9insU9insE9hn8I+hX0K+xT2KexT2LeJnZnxt4IUxinsU9insE9hn8I+hX0K+xT2KexT2KewT2Gfwj6FfQr7FPZt4o6/KGxT2KewT2Gfwj6FfQr7FPYp7FPYp7BPYZ/CPoV9CvsU9insU9i3icJVYZvCPoV9CvsU9insU9insG8Thcfd2C7T6TyP7HL9BHu1DksiYTASAAAAAElFTkSuQmCCg" style="width:100%">
<div class="mySlides fade">
<div class="numbertext">1 / 4</div>
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAAPFBMVEX8AgT8AAD9oKD9o6P9qqr9tLT9vr39vLv+3t79mpv9nJz//v7+8/L95uX92dj90dH9ysn9rq79p6f9rKwROItaAAABX0lEQVR4nO3dO1LDUBAFUVm25A8fG3v/e8UBCSRQZP10zg46nqm608vr2/v1dlvX9bg8Hb7c99/M/7f/1f1x+N3H8hfrT8fTtOzGdn4WTiPbzQrrnoUHhW0K+xT2KexT2LeJwsfwhffhC/cK2xT2KexT2KewT2Gfwj6FfQr7FPYp7FPYp7BPYZ/CPoV9myicFbYp7FPYp7BPYZ/CPoV9CvsU9insU9insE9hn8I+hX0K+xT2KexT2KewbxMfQwrjFPYp7FPYp7BPYZ/CPoV9CvsU9insU9insE9hn8I+hX0K+xT2KexT2LeJnZnxt4IUxinsU9insE9hn8I+hX0K+xT2KexT2KewT2Gfwj6FfQr7FPZt4o6/KGxT2KewT2Gfwj6FfQr7FPYp7FPYp7BPYZ/CPoV9CvsU9insU9i3icJVYZvCPoV9CvsU9insU9insG8Thcfd2C7T6TyP7HL9BHu1DksiYTASAAAAAElFTkSuQmCC" style="width:100%">
<div class="text">Caption Text</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 4</div>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT7vnGsgBgV8QW50dp-wZ4GoCNWu4egKYuxAw&usqp=CAU" style="width:100%">
<div class="text">Caption Two</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 4</div>
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAAP1BMVEUEggQAfQCgw6Cqz6oAewCjyKO01bS9273e7d4AeQAAdQCbwJv+//7y9/Ll8eXY6tjR5tHJ4smu0q4AcQDQ4dBHeLN8AAABbElEQVR4nO3dSUoDARRF0UpX6ewS3f9azUAEcWAIhHiq7lnBu/MPf3h6fnl9O522F+PF6svmp+XtNn9aXeM8XmP7y24Y3/f7/frb4r9a3+ZwHMb1MGWL5QwKz5MvXC0ePeKuKvRV6KvQV6GvQl+FvkvhpkJbhb4KfRX6KvRV6KvQV6GvQl+Fvgp9Ffoq9FXoq9BXoW8WhcsKbRX6KvRV6KvQV6GvQl+Fvgp9Ffoq9FXoq9BXoa9CX4W+Cn0V+ir0VeibxcVQhbgKfRX6KvRV6KvQV6GvQl+Fvgp9Ffoq9FXoq9BXoa9CX4W+Cn0V+ir0zeILS4W4Cn0V+ir0Veir0Fehr0Jfhb4KfRX6KvRV6KvQV6GvQl+FvlkUnidfOK4fPeKuKvRV6KvQV6GvQl+Fvgp9Ffoq9FXoq9BXoa9CX4W+Cn0V+ir0Vei7FG4rtFXoq9BXoa9CX4W+Cn0V+uZReFhM2f447I7LKTt+fAID6BDSZpXAFwAAAABJRU5ErkJggg==" style="width:100%">
<div class="text">Caption Three</div>
</div>
<div class="mySlides fade">
<div class="numbertext">4 / 4</div>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS40B-kTX7c_MdtnIt_NetW2HFHgPlQP-nGbw&usqp=CAU" style="width:100%">
<div class="text">Caption Four</div>
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<br>
<div style="text-align:center">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
<span class="dot" onclick="currentSlide(4)"></span>
</div>
CSS:
.original-image {
z-index: 66 !important;
display: block;
position: absolute;
}
.original-image-gone {
display: none !important;
}
* {box-sizing:border-box}
.slideshow-container {
max-width: 280px;
position: relative;
margin: auto;
width: 100%;
min-height: 274px;
max-height: 274px;
}
.mySlides {
display: none;
}
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
display: none;
}
.next {
right: 0;
border-radius: 3px 0 0 3px;
display: none;
}
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
display: none;
}
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
.dot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 16px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active, .dot:hover {
background-color: #717171;
}
.fade {
animation-name: fade;
animation-duration: 1.5s;
}
#keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
Javascript:
<script>
let slideIndex = 1;
showSlides(slideIndex);
// Next/previous controls
function plusSlides(n) {
showSlides(slideIndex += n);
document.getElementById('original-image').classList.replace("original-image-gone");
}
// Thumbnail image controls
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
let i;
let slides = document.getElementsByClassName("mySlides");
let dots = document.getElementsByClassName("dot");
let original-image = document.getElementById('original-image');
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
}
</script>
I was hoping the initial slide would load, and so I added a "original image" static image above the slideshow, with the idea of changing its class on click, so it disappears. You can see this with "original-image" and then "original-image-gone"

The way to add a class with JavaScript is just:
document.getElementById("Demo").classList.add("Demo-Class");
The way to remove a class with JavaScript is:
document.getElementById("Demo").classList.remove("Demo-Class");
You could use those like this:
let demo = document.getElementById("demo");
function demoFunction() {
if (demo.classList.contains("Blue-Background")) {
demo.classList.remove("Blue-Background");
demo.classList.add("Pink-Background");
}
else {
demo.classList.remove("Pink-Background");
demo.classList.add("Blue-Background");
}
}
.Blue-Background {
background-color: blue;
color: pink;
}
.Pink-Background {
background-color: pink;
color: blue;
}
<!DOCTYPE html>
<html>
<body>
<p id="demo" class="Blue-Background">Hello!</p>
<button onclick="demoFunction()">Change Paragraph.</button>
</body>
</html>
I'm not sure if this helps but it might.

How to hide the left arrow of the first image and the right arrow of the last image

In the modal popup I need to hide the left arrow of the first image, while the left arrow is visible for two middle slide. And hide the right arrow of the last image while the left arrow is visible in two middle slide. Basically the first image will have only right arrow, middle two image will have both arrow and the last image will have only left arrow.
Please help. Please use code snippet in full page.
function openModal() {
document.getElementById("myModal").style.display = "block";
}
function closeModal() {
document.getElementById("myModal").style.display = "none";
}
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("demo");
var captionText = document.getElementById("caption");
if (n > slides.length) {
slideIndex = 1
}
if (n < 1) {
slideIndex = slides.length
}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex - 1].style.display = "block";
dots[slideIndex - 1 ].className += " active";
captionText.innerHTML = this.alt;
}
.modal {
width: 58%;
height: 100%;
top: 0;
position: fixed;
display: none;
background-color: rgba(22,22,22,0.5);
margin-left: 300px;
max-width: 779px;
min-width: 779px;
}
.modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
}
.mySlides {
display: none;
}
.close {
position: relative;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
left: 584px;
top: 90px;
}
.close:hover,
.close:focus {
color: #999;
text-decoration: none;
cursor: pointer;
}
.mySlides {
display: none;
}
.cursor {
cursor: pointer;
}
.cursor {
cursor: pointer;
}
.prev {
cursor: pointer;
position: relative;
top: -149px;
padding: 16px;
margin-top: -50px;
color: white;
font-weight: bold;
font-size: 20px;
border-radius: 0 3px 3px 0;
user-select: none;
-webkit-user-select: none;
left: -10%;
}
.next {
cursor: pointer;
position: relative;
top: -149px;
padding: 16px;
margin-top: -50px;
color: white;
font-weight: bold;
font-size: 20px;
border-radius: 0 3px 3px 0;
user-select: none;
-webkit-user-select: none;
left: 600px;
}
<body>
<tr>
<div class="row">
<div class="column">
<td>
<p align="center"><img
src="https://source.unsplash.com/collection/190727/1600x900" width="250" height="164"
onclick="openModal();currentSlide(1)" class="hover-shadow cursor" ></p>
</td>
</div>
<div class="column">
<td>
<p align="center"><img
src="https://source.unsplash.com/collection/190727/1600x910" width="250" height="164"
onclick="openModal();currentSlide(2)" class="hover-shadow cursor"></p>
</td>
</div>
<tr>
<div class="column">
<td>
<p align="center"><img src="https://source.unsplash.com/collection/190727/1600x920" width="250" height="164" onclick="openModal();currentSlide(3)" class="hover-shadow cursor">
</td>
<td>
</div>
<div class="column">
<p align="center"><img src="https://source.unsplash.com/collection/190727/1600x930" width="250" height="164" onclick="openModal();currentSlide(4)" class="hover-shadow cursor">
</td>
</div>
</tr>
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close cursor" onclick="closeModal()">×</span>
<div class="mySlides">
<img src="https://source.unsplash.com/collection/190727/1600x900" style="width: 98%; position: relative; left: 10px; top: 109px;">
<p id="caption" style="padding-bottom: 7px;font-size: 17px;">Annual function</p>
</div>
<div class="mySlides">
<img src="https://source.unsplash.com/collection/190727/1600x910" style="width: 98%; position: relative; left: 10px; top: 109px;">
<p id="caption" style="padding-bottom: 7px;font-size: 17px;">Annual function</p>
</div>
<div class="mySlides">
<img src="https://source.unsplash.com/collection/190727/1600x920" style="width: 98%; position: relative; left: 10px; top: 109px;">
<p id="caption" style="padding-bottom: 7px;font-size: 17px;">Annual function</p>
</div>
<div class="mySlides">
<img src="https://source.unsplash.com/collection/190727/1600x930" style="width: 98%; position: relative; left: 10px; top: 109px;">
<p id="caption" style="padding-bottom: 7px;font-size: 17px;">Annual function</p>
</div>
<a class="prev" id="prev1" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>

You could just check if your current slide is the first or last. Please look at code snippet bellow:
let arrowPrev = document.querySelector(".prev");
let arrowNext = document.querySelector(".next");
function openModal() {
document.getElementById("myModal").style.display = "block";
}
function closeModal() {
document.getElementById("myModal").style.display = "none";
}
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides((slideIndex += n));
}
function currentSlide(n) {
showSlides((slideIndex = n));
}
function showSlides(n) {
var slides = document.getElementsByClassName("mySlides");
//var dots = document.getElementsByClassName("demo");
var captionText = document.getElementById("caption");
if (n > slides.length) {
slideIndex = 1;
}
if (n < 1) {
slideIndex = slides.length;
}
slideIndex === 1
? (arrowPrev.style.display = "none")
: (arrowPrev.style.display = "block");
slideIndex === slides.length
? (arrowNext.style.display = "none")
: (arrowNext.style.display = "block");
for (let i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
//for (i = 0; i < dots.length; i++) {
// dots[i].className = dots[i].className.replace(" active", "");
//}
slides[slideIndex - 1].style.display = "block";
//dots[slideIndex - 1 ].className += " active";
captionText.innerHTML = this.alt;
}
.modal {
width: 58%;
height: 100%;
top: 0;
position: fixed;
display: none;
background-color: rgba(22, 22, 22, 0.5);
margin-left: 300px;
max-width: 779px;
min-width: 779px;
}
.modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
}
.mySlides {
display: none;
}
.close {
position: relative;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
left: 584px;
top: 90px;
}
.close:hover,
.close:focus {
color: #999;
text-decoration: none;
cursor: pointer;
}
.mySlides {
display: none;
}
.cursor {
cursor: pointer;
}
.cursor {
cursor: pointer;
}
.prev {
cursor: pointer;
position: relative;
top: -149px;
padding: 16px;
margin-top: -50px;
color: white;
font-weight: bold;
font-size: 20px;
border-radius: 0 3px 3px 0;
user-select: none;
-webkit-user-select: none;
left: -10%;
}
.next {
cursor: pointer;
position: relative;
top: -149px;
padding: 16px;
margin-top: -50px;
color: white;
font-weight: bold;
font-size: 20px;
border-radius: 0 3px 3px 0;
user-select: none;
-webkit-user-select: none;
left: 600px;
}
<body>
<tr>
<div class="row">
<div class="column">
<td>
<p align="center"><img src="https://source.unsplash.com/collection/190727/1600x900" width="250" height="164"
onclick="openModal();currentSlide(1)" class="hover-shadow cursor"></p>
</td>
</div>
<div class="column">
<td>
<p align="center"><img src="https://source.unsplash.com/collection/190727/1600x910" width="250" height="164"
onclick="openModal();currentSlide(2)" class="hover-shadow cursor"></p>
</td>
</div>
</tr>
<tr>
<div class="column">
<td>
<p align="center"><img src="https://source.unsplash.com/collection/190727/1600x920" width="250" height="164"
onclick="openModal();currentSlide(3)" class="hover-shadow cursor">
</td>
<td>
</div>
<div class="column">
<p align="center"><img src="https://source.unsplash.com/collection/190727/1600x930" width="250" height="164"
onclick="openModal();currentSlide(4)" class="hover-shadow cursor">
</td>
</div>
</tr>
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close cursor" onclick="closeModal()">×</span>
<div class="mySlides">
<img src="https://source.unsplash.com/collection/190727/1600x900" style="width:
98%;
position: relative;
left: 10px;
top: 109px;">
<p id="caption" style="padding-bottom: 7px;font-size: 17px;">Annual function</p>
</div>
<div class="mySlides">
<img src="https://source.unsplash.com/collection/190727/1600x910" style="width:
98%;
position: relative;
left: 10px;
top: 109px;">
<p id="caption" style="padding-bottom: 7px;font-size: 17px;">Annual function</p>
</div>
<div class="mySlides">
<img src="https://source.unsplash.com/collection/190727/1600x920" style="width:
98%;
position: relative;
left: 10px;
top: 109px;">
<p id="caption" style="padding-bottom: 7px;font-size: 17px;">Annual function</p>
</div>
<div class="mySlides">
<img src="https://source.unsplash.com/collection/190727/1600x930" style="width:
98%;
position: relative;
left: 10px;
top: 109px;">
<p id="caption" style="padding-bottom: 7px;font-size: 17px;">Annual function</p>
</div>
<a class="prev" id="prev1" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
<script src="ind.js"></script>
</body>

Two css code is overleapping each other and can't see one of them

I want to create a webpage where i can see my videos and some pictures from something. I get some free examples from w3schools for the gallery page and some video embedding code from somewhere else. These codes are working on their own but i can't figure out where is the problem exactly when i put them together.
In the style tags there is a
.modal {
display: none;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: black;
}
The problem lies in here i think.
Here is my code
/* video */
$(document).ready(function() {
$('#videos a').each(function() {
var data = $(this).attr('data');
$(this).append('<img src="http://img.youtube.com/vi/'+data+'/maxresdefault.jpg" />');
});
$('#videos a').click(function() {
var data = $(this).attr('data');
$('#loader').append('<iframe src="https://www.youtube.com/embed/'+data+'" frameborder="0" allowfullscreen></iframe>');
$('#overlay').fadeIn(250);
});
$('#close').click(function() {
$('#overlay').fadeOut(250,function() {
$('#loader').html('');
});
});
});
/* VIDEÓ */
function openModal() {
document.getElementById("myModal").style.display = "block";
}
function closeModal() {
document.getElementById("myModal").style.display = "none";
}
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("demo");
var captionText = document.getElementById("caption");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
captionText.innerHTML = dots[slideIndex-1].alt;
}
#videos a {
display: block;
width: 25%;
margin-bottom: 20px;
box-sizing: border-box;
padding: 0 10px;
float: left;
cursor: pointer;
text-decoration: none;
outline: 0;
}
#videos a:hover {
opacity: 0.7;
}
#videos a img {
width: 100%;
height: auto;
}
#overlay {
background: rgba(0,0,0,0.8);
position:fixed;
top: 0;
right: 0;
left:0;
bottom: 0;
width: 100%;
height: 100%;
z-index: 99999;
display: none;
}
#overlay .modal {
background: #fff;
border-radius: 5px;
width: 90%;
margin: 100px auto;
max-width: 800px;
min-height: 100px;
position: relative;
padding: 30px 20px 15px;
}
#overlay .modal #close {
position: absolute;
top: 5px;
right: 5px;
cursor: pointer;
}
#overlay iframe {
width: 100%;
}
/* VIDEÓ VÉGE */
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);
}
<link href='https://fonts.googleapis.com/css?family=Roboto+Mono:400,300' rel='stylesheet' type='text/css'>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<h1 style="text-align:center">Lightbox</h1>
<div class="row">
<div class="column">
<img src="img_nature.jpg" style="width:100%" onclick="openModal();currentSlide(1)" class="hover-shadow cursor">
</div>
<div class="column">
<img src="img_snow.jpg" style="width:100%" onclick="openModal();currentSlide(2)" class="hover-shadow cursor">
</div>
<div class="column">
<img src="img_mountains.jpg" style="width:100%" onclick="openModal();currentSlide(3)" class="hover-shadow cursor">
</div>
<div class="column">
<img src="img_lights.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="img_nature_wide.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">2 / 4</div>
<img src="img_snow_wide.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">3 / 4</div>
<img src="img_mountains_wide.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">4 / 4</div>
<img src="img_lights_wide.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="img_nature_wide.jpg" style="width:100%" onclick="currentSlide(1)" alt="Nature and sunrise">
</div>
<div class="column">
<img class="demo cursor" src="img_snow_wide.jpg" style="width:100%" onclick="currentSlide(2)" alt="Snow">
</div>
<div class="column">
<img class="demo cursor" src="img_mountains_wide.jpg" style="width:100%" onclick="currentSlide(3)" alt="Mountains and fjords">
</div>
<div class="column">
<img class="demo cursor" src="img_lights_wide.jpg" style="width:100%" onclick="currentSlide(4)" alt="Northern Lights">
</div>
</div>
</div>
<br>
<h2 style="text-align:center">Videos</h2>
<div id="videos">
<a data="uT6YOI6JcRs"></a>
<a data="B9FzVhw8_bY"></a>
<a data="d0K436vUM4w"></a>
<a data="PhbWIFDqQfk"></a>
</div>
<div id="overlay">
<div class="modal">
<div id="close">X</div>
<div id="loader"></div>
</div>
</div>
I don't get errors. I wanted to be able to click to the images separated from the videos and vice-versa. If you delete the css from VIDEÓ to VIDEÓ VÉGE You can see that the image gallery is working. And if you delete the css from VIDEÓ VÉGE to the bottom of the style you can see that the video page is working too.
I tried to modify the z-indexes for both of the css codes.

Okay the problem was that i used two of the same .modal in the css. I renamed the video's css modal to modale in both the css and in the html and everything is working. Thank you all!

Image slider html css [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 3 years ago.
Improve this question
I need to create this image slider. Which language/template/js/code is the best to use? I was thinking about slick, but I think it can be easier?

Here is the code without using any library
Just change the image URL to your image
Doing something without any library is the best practise for performance
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("demo");
var captionText = document.getElementById("caption");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
captionText.innerHTML = dots[slideIndex-1].alt;
}
body {
font-family: Arial;
margin: 0;
}
* {
box-sizing: border-box;
}
img {
vertical-align: middle;
}
/* Position the image container (needed to position the left and right arrows) */
.container {
position: relative;
}
/* Hide the images by default */
.mySlides {
display: none;
}
/* Add a pointer when hovering over the thumbnail images */
.cursor {
cursor: pointer;
}
/* Next & previous buttons */
.prev,
.next {
cursor: pointer;
position: absolute;
top: 40%;
width: auto;
padding: 16px;
margin-top: -50px;
color: white;
font-weight: bold;
font-size: 20px;
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;
}
/* Container for image text */
.caption-container {
text-align: center;
background-color: #222;
padding: 2px 16px;
color: white;
}
.row:after {
content: "";
display: table;
clear: both;
}
/* Six columns side by side */
.column {
float: left;
width: 16.66%;
}
/* Add a transparency effect for thumnbail images */
.demo {
opacity: 0.6;
}
.active,
.demo:hover {
opacity: 1;
}
<h2 style="text-align:center">Slideshow Gallery</h2>
<div class="container">
<div class="mySlides">
<div class="numbertext">1 / 6</div>
<img src="https://helpx.adobe.com/in/stock/how-to/visual-reverse-image-search/_jcr_content/main-pars/image.img.jpg/visual-reverse-image-search-v2_1000x560.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">2 / 6</div>
<img src="img_5terre_wide.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">3 / 6</div>
<img src="img_mountains_wide.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">4 / 6</div>
<img src="img_lights_wide.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">5 / 6</div>
<img src="img_nature_wide.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">6 / 6</div>
<img src="img_snow_wide.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="row">
<div class="column">
<img class="demo cursor" src="https://helpx.adobe.com/in/stock/how-to/visual-reverse-image-search/_jcr_content/main-pars/image.img.jpg/visual-reverse-image-search-v2_1000x560.jpg" style="width:100%" onclick="currentSlide(1)" alt="The Woods">
</div>
<div class="column">
<img class="demo cursor" src="img_5terre.jpg" style="width:100%" onclick="currentSlide(2)" alt="Cinque Terre">
</div>
<div class="column">
<img class="demo cursor" src="img_mountains.jpg" style="width:100%" onclick="currentSlide(3)" alt="Mountains and fjords">
</div>
<div class="column">
<img class="demo cursor" src="img_lights.jpg" style="width:100%" onclick="currentSlide(4)" alt="Northern Lights">
</div>
<div class="column">
<img class="demo cursor" src="img_nature.jpg" style="width:100%" onclick="currentSlide(5)" alt="Nature and sunrise">
</div>
<div class="column">
<img class="demo cursor" src="img_snow.jpg" style="width:100%" onclick="currentSlide(6)" alt="Snowy Mountains">
</div>
</div>
</div>

var slideIndex = 0;
showSlides();
function showSlides() {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) {slideIndex = 1}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
setTimeout(showSlides, 10000); // Change image every 2 seconds
}
* {box-sizing: border-box;}
body {font-family: Verdana, sans-serif;}
.mySlides {display: none;}
img {vertical-align: middle;}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* Caption text */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* The dots/bullets/indicators */
.dot {
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active {
background-color: #717171;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
#-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
#keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
/* On smaller screens, decrease text size */
#media only screen and (max-width: 300px) {
.text {font-size: 11px}
}
<h2>Automatic Slideshow</h2>
<p>Change image every 10 seconds:</p>
<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="https://picsum.photos/1000/640?image=990" style="width:100%">
<div class="text">Caption Text</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 3</div>
<img src="https://picsum.photos/1000/640?image=991" style="width:100%">
<div class="text">Caption Two</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 3</div>
<img src="https://picsum.photos/1000/640?image=992" style="width:100%">
<div class="text">Caption Three</div>
</div>
</div>
<br>
<div style="text-align:center">
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>

Develop Reference

JavaScript is the programming language of the Web.

Linking to specific slide - javascript

Related

Multiple Slider With same Class and same Controller using shopify liquid and javascript

Changing a CSS Class using Javascript If / Then

How to hide the left arrow of the first image and the right arrow of the last image

Two css code is overleapping each other and can't see one of them

Image slider html css [closed]

Categories

Resources