I am looking to create an HTML color visualizer for steel buildings. This will be placed on my company's website. I'm wanting to see if it is possible (in HTML) to load image layers (in their fixed positions) onto a canvas background, after a visitor clicks on a color swatch.
Here is a similar solution I am seeking.
var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex += n);
}
function currentDiv(n) {
showDivs(slideIndex = n);
}
function showDivs(n) {
var i;
var x = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("demo");
if (n > x.length) {
slideIndex = 1
}
if (n < 1) {
slideIndex = x.length
}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" w3-red", "");
}
x[slideIndex - 1].style.display = "block";
dots[slideIndex - 1].className += " w3-red";
}
.mySlides {
display: none
}
<button class="w3-button demo" onclick="currentDiv(2)">Tan Wall</button>
<button class="w3-button demo" onclick="currentDiv(3)">Red Roof</button>
<button class="w3-button demo" onclick="currentDiv(4)">Black Garage</button>
<button class="w3-button demo" onclick="currentDiv(5)">Black Trim</button>
<div class="w3-content" style="max-width:800px">
<img class="mySlides" src="http://metaldepotinc.com/Canvas-Background.png" style="width:100%">
<img class="mySlides" src="http://metaldepotinc.com/Wall-Tan.png" style="width:100%">
<img class="mySlides" src="http://metaldepotinc.com/Roof-Red.png" style="width:100%">
<img class="mySlides" src="http://metaldepotinc.com/Garage-Black.png" style="width:100%">
<img class="mySlides" src="http://metaldepotinc.com/Trim-Black.png" style="width:100%">
</div>
For example, when a visitor clicks on the "Red Roof" swatch I want the "Red-Roof.png" layer to load on top of the white building canvas. The positioning would be perfect since it is positioned correctly in the image file already. From there, I'd like the customer to add more image layers such as "Tan Wall" until the building combination fits their preferences. The final image should look like this after clicking all of the buttons.
Thanks for your time!
You can achieve this by css absolute positioning.
Additionally I recommend to use .classList.toggle instead of replacing the .className:
var slideIndex = 1;
function plusDivs(n) {
showDivs(slideIndex += n);
}
function currentDiv(n) {
showDivs(slideIndex = n);
}
function showDivs(n) {
var i;
var x = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("demo");
if (n > x.length) {
slideIndex = 1
}
if (n < 1) {
slideIndex = x.length
}
x[slideIndex - 1].classList.toggle("active");
dots[slideIndex - 1].classList.toggle("w3-red")
}
.mySlides {
display: none;
position:absolute;
}
.mySlides.active{
display:block;
}
<button class="w3-button demo" onclick="currentDiv(1)">Tan Wall</button>
<button class="w3-button demo" onclick="currentDiv(2)">Red Roof</button>
<button class="w3-button demo" onclick="currentDiv(3)">Black Garage</button>
<button class="w3-button demo" onclick="currentDiv(4)">Black Trim</button>
<div class="w3-content" style="max-width:800px;position: relative;">
<img src="http://metaldepotinc.com/Canvas-Background.png" style="width:100%;position: absolute ;z-index:-1">
<img class="mySlides" src="http://metaldepotinc.com/Wall-Tan.png" style="width:100%">
<img class="mySlides" src="http://metaldepotinc.com/Roof-Red.png" style="width:100%">
<img class="mySlides" src="http://metaldepotinc.com/Garage-Black.png" style="width:100%">
<img class="mySlides" src="http://metaldepotinc.com/Trim-Black.png" style="width:100%">
</div>
EDIT:
According to the asker's comment...
Use absolute position on every image, and...
Use toggle buttons (checkbox behavior) instead of hiding all images on button click and showing only one (radio button behavior)
Related
I have two images with different classes but I want the same JavaScript to be applied to both. This javascript basically allows for a slideshow by clicking on the button, but this only works for the images with the mySlides class, not the albums class. Take a look:
var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex += n);
}
function showDivs(n) {
var i;
var x = document.querySelectorAll(".mySlides, .albums");
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";
}
<link href="https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet"/>
<div class="inner">
<img class="mySlides" src="./imgs/IMG_1552.JPG">
<img class="mySlides" src="./imgs/IMG_0915.jpg">
<button class="w3-button w3-display-left" onclick="plusDivs(-1)">❮</button>
<button class="w3-button w3-display-right" onclick="plusDivs(+1)">❯</button>
</div>
<div class="inner">
<img class="albums" src="./imgs/travis.jpg">
<img class="albums" src="./imgs/killy.jpg">
<button class="w3-button w3-display-left" onclick="plusDivs(-1)">❮</button>
<button class="w3-button w3-display-right" onclick="plusDivs(+1)">❯</button>
</div>
The buttons are supposed to move to the next image eg from "travis.jpg" to "killy.jpg" but it only works for the mySlides class and not the albums class
The issue lies in
var x = document.querySelectorAll(".mySlides, .albums");
As you have to understand that this query selects all the 4 elements if you want to do for the second element of both classes you would have to go with
var x = document.querySelectorAll(".mySlides");
var y = document.querySelectorAll(" .albums");
and run the further logic on both var seperately
I have created this slider for my website but I need to apply a fadeIn/out when go next/prev. Can anyone explain me how to do this or show me the code?
JS
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";
}
HTML
<div class="container">
<img class="mySlides" src="http://placehold.it/600x200">
<img class="mySlides" src="http://placehold.it/600x150" style="display:none">
<img class="mySlides" src="http://placehold.it/600x100" style="display:none">
<img class="mySlides" src="http://placehold.it/600x200" style="display:none">
<button onclick="plusDivs(-1)">❮</button>
<button onclick="plusDivs(1)">❯</button>
</div>
I think you can replace this:
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex-1].style.display = "block";
With this:
$('.mySlides:visible').fadeOut(function() {
$(x[slideIndex-1]).fadeIn();
});
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}
$('.mySlides:visible').fadeOut(function() {
$(x[slideIndex-1]).fadeIn();
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<img class="mySlides" src="http://placehold.it/600x200">
<img class="mySlides" src="http://placehold.it/600x150" style="display:none">
<img class="mySlides" src="http://placehold.it/600x100" style="display:none">
<img class="mySlides" src="http://placehold.it/600x200" style="display:none">
<button onclick="plusDivs(-1)">❮</button>
<button onclick="plusDivs(1)">❯</button>
</div>
I created a simple picture slideshow for my website but the problem I have is when you first go to the site it shows all the pictures and its not until you click one of the scroll arrows that it goes to a slideshow. I want it to automatically only show one picture at a time when you first open the website. Here is the code I have:
<div class="wrapper">
<h2>Gallery</h2>
<img class="mySlides" src="assets/images/chickens1.jpg">
<img class="mySlides" src="assets/images/goat1.jpg">
<img class="mySlides" src="assets/images/goat4.jpg">
<img class="mySlides" src="assets/images/goat2.jpg">
<button class="w3-button w3-display-left" onclick="plusDivs(-1)">❮</button>
<button class="w3-button w3-display-right" onclick="plusDivs(+1)">❯</button>
JavaScript:
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";
}
It's hard to tell just from what you've posted, but what I expect is going on is that initially, all 4 images are visible, due to the CSS styling on them. Then, when a user interacts with the page, your JavaScript gets called, which makes only 1 of them visible.
One thing you might try is to set it up so they are all set to display:none to begin with, and on page load, call showDivs(1).
I used carousel slides codes for JS, css and html for my multiple slides the problem is instead of playing at the same time the slides will wait for the 1st slides in the same page before the second slides will wait for the the 1st slide to finish before it will play
HTML page---->>
<section id="section">
<div class="w3-content w3-section" style="max-width:500px">
<img class="mySlides" src="slides/slide1.JPEG" style="width:100%">
<img class="mySlides" src="slides/slide2.JPEG" style="width:100%">
<img class="mySlides" src="slides/slide3.JPEG" style="width:100%">
<img class="mySlides" src="slides/slide4.JPEG" style="width:100%">
</div>
</section>
JS ---->>>
<script>
var myIndex = 0;
carousel();
function carousel() {
var i;
var x = document.getElementsByClassName("slideShow");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
myIndex++;
if (myIndex > x.length) {myIndex = 1}
x[myIndex-1].style.display = "block";
setTimeout(carousel, 2000); // Change image every 2 seconds
}
</script>
I put an image slider on my website to show the image one by one on click event, but on the last image I want to stop image slider. I don't want to repeat image again and I don't want forward slide but we can go back.
<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>
HTML:
<div class="w3-content w3-display-container">
<div style="margin-left:150px">
<img class="mySlides" src="../../../../../imageslider2/slide1.jpg" style="width:auto; height:auto"/>
<img class="mySlides" src="../../../../../imageslider2/slide2.jpg" style="width:auto; height:auto"/>
<pre> <a class="w3-btn-floating w3-display-left" onclick="plusDivs(-1)">❮</a>
<a class="w3-btn-floating w3-display-right" onclick="plusDivs(1)">❯</a>
</div>
First you need to get a count of the total number of slides and set it as a variable, which you can do with .length and then you need to add a conditional statement to your plusDivs function to do something(alert in the below example) if the slideIndex value is equal to that of the total number of slides:
var slideIndex = 1,
totalSlides = document.querySelectorAll('.mySlides').length;
showDivs(slideIndex);
function plusDivs(n) {
if (slideIndex === totalSlides) {
alert('End of slideshow');
} else {
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";
}
<div class="w3-content w3-display-container">
<div style="margin-left:150px">
<img class="mySlides" src="http://placehold.it/250x250" style="width:auto; height:auto"/>
<img class="mySlides" src="http://placehold.it/250x250/000/fff" style="width:auto; height:auto"/>
<pre>❮
❯ </pre>
</div>
</div>
Alternatively, you could use the same approach to simply hide the previous or next buttons if they are at the start or the end of the slideshow.