I have three images which I want to be in a slide show using javascript, the problem is that it shows the first image only and blank for the other two. What can the problem be?
I have searched the internet for similar solutions but they do not work with my situation.
<div class="owl-init slider-main owl-carousel" data-items="1" data-nav="true" data-dots="false">
<div class="item-slide slide1">
<img src="images/banners/slide2.jpg">
</div>
<div class="item-slide slide1">
<img src="images/banners/slide1.jpg">
</div>
<div class="item-slide slide1">
<img src="images/banners/slide3.jpg">
</div>
</div>
<!-- ============== main slidesow .end // ============= -->
<!-- ============== slider auto scroll js ============= -->
<script>
let sliderImages = document.querySelectorAll('.item-slide'),
current=0;
//clear all images
function reset(){
for(let i = 0; i < sliderImages.length; i++){
sliderImages[i].style.display = 'none';
}
}
//init slider
function startSlide(){
reset();
sliderImages[current].style.display = 'block';
if(current < sliderImages.length - 1){
current++;
//document.write(current)
}
else{
current = 0;
//document.write(current)
}
//document.write(sliderImages.length);
setTimeout("startSlide()",2000);
}
startSlide();
</script>
Please check the image URL that you have given. It's working for me
<div class="owl-init slider-main owl-carousel" data-items="1" data-nav="true" data-dots="false">
<div class="item-slide slide1">
<img src="https://homepages.cae.wisc.edu/~ece533/images/airplane.png">
</div>
<div class="item-slide slide1">
<img src="https://homepages.cae.wisc.edu/~ece533/images/boat.png">
</div>
<div class="item-slide slide1">
<img src="https://homepages.cae.wisc.edu/~ece533/images/pool.png">
</div>
</div>
<!-- ============== main slidesow .end // ============= -->
<!-- ============== slider auto scroll js ============= -->
<script>
let sliderImages = document.querySelectorAll('.item-slide'),
current=0;
//clear all images
function reset(){
for(let i = 0; i < sliderImages.length; i++){
sliderImages[i].style.display = 'none';
}
}
//init slider
function startSlide(){
reset();
sliderImages[current].style.display = 'block';
if(current < sliderImages.length - 1){
current++;
//document.write(current)
}
else{
current = 0;
//document.write(current)
}
//document.write(sliderImages.length);
setTimeout("startSlide()",2000);
}
startSlide();
</script>
Related
i am trying to make my splash screen overlap the website.
The splash screen gets pushed away by the elements that i want on the background.
here is my HTML
<!DOCTYPE html>
window.OneSignal = window.OneSignal || [];
OneSignal.push(function() {
OneSignal.init({
appId: "355bfb40-16e9-48aa-93c3-d9eb93775989",
});
});
Rabbadz
<link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,600&subset=latin-ext" rel="stylesheet">
<!-- CSS -->
<link href="assets/css/main.css" rel="stylesheet">
<!-- JS -->
<script src="assets/js/vendor/modernizr-2.8.3.min.js"></script>
<script src="assets/js/vendor/jquery-1.12.0.min.js"></script>
<script src="assets/js/plugins/animate-headline.js"></script>
<script src="assets/js/main.js"></script>
</head>
<body>
<audio id="myAudio">
<source src="assets/sound.mp3" type="audio/mpeg">
</audio>
<!--logo-->
<img src="assets/images/logo.png" class="logo">
<!-- Options headline effects: .rotate | .slide | .zoom | .push | .clip -->
<div class="hero-section hero-section--color clearfix zoom">
<!--we are rabbadz-->
<div class="anitext">
<div class="title-01 title-01--11 text-center">
<h2 class="title__heading">
<div class="hero-section__words text-center">
<div class="title__effect is-visible">WE ARE RABBITS</div>
<div class="title__effect">WE ARE BADASS</div>
<div class="title__effect">WE ARE RABBADZ</div>
</div>
</h2>
<div class="title__description">Coming soon to the metaverse.</div>
<!-- Options btn color: .btn-success | .btn-info | .btn-warning | .btn-danger | .btn-primary -->
<div class="title__action">MINT</div>
</div>
</div>
</div>
</div>
</div>
<!--Particles-->
<div
id="particles-js"></div>
<script src="assets/js/particles.js"></script>
<script src="assets/js/app.js"></script>
<!-- splashscreen-->
<div class="scene content-hidden scene">
<div class="scene">
<div class="moon"></div>
</div>
<script type="text/javascript">
function stars(){
let count = 500;
let scene = document.querySelector('.scene');
let i = 0;
while(i < count){
let star = document.createElement("i");
let x = Math.floor(Math.random() * window.innerWidth);
let y = Math.floor(Math.random() * window.innerHeight);
let duration = Math.random() * 10;
let size = Math.random() * 2;
star.style.left = x+'px';
star.style.top = y+'px';
star.style.width = 1+size+'px';
star.style.height = 1+size+'px';
star.style.animationDuration = 5+duration+'s';
star.style.animationDelay = duration+'s';
scene.appendChild(star);
i++
}
}
stars();
</script>
<!--Rabbadverse button-->
$(function() {
var scene = $('.scene'),
enterButton = scene.find('.knop');
setTimeout(function() {
scene.removeClass('content-hidden');
}, 500);
enterButton.on('click', function(e) {
e.preventDefault();
scene.addClass('content-hidden').fadeOut();
});
var anitext = $('.forest'),
enterButton = scene.find('.knop');
setTimeout(function() {
forest.removeClass('content-hidden');
}, 500);
enterButton.on('click', function(e) {
e.preventDefault();
forest.addClass('content-hidden').fadeOut();
});
});
</script>
var x = document.getElementById("myAudio");
function playAudio() {
x.play();
}
function pauseAudio() {
x.pause();
}
</body>
If I understand it right, you want your "scene" div above the black background div.
You could achieve this by this simple css:
.scene {
position: fixed; /* make it relative to the viewport */
inset: 0; /* make the div close to the edge of the relative element, here the viewport, so it takes the full screen */
}
I am trying to create my own Lightbox Gallery instead of using a plugin. So I found a really simple script online but now I am trying to display the alt text of the image that is shown in the Lightbox as a caption.
I managed to display the alt text of all images in the gallery but obviously only the alt text of the shown image should be displayed, can someone help me as to how I only pick the alt text from the shown image?
Here is my code:
<div class="lightbox">
<div class="wrapper">
<div class="gallery">
<div class="image">
<div class="subimage"><img src="images/cardmapr-rDzI7m7sjPE-unsplash.jpg" loading="lazy" sizes="28vw" srcset="images/cardmapr-rDzI7m7sjPE-unsplash-p-500.jpeg 500w, images/cardmapr-rDzI7m7sjPE-unsplash-p-800.jpeg 800w, images/cardmapr-rDzI7m7sjPE-unsplash-p-1080.jpeg 1080w, images/cardmapr-rDzI7m7sjPE-unsplash-p-1600.jpeg 1600w, images/cardmapr-rDzI7m7sjPE-unsplash.jpg 1920w" alt="Caption alt test" class="image_2"></div>
</div>
<div class="image">
<div class="subimage"><img src="images/sergei-a--heLWtuAN3c-unsplash.jpg" loading="lazy" sizes="28vw" srcset="images/sergei-a--heLWtuAN3c-unsplash-p-500.jpeg 500w, images/sergei-a--heLWtuAN3c-unsplash-p-800.jpeg 800w, images/sergei-a--heLWtuAN3c-unsplash-p-1080.jpeg 1080w, images/sergei-a--heLWtuAN3c-unsplash-p-1600.jpeg 1600w, images/sergei-a--heLWtuAN3c-unsplash.jpg 1920w" alt="caption 2" class="image_2"></div>
</div>
<div class="image">
<div class="subimage"><img src="images/good-faces-agency-sKRavSCadwE-unsplash.jpg" loading="lazy" sizes="28vw" srcset="images/good-faces-agency-sKRavSCadwE-unsplash-p-500.jpeg 500w, images/good-faces-agency-sKRavSCadwE-unsplash-p-800.jpeg 800w, images/good-faces-agency-sKRavSCadwE-unsplash-p-1080.jpeg 1080w, images/good-faces-agency-sKRavSCadwE-unsplash-p-1600.jpeg 1600w, images/good-faces-agency-sKRavSCadwE-unsplash.jpg 1920w" alt="" class="image_2"></div>
</div>
<div class="image">
<div class="subimage"><img src="images/Bild_Haarentfernung_Nachher.png" loading="lazy" sizes="28vw" srcset="images/Bild_Haarentfernung_Nachher-p-500.png 500w, images/Bild_Haarentfernung_Nachher.png 536w" alt="caption last" class="image_2"></div>
</div>
</div>
</div>
<div class="preview-box">
<div class="image-box">
<div class="caption2"></div><img src="https://d3e54v103j8qbb.cloudfront.net/plugins/Basic/assets/placeholder.60f9b1840c.svg" loading="lazy" alt="test test" class="image_3">
</div>
</div>
<div class="shadow">
<div class="icon closebutton"></div>
<div class="slide prev"></div>
<div class="slide next"></div>
<div class="details">
<div class="title">
<p class="current-img">Test1</p>
<div>/</div>
<p class="total-img">Test2</p>
</div>
</div>
</div>
</div>
The very last part in this code, is the jquery I am using to display the alt texts:
const gallery = document.querySelectorAll(".image"),
previewBox = document.querySelector(".preview-box"),
previewImg = previewBox.querySelector("img"),
shadow = document.querySelector(".shadow"),
closeIcon = shadow.querySelector(".icon"),
currentImg = shadow.querySelector(".current-img"),
totalImg = shadow.querySelector(".total-img");
window.onload = ()=>{
for (let i = 0; i < gallery.length; i++) {
totalImg.textContent = gallery.length; //passing total img length to totalImg variable
let newIndex = i; //passing i value to newIndex variable
let clickedImgIndex; //creating new variable
gallery[i].onclick = () =>{
clickedImgIndex = i; //passing cliked image index to created variable (clickedImgIndex)
function preview(){
currentImg.textContent = newIndex + 1; //passing current img index to currentImg varible with adding +1
let imageURL = gallery[newIndex].querySelector("img").src; //getting user clicked img url
previewImg.src = imageURL; //passing user clicked img url in previewImg src
}
preview(); //calling above function
const prevBtn = document.querySelector(".prev");
const nextBtn = document.querySelector(".next");
if(newIndex == 0){ //if index value is equal to 0 then hide prevBtn
prevBtn.style.display = "none";
}
if(newIndex >= gallery.length - 1){ //if index value is greater and equal to gallery length by -1 then hide nextBtn
nextBtn.style.display = "none";
}
prevBtn.onclick = ()=>{
newIndex--; //decrement index
if(newIndex == 0){
preview();
prevBtn.style.display = "none";
}else{
preview();
nextBtn.style.display = "block";
}
}
nextBtn.onclick = ()=>{
newIndex++; //increment index
if(newIndex >= gallery.length - 1){
preview();
nextBtn.style.display = "none";
}else{
preview();
prevBtn.style.display = "block";
}
}
document.querySelector("body").style.overflow = "hidden";
previewBox.classList.add("show");
shadow.style.display = "block";
closeIcon.onclick = ()=>{
newIndex = clickedImgIndex; //assigning user first clicked img index to newIndex
prevBtn.style.display = "block";
nextBtn.style.display = "block";
previewBox.classList.remove("show");
shadow.style.display = "none";
document.querySelector("body").style.overflow = "scroll";
}
$('.shadow').on('click', function(e) {
if (e.target !== this)
return;
newIndex = clickedImgIndex; //assigning user first clicked img index to newIndex
prevBtn.style.display = "block";
nextBtn.style.display = "block";
previewBox.classList.remove("show");
shadow.style.display = "none";
document.querySelector("body").style.overflow = "scroll";
});
}
}
}
$('.gallery').find('img').each(function() {
var $alt = $(this).attr('alt');
$('.caption2').append($alt);
});
I would like to create, using the setInterval() JS function, a visual effect that displays text one character at the time with an interval of 100ms per character, on an Angular application.
Note that this happens in the index.html within the <app-root> tags, so it will appear only while the app is bootstrapped.
After reading the setInterval() page i thought that this would make the job, so this is my code:
var divs=['rBox','aBox','tBox','sBox'];
var index=-1;
function displayChars(){
for(container of divs){
document.getElementById(container).style.visibility='hidden';
}
var fun = setInterval(display,100);
}
function display(){
if(index < 4){
document.getElementById(divs[++index]).style.visibility='visible'
}else{
clearInterval(fun);
}
}
displayChars();
<app-root>
<div class="rats-div">
<div id="rBox">1</div>
<div id="aBox">2</div>
<div id="tBox">3</div>
<div id="sBox">4..</div>
</div>
</app-root>
But it does not display anything, the divs containing the numbers are there with visibility set to hidden but it seems like they are never set to visible
I can't see where the problem lies. If I look at the code from an algorithmic point of view, I guess I probably don't understand very well the inner working of setInterval().
fun was not declared globally
And index was incremented too much
A rough update to the code:
var divs=['rBox','aBox','tBox','sBox'];
var index=-1;
var fun
function displayChars(){
for(container of divs){
document.getElementById(container).style.visibility='hidden';
}
fun = setInterval(display,100);
}
function display(){
if(index < 3){
document.getElementById(divs[++index]).style.visibility='visible'
}else{
clearInterval(fun);
}
}
displayChars()
<app-root>
<div class="rats-div">
<div id="rBox">1</div>
<div id="aBox">2</div>
<div id="tBox">3</div>
<div id="sBox">4..</div>
</div>
</app-root>
After minor modifications it's working, see below. I changed index to start at 0 and to be used with divs[index++] (so use-then-increment), and to compare it with divs.length instead of hardcoded 4. Also I put variable fun at the global level.
var divs = ['rBox', 'aBox', 'tBox', 'sBox'];
var index = 0;
var fun = -1; // timer handle
function displayChars() {
for (container of divs) {
document.getElementById(container).style.visibility = 'hidden';
}
fun = setInterval(display, 100);
}
function display() {
if (index < divs.length) {
document.getElementById(divs[index++]).style.visibility = 'visible'
} else {
clearInterval(fun);
}
}
displayChars();
<div class="rats-div">
<div id="rBox">1</div>
<div id="aBox">2</div>
<div id="tBox">3</div>
<div id="sBox">4..</div>
</div>
Your variable fun needs to be global, otherwise display() can't
access it
Don't forget to declare container in your for...of loop as an actual variable
You where incrementing index too often
var divs = ['rBox', 'aBox', 'tBox', 'sBox'];
var index = -1;
var fun;
function displayChars() {
for (var container of divs) {
document.getElementById(container).style.visibility = 'hidden';
}
fun = setInterval(display, 100);
}
function display() {
if (index < 3) {
document.getElementById(divs[++index]).style.visibility = 'visible';
} else {
clearInterval(fun);
}
}
displayChars();
<app-root>
<div class="rats-div">
<div id="rBox">1</div>
<div id="aBox">2</div>
<div id="tBox">3</div>
<div id="sBox">4..</div>
</div>
</app-root>
Pure CSS solution, if an option, looks something like this:
.rats-div > div {
opacity: 0; /* or "visibility: hidden" */
animation: opacity .1s forwards;
}
.rats-div > div:nth-child(2) {animation-delay: .1s}
.rats-div > div:nth-child(3) {animation-delay: .2s}
.rats-div > div:nth-child(4) {animation-delay: .3s}
#keyframes opacity {
to {opacity: 1} /* or "visibility: visible / initial" */
}
<div class="rats-div">
<div id="rBox">1</div>
<div id="aBox">2</div>
<div id="tBox">3</div>
<div id="sBox">4..</div>
</div>
var divs=['rBox','aBox','tBox','sBox'];
var index=0;
var fun=null;
function displayChars(){
for(container of divs){
document.getElementById(container).style.visibility='hidden';
}
fun = setInterval(display,100);
}
function display(){
if(index < 4){
document.getElementById(divs[index]).style.visibility='visible'
index++;
}else{
clearInterval(fun);
}
}
displayChars();
<app-root>
<div class="rats-div">
<div id="rBox">1</div>
<div id="aBox">2</div>
<div id="tBox">3</div>
<div id="sBox">4..</div>
</div>
</app-root>
try this code. it should do your job.
I was messing around and making a simple carousel from scratch. At first I used onclick="function()" to toggle through the images, then I wanted to switch it out for an onload="setInterval(function, 4000)", but that seems to have broken something...
Here is the html:
<div id="carousel">
<div class="carousel-image" onload="setInterval(newImage(this), 4000)"><img src="http://placehold.it/350x150">1</div>
<div class="carousel-image-off" onload="setInterval(newImage(this), 4000)"><img src="http://placehold.it/350x150">2</div>
<div class="carousel-image-off" onload="setInterval(newImage(this), 4000)"><img src="http://placehold.it/350x150">3</div>
<div class="carousel-image-off" onload="setInterval(newImage(this), 4000)"><img src="http://placehold.it/350x150">4</div>
<div class="carousel-image-off" onload="setInterval(newImage(this), 4000)"><img src="http://placehold.it/350x150">5</div>
<div class="carousel-image-off" onload="setInterval(newImage(this), 4000)"><img src="http://placehold.it/350x150">6</div>
</div>
And here is the script:
<script>
var arr = 0;
function newImage(el){
var images = document.getElementById('carousel').children;
for (var i = 0; i < images.length; i++ ){
images[i].className = "carousel-image-off";
} if (arr < images.length-1){
arr++;
images[arr].className = "carousel-image";
} else {
arr = 0;
images[arr].className = "carousel-image";
}
}
</script>
I've simplified a little bit, changed a few things.
HTML
<div id="carousel">
<div class="carousel-image active"><img src="http://placehold.it/350x150">1</div>
<div class="carousel-image"><img src="http://placehold.it/350x150">2</div>
<div class="carousel-image"><img src="http://placehold.it/350x150">3</div>
<div class="carousel-image"><img src="http://placehold.it/350x150">4</div>
<div class="carousel-image"><img src="http://placehold.it/350x150">5</div>
<div class="carousel-image"><img src="http://placehold.it/350x150">6</div>
</div>
CSS
.carousel-image {
display:none;
}
.carousel-image.active {
display:inline;
}
JavaScript
function newImage() {
var images = document.getElementsByClassName('carousel-image');
for(var i = 0; i < images.length; i++ ) {
if(images[i].className.match('active'))
{
images[i].classList.remove('active');
if(i >= images.length-1)
{
images[0].classList.add('active');
}
else
{
images[i+1].classList.add('active');
}
break;
}
}
}
setInterval(
newImage,
1000
);
JSFiddle
http://jsfiddle.net/nasd0ska/2/
Note
If I were you, I'd use jQuery. So easy and handy for manipulating DOM!
I'm doing some work on a site I didn't build, and I'm running into an issue where the nav links for an image slider are making the browser jump to the DIV with that ID tag. It seems to be treating the nav links like anchor links to the DIVs, is there a way to keep the slider functionality, but disable the browser from jumping to those DIVs?
Here's the HTML:
<div class='slide-selectors'>
<div class="homepage-featured">Link 1</div>|
<div class="homepage-featured">Link 2</div>|
<div class="homepage-featured">Link 3</div>|
<div class="homepage-featured">Link 4</div>|
<div class="homepage-featured">Link 5</div>
</div>
<div id="homepage-slides">
<div id="image1" class="sliderContainer">
<img src="/img/img-01.jpg" width="1160" height="200"/>
</div>
<div id="image2" class="sliderContainer">
<img src="/img/img-02.jpg" width="1160" height="200"/>
</div>
<div id="image3" class="sliderContainer">
<img src="/img/img-03.jpg" width="1160" height="200"/>
</div>
<div id="image4" class="sliderContainer">
<img src="/img/img-04.jpg" width="1160" height="200"/>
</div>
<div id="image5" class="sliderContainer">
<img src="/img/img-05.jpg" width="1160" height="200"/>
</div>
</div>
And here's the JavaScript:
var $ = jQuery.noConflict();
var initialize;
function AnimateSlide(newSlide){
var clickedSlide = typeof newSlide !== 'undefined' ? newSlide : "auto";
// console.log("passed DOM id or auto ",clickedSlide);
var currentSlideId, currentSlideDOM, nextSlideId;
var nextSlideDOM = newSlide;
var slideCount = 0;
/* current slide check */
$('.slide-selectors').children('.homepage-featured').children('.tab').each(function(){
slideCount++;
if( $(this).hasClass('active') ) {
currentSlideDOM = $(this).attr('href');
$(this).removeClass('active');
currentSlideId = slideCount;
//console.log("active found: DOM", currentSlideDOM,"id", currentSlideId);
}
$(currentSlideDOM).hide();
});
/* end of current slide check */
// console.log("after loop: current active slide DOM",currentSlideDOM,"id", currentSlideId,"count", slideCount);
/* start of automation check */
if(clickedSlide != "auto" ) {
nextSlideDom = clickedSlide;
nextSlideId = parseInt(clickedSlide.replace("#image", ""));
// console.log('slide set to', nextSlideDOM, nextSlideId);
}
else {
if (currentSlideId == slideCount) {
nextSlideId = 1;
}
else {
nextSlideId = currentSlideId + 1;
}
$('#image' + currentSlideId).hide();
nextSlideDOM = "#image" + nextSlideId.toString();
// console.log("automated slide transition: new slide DOM", nextSlideDOM,"id", nextSlideId,"last slide id", currentSlideId);
}
/* end of automation check */
var nextSelectorId = "#slide-selector-" + (nextSlideId);
$(nextSlideDOM).show(); /* add active class to next slide */
$(nextSelectorId).addClass('active'); //.html(nextSelectorHTML);
};
function initializeSlides() {
var slideCount = 0;
$('.slide-selectors').children('.homepage-featured').children('.tab').each(function(){
slideCount++;
});
$('#homepage-slides').children('div').each(function() {
$(this).hide();
});
nextSlideId = Math.floor(Math.random()*(slideCount)) + 1;
nextSlideDOM = "#image" + nextSlideId.toString();
//console.log("random slide transition: new slide DOM", nextSlideDOM,"id", nextSlideId);
var nextSelectorId = "#slide-selector-" + (nextSlideId);
$(nextSlideDOM).show();
$(nextSelectorId).addClass('active');
//console.log("random slide transition: new slide DOM", nextSlideDOM,"id", nextSlideId, nextSelectorId);
initialize = false;
};
jQuery(document).ready(function($){
/******************** HOMEPAGE BANNER *************************
-show and hide the different featured items in the homepage banner section
-same function utilized for hiding and showing content in product tabs
*/
initialize = true;
initializeSlides();
setInterval(function() {
AnimateSlide();
},rSpeed);
$('.tab').click(function (e) {
var clickedSelector = $(this).attr('href');
AnimateSlide(clickedSelector);
});
});
You need to prevent the default action for the click event:
$('.tab').click(function (e) {
e.preventDefault();
var clickedSelector = $(this).attr('href');
AnimateSlide(clickedSelector);
});