I have a little bit problem while using variables of two functions together. In this both functions are not working at once.
Here are my two functions :
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(" red", "");
}
x[slideIndex - 1].style.display = "block";
dots[slideIndex - 1].className += " red";
}
var slideIndex = 1;
showDivs2(slideIndex);
function plusDivs2(n) {
showDivs2(slideIndex += n);
}
function currentDiv2(n) {
showDivs2(slideIndex = n);
}
function showDivs2(n) {
var i;
var x = document.getElementsByClassName("mySlides2");
var dots = document.getElementsByClassName("demo2");
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(" red", "");
}
x[slideIndex - 1].style.display = "block";
dots[slideIndex - 1].className += " red";
}
.mySlides {
display: none;
}
.mySlides2 {
display: none;
}
<div class="content">
<img class="mySlides" src="http://www.i-am-bhaskar.com/panel/assets/img/blogs/43288.png" style="width: 300px;height: 200px;">
<img class="mySlides" src="http://www.i-am-bhaskar.com/panel/assets/img/blogs/17874.jpg" style="width: 300px;height: 200px;">
<img class="mySlides" src="http://www.i-am-bhaskar.com/panel/assets/img/blogs/blog.jpg" style="width: 300px; height: 200px;">
</div>
<div class="center">
<div class="section">
<button class="button light-grey" onclick="plusDivs(-1)">❮ Prev</button>
<button class="button light-grey" onclick="plusDivs(1)">Next ❯</button>
</div>
</div>
<div class="content2">
<img class="mySlides2" src="http://www.i-am-bhaskar.com/panel/assets/img/blogs/43288.png" style="width: 300px;height: 200px;">
<img class="mySlides2" src="http://www.i-am-bhaskar.com/panel/assets/img/blogs/17874.jpg" style="width: 300px;height: 200px;">
<img class="mySlides2" src="http://www.i-am-bhaskar.com/panel/assets/img/blogs/blog.jpg" style="width: 300px;height: 200px;">
</div>
<div class="center">
<div class="section">
<button class="button light-grey" onclick="plusDivs2(-1)">❮ Prev</button>
<button class="button light-grey" onclick="plusDivs2(1)">Next ❯</button>
</div>
</div>
In this, I have two div containing images with next and prev button, images of first function is loading by default but when i click on button then second image is appear. I just want to fix it i.e images of both div will load default.
Related
why wouldn't this work? I am trying to make it so when you click on the video/div that the iframe video is in it would stop the automatic slider but I just can't get it to work.
javascript:
let slideIndex = 0;
showSlides();
let click = 0;
function clicked() {
var button = document.document.getElementsByClassName('slideshow-container');
button.addEventListener('slideshow-container', function handleClick() {
if (click = 1) {
click = 0;
}
else {
click = 1;
}
});
return click;
}
function showSlides() {
let i;
let slides = document.getElementsByClassName("slides");
let 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";
if (click != 1)
{
setTimeout(showSlides, 6666);
}
}
HTML:
<Center>
<div class="slideshow-container">
<div class="slides fade">
<div class="numbertext">1 / 3</div>
<iframe width="1000" height="500" src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
</div>
<div class="slides fade">
<div class="numbertext">2 / 3</div>
<iframe width="1000" height="500" src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
</div>
<div class="slides fade">
<div class="numbertext">3 / 3</div>
<iframe width="1000" height="500" src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
</div>
</div>
</br>
<div>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>
</Center>
</div>
<br>
<script src="showSlides.js"></script>
Edit: as requested I swapped out the screenshots for the actual code and spent about 5 minutes trying to figure out how to actually post it and now I need more details but I don't know what to add so I'm writing this.
let slideIndex = 0;
var id = showSlides();
let click = 0;
function clicked() {
var button = document.document.getElementsByClassName('slideshow-container');
button.addEventListener('slideshow-container', function handleClick() {
if (click = 1) {
click = 0;
}
else {
click = 1;
}
});
return click;
}
function showSlides() {
let i;
let slides = document.getElementsByClassName("slides");
let 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";
if (click != 1)
{
var timeoutId = setTimeout(showSlides, 6666);
return timeoutId
}
}
Then to stop it, just call
clearTimeout(id)
I made a slideshow. This is the HTML code!
<div class="slideshow-container">
<div class="mySlides fade">
<img src="img/background.png" style="width:100%">
</div>
<div class="mySlides fade">
<img src="img/background2.png" style="width:100%">
</div>
<div class="mySlides fade">
<img src="img/background3.png" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
and this is the javascript code
<script>
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function showSlides(slideIndex) {
var i;
var slides = document.getElementsByClassName("mySlides");
if (slideIndex > slides.length) { slideIndex = 1; }
if (slideIndex < 1) { slideIndex = slides.length; }
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slides[slideIndex - 1].style.display = "block";
}
</script>
but due to some unknown reasons it doesn't work properly, please debug and explain why this code is not working?
You define your index variable twice: slideIndex. Once as a global variable and then as a function parameter, overwriting only the function parameter value. You can remove the function parameter and increment / decrease the slideIndex value in your plusSlides function.
var slideIndex = 1;
showSlides();
function plusSlides(n) {
slideIndex += n;
showSlides();
}
function showSlides() {
var slides = document.getElementsByClassName("mySlides");
if (slideIndex > slides.length) { slideIndex = 1; }
if (slideIndex < 1) { slideIndex = slides.length; }
for (var i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slides[slideIndex - 1].style.display = "block";
}
I added a button to my website that pop up a gallery, my problem is that the gallery is loading the image from the code, so when my client needs to upload a new image I need to add it for him in the code also. how can I make it update auto? I mean when the client will add an image to “media” in WordPress, so the gallery will update auto, thanks!
here is the code im using right now:
<!DOCTYPE html>
<html>
<body>
<img class="alignnone size-full wp-image-133 aligncenter" style="border: 5px solid white; border-radius: 50%; background: white; box-shadow: 1px 1px 5px gray;" src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c2/F_icon.svg/2000px-F_icon.svg.png" alt="" width="72" height="72" onclick="openModal();currentSlide(1)" class="hover-shadow cursor"><strong>try</strong>
</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://upload.wikimedia.org/wikipedia/commons/thumb/c/c2/F_icon.svg/2000px-F_icon.svg.png" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">2 / 4</div>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c2/F_icon.svg/2000px-F_icon.svg.png" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">3 / 4</div>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c2/F_icon.svg/2000px-F_icon.svg.png" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">4 / 4</div>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c2/F_icon.svg/2000px-F_icon.svg.png" alt="Nature and sunrise" 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>
<script>
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;
}
</script>
</body>
</html>
use this shotcode it's going to work i think
<?php
function your_custom_gallery() {
$attachments = get_posts( array(
'post_type' => 'attachment',
'posts_per_page' => 4,
'post_status' => null,
'post_mime_type' => 'image'
) );
?>
<div id="imyModal" class="modal" style="direction: ltr!important;">
<span class="close cursor" onclick="closeModal()">×</span>
<div class="modal-content">
<?php
$i = 0;
foreach ( $attachments as $attachment ) {
$image_attributes = wp_get_attachment_image_src( $attachment->ID, 'original' );
echo '<div class="mySlides">';
echo '<div class="numbertext"> ' . $i . ' / 4</div>';
echo '<img src="' . $image_attributes[0] . '" style="width:100%">';
echo '</div>';
$i ++;
}
?>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
</div>
<?php
}
function add_script_to_head() {
?>
<script>
function openModal() {
document.getElementById('imyModal').style.display = "block";
}
function closeModal() {
document.getElementById('imyModal').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;
}
</script>
<?php
}
add_action( 'wp_head', 'add_script_to_head' );
add_shortcode( 'custom_gallery', 'your_custom_gallery' );
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 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.