I am trying to create a image slideshow. Presently I write a simple code to display images. Now when I add new images to the same folder I have to again update the code for displaying the new image. How do I make it dynamic so that the code automatically picks the image and displays in the HTML page.
<body>
<div class="slideshow-container">
<div class="mySlides fade">
<img src="img_nature_wide.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<img src="img_snow_wide.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<img src="img_mountains_wide.jpg" style="width:100%">
</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>
</div>
<script>
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("dot");
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>
</body>
Optionally, if you are not using server side scripting, you can use a JavaScript array and insert images. Will not work for 50 images, it's cumbersome.
document.addEventListener( 'DOMContentLoaded', function(){
// insert your images here
var imgs = [ 'one.jpg', 'two.jpg' ];
var div, img;
for( var x = 0; x < imgs.length;x++ ){
div = document.createElement('div');
div.className = 'mylides fade';
img = document.createElement('img');
img.src = imgs[x];
div.appendChild( img );
document.querySelector('.slideshow-container').insertBerofe( div, document.querySelector('.next') );
}
}, false
)
Related
Hi to everyone I found a slider in w3schools.com and I already implement it; You can see it here. The w3schools tutorial has the script to add the autoplay but in this case, is one or another script. ¿Is there a way to use it with arrows and autoplay?
This is the only arrows script:
<script>
var slideIndex = 1;
showSlides(slideIndex);
// Next/previous controls
function plusSlides(n) {
showSlides(slideIndex += n);
}
// Thumbnail image controls
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
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>
THANKS
You can do this with the code below. I have added a stop button so you can see how to stop the autoplaying as well.
N.B. I've added an id to your next button so there's no confusion about which element to click. Using class names isn't advisable if you might want to use .next elsewhere.
The code is fully commented.
Let me know if you wanted anything else.
// Start autoplaying automatically
var autoplayInterval = setInterval(function() {
// Get element via id and click next
document.getElementById("next").click();
}, 1000); // Do this every 1 second, increase this!
// Stop function added to button
function stopAutoplay() {
// Stop the autoplay
clearInterval(autoplayInterval);
}
var slideIndex = 1;
showSlides(slideIndex);
// Start autoplaying automatically
var autoplayInterval = setInterval(function() {
// Get element via id and click next
document.getElementById("next").click();
}, 1000); // Do this every 1 second, increase this!
// Stop function added to button
function stopAutoplay() {
// Stop the autoplay
clearInterval(autoplayInterval);
}
// Next/previous controls
function plusSlides(n) {
showSlides(slideIndex += n);
}
// Thumbnail image controls
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
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";
}
<body data-new-gr-c-s-check-loaded="14.991.0" data-gr-ext-installed="">
<!-- Slideshow container -->
<div class="slideshow-container">
<!-- Full-width images with number and caption text -->
<div class="mySlides fade" style="display: block;">
<div class="numbertext">1 / 3</div>
<img src="https://acrip.co/wp-content/uploads/2021/01/banner-panel-enero-19.jpg" style="width:100%">
<div class="text">Caption Text</div>
</div>
<div class="mySlides fade" style="display: none;">
<div class="numbertext">2 / 3</div>
<img src="https://acrip.co/wp-content/uploads/2021/01/banner-webinar-soluciones-20-3.jpg" style="width:100%">
<div class="text">Caption Two</div>
</div>
<div class="mySlides fade" style="display: none;">
<div class="numbertext">3 / 3</div>
<img src="https://acrip.co/wp-content/uploads/2020/12/slider_3-kactus.jpg" style="width:100%">
<div class="text">Caption Three</div>
</div>
<!-- Next and previous buttons -->
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a id="next" class="next" onclick="plusSlides(1)">❯</a>
</div>
<br>
<!-- The dots/circles -->
<div style="text-align:center">
<span class="dot active" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
</div>
<br>
<button id="stopAutoplayButton" onclick="stopAutoplay();">Stop</button>
</body>
I am working on a carousel in w3school. They actually have an inline javascript code and I am trying to convert it to an external javascript file. I have this code in my external file
window.addEventListener('DOMContentLoaded', function () {
var slideIndex = 1;
showSlides(slideIndex);
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
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";
}
}, false);
But when I navigate the carousel, it displays error Uncaught ReferenceError: currentSlide is not defined at HTMLSpanElement.onclick and does not work/navigate the images in the carousel
This is the HTML code
<div class="slideshow">
<div class="slideshow-container">
<div class="mySlides fade">
<img class="carousel-item" src="https://lorempixel.com/800/400/food/1">
</div>
<div class="mySlides fade">
<img class="carousel-item" src="https://lorempixel.com/800/400/food/2">
</div>
</div>
<div class="slide-nav">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
</div>
</div>
<script type="text/javascript" src="js/components.js"></script>
Because currentSlide is not globally accessible (HTML inline event handlers run in the global scope). You need to define it in the global scope for it to work:
function currentSlide(n) {
showSlides(slideIndex = n);
}
window.addEventListener("DOMContentLoaded", function() {...}, false);
I have four tabs and the first tab has a slide show.
I am able to trigger the first tab on page load but for some reason the first slide of the slideshow inside the first tab shows a blank image. I can't figure out from where I can invoke the showSldies() function to load the first image in the slideshow as soon as the tab loads. Any help would be appreciated.
This is the main index page:
<html>
<head>
<title>BHU MCA Portal</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="material.css">
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js">
</script>
<script>
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("dot");
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>
<script type="text/javascript" language="javascript">
$(document).ready(function() { /// Wait till page is loaded
$('#main').load('home.php #main');
var elements = document.getElementsByTagName('a');
for(var i = 0, len = elements.length; i < len; i++) {
elements[i].onclick = function () {
$('#main').load(this.id+'.php #main');
var current = document.getElementsByClassName("active");
current[0].className = current[0].className.replace("active", "");
this.className += "active";
}
}
}); //// End of Wait till page is loaded
</script>
</head>
<div>
<center><img src="img/logo_main.png" height="20%" width="30%"></center>
</div>
<ul>
<li>Home</li>
<li>Attendance Portal</li>
<li>About</li>
<li>Contact Us</li>
</ul>
<div style="display:flex;">
<div id="main" style="flex-grow:1;"></div>
<div style="line-height: 25px; font-style: italic;">
<img src="img/mmm.jpg" style="display: inline-block;" >
<p>"Religion of students is acquisition of knowledge"</p>
<p align="right">~ Mahamana Pt Madan Mohan Malaviya</p>
</div>
</div>
</html>
This is home.php
<html>
<head>
</head>
<div id="main" class="form w3-animate-top">
<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext">1 / 4</div>
<img src="images\15.jpg" style="width:100%">
<div class="text">Administration Building</div>
</div>
...<more slides here>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<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(3)"></span>
</div>
<br>
</div>
</html>
Pastebin link to complete code :
https://pastebin.com/Qm0XibKB
https://pastebin.com/mGetfw8K
UPDATE:
This code works now:
https://pastebin.com/T9FG8VhE
You call showSlides(slideIndex); before the HTML and home.php have loaded. I would try creating a Callback Function for the .load() method and moving this line into that function:
First: Remove the showSlides(slideIndex); from the top of the script
...
var slideIndex = 1;
//remove from here
//showSlides(slideIndex);
function plusSlides(n) {
...
Second: Create the Callback Function for the .load() method and insert showSlides(slideIndex); into that function
...
$(document).ready(function() { /// Wait till page is loaded
$('#main').load('home.php #main', function() { //begin Callback Function
var elements = document.getElementsByTagName('a');
for(var i = 0, len = elements.length; i < len; i++) {
elements[i].onclick = function () {
$('#main').load(this.id+'.php #main');
var current = document.getElementsByClassName("active");
current[0].className = current[0].className.replace("active", "");
this.className += "active";
}
}
showSlides(slideIndex); //insert here
}); //end Callback Function
}); //// End of Wait till page is loaded
...
I want to stop slide show on mouse over and start on mouse out.
I use this code but it doesn't work, and I cant figure out the problem.
here is my code and I would be thank if anybody help me.
var slideIndex = 1;
var timer = null;
showSlides(slideIndex);
function plusSlides(n) {
clearTimeout(timer);
showSlides(slideIndex += n);
}
function currentSlide(n) {
clearTimeout(timer);
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
if (n==undefined){n = ++slideIndex}
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";
timer = setTimeout(showSlides, 5000);
}
$("#slideshow-container").mouseenter(function () {
clearInterval(mySlides);
});
$(function () {
$("#slideshow-container").click(function () {
$("#slideshow-container").stop();
})
})
and this link is my code with css and html, maybe help.
http://jsfiddle.net/3kspho6g/2/
Please try below solution
Updated Javascript
<script type="text/javascript">
var slideIndex = 1;
var timer = null;
showSlides(slideIndex);
function plusSlides(n) {
clearTimeout(timer);
showSlides(slideIndex += n);
}
function currentSlide(n) {
clearTimeout(timer);
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
if (n==undefined){n = ++slideIndex}
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";
timer = setTimeout(showSlides, 2000);
}
function stopShow(timer) {
clearInterval(timer);
}
function startShow() {
timer = setTimeout(showSlides, 2000);
}
$(function() {
$('.slideshow-container').hover(function() {
stopShow(timer);
}, function() {
timer = setTimeout(showSlides, 2000);
});
});
</script>
HTML
<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext">1 / 4</div>
<img src="https://drawingsdaily.com/wp-content/uploads/2018/06/forms-of-abstract-art-41-best-abstract-paintings-in-the-world-inspirationseek.jpg" style="width:100%;height:400px">
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 4</div>
<img src="https://drawingsdaily.com/wp-content/uploads/2018/05/watercolor-painting-art-50-best-watercolor-paintings-from-top-artists-around-the-world.jpg" style="width:100%;height:400px">
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 4</div>
<img src="https://www.painterartist.com/static/ptr/product_content/painter/2018/bob-ross/gallery/08.jpg" style="width:100%;height:400px">
</div>
<div class="mySlides fade">
<div class="numbertext">4 / 4</div>
<img src="https://afremov.com/images/product/image_427.jpeg" style="width:100%;height:400px">
</div>
<a class="prev" onclick="plusSlides(1)">❮</a>
<a class="next" onclick="plusSlides(-1)">❯</a>
</div>
<div style="text-align:center" class="dot1">
<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 Same as it is
Hope this help!
If you use setTimeout you need to use clearTimeout and the value need to be your timer:
$("#slideshow-container").mouseenter(function () {
clearTimeout(timer);
});
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' );