I try to create a simple slider using javascipt. the problem is when counter gets to last element, It dosen't change the display to block
this is the code
<div id="slider">
<img class="slide" src="img/img13.jpg" alt=""/>
<img class="slide" src="img/img14.jpg" alt=""/>
<img class="slide" src="img/img15.jpg" alt=""/>
<img class="slide" src="img/img16.jpg" alt=""/>
<img class="slide" src="img/img17.jpg" alt=""/>
<img class="slide" src="img/img18.jpg" alt=""/>
</div>
var delay = 3000;
var i = 0;
var allSliderSlides = document.getElementsByClassName('slide');
allSliderSlides[0].style.display = "block";
setInterval(function(){
i++;
allSliderSlides[i].style.display = "block";
if(allSliderSlides[i-1].style.display=="block"){
allSliderSlides[i-1].style.display="none";
}
if(i == allSliderSlides.length-1){
i = 0;
allSliderSlides[allSliderSlides.length-1].style.display = "none";
allSliderSlides[i].style.display = "block";
}
},delay);
please give me some advice or suggestion to fix this problem
thanks
You reassigned i = 0 before your last element to become block
Try:
if(i == allSliderSlides.length-1){
allSliderSlides[allSliderSlides.length-1].style.display = "none";
allSliderSlides[i].style.display = "block";
i = 0;
}
Here's the problem:
if(i == allSliderSlides.length-1){
i = 0;
allSliderSlides[allSliderSlides.length-1].style.display = "none";
allSliderSlides[i].style.display = "block";
}
You are resetting the counter before changing the style. This results to displaying the fist image and the last image would never be displayed.
Solution: Move i = 0; to last line in the block like so:
if(i == allSliderSlides.length-1){
allSliderSlides[allSliderSlides.length-1].style.display = "none";
allSliderSlides[i].style.display = "block";
i = 0;
}
Hope that helps.
Related
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've been working with a script to randomly toggle classes on a set of images. So far it works as intended, but the one thing I was wondering if there is a way to target a specific class since it appears to target the window and I'm not sure that the best way to go about it.
Here's what I have so far:
var counter = 0;
$('.images img').each(function(i) {
if (i == 0) {
counter = 0;
} else {
counter++;
}
if (counter < 5) {
$(this).addClass('show');
} else {
$(this).addClass('hide');
}
});
function shuffleRandomLogos(remove, add) {
const logo = $("." + remove).toArray();
const logoLength = logo.length;
const randomNum = Math.floor(Math.random() * logoLength);
const randomLogo = logo[randomNum];
$(randomLogo).removeClass(remove);
$(randomLogo).addClass(add);
}
window.setInterval(function() {
shuffleRandomLogos("show", "hide");
shuffleRandomLogos("hide", "show");
}, 600);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="images">
<img src="https://www.fillmurray.com/200/300" alt="">
<img src="https://www.fillmurray.com/g/200/300" alt="">
<img src="https://www.fillmurray.com/200/300" alt="">
<img src="https://www.fillmurray.com/g/200/300" alt="">
<img src="https://www.fillmurray.com/200/300" alt="">
<img src="https://www.fillmurray.com/g/200/300" alt="">
<img src="https://www.fillmurray.com/g/200/300" alt="">
<img src="https://www.fillmurray.com/200/300" alt="">
<img src="https://www.fillmurray.com/g/200/300" alt="">
<img src="https://www.fillmurray.com/200/300" alt="">
<img src="https://www.fillmurray.com/g/200/300" alt="">
</div>
I've tried to update const logo = $("."+remove).toArray(); to this:
const logo = $(".images img").toArray(); which works but then it starts to break out of first 5 to be shown and starts getting a little crazy.
So not sure what I need to adjust to just have it target the .images img or if there is a better way to go about it.
Here's a link to a demo (CodePen):
https://codepen.io/ultraloveninja/pen/gJRqPM
You don't need to add random classes at first, just call function manually and later in interval. Also remove all .show classes and add only to selected ones.
Also note that you should move preparation variables out of function for faster processing.
var logos, logosLength;
function makeImages(count)
{
for (var i = 0; i < count; i++) {
$('.images').append('<img src="https://via.placeholder.com/200x300.png?text=' + i + '">');
}
logos = $(".images img");
logosLength = logos.length;
}
function shuffleRandomLogos(count)
{
logos.removeClass('show');
for (var i = 0; i <= count; i++) {
let randomLogo = logos[Math.floor(Math.random() * (logosLength - 1))];
$(randomLogo).addClass('show');
}
}
makeImages(20);
shuffleRandomLogos(5);
window.setInterval(function () {
shuffleRandomLogos(5);
}, 600);
.images img {
display: none;
}
.images img.show {
display: inline;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="images">
</div>
I've created an animation of a pac-man opening and closing its mouth, but i would like to have it move across the screen as well. I've played around with setTimeout() and i can get it one image to go across the screen but not the actual animation. how can i do this using pure JS.
this is the HTML i have
<body>
<div id="animation">
<img id="pacManImg" src="pacMan1.png" width="50" height="50" />
<img id="pacManImg" src="pacMan2.jpg" width="50" height="50" />
</div>
<button onclick="startAnimation()"> Start</button>
</body>
i'm using this for my js
function startAnimation() {
var frames = document.getElementById("animation").children;
var frameCount = frames.length;
var i = 0;
setInterval(function () {
frames[i % frameCount].style.display = "none";
frames[++i % frameCount].style.display = "block";
}, 300);
}
Just use i to increase the left property:
setInterval(function() {
frames[i % frameCount].style.display = "none";
frames[++i % frameCount].style.display = "block";
document.getElementById("animation").style.left = i + "px";
});
Note that this requires position: absolute; in your CSS.
I'm new to this. I am trying to create a HTML code which runs in HTML. It shows a image for 5 seconds and hides, next image is shown via button.
I found most of the codes via online. Can someone see where i am going wrong here.
<!DOCTYPE html>
<html>
<head>
<button id="next" onclick="showNext();">Show next image</button>
<div class="image" style="display: none;"><img src=“1.jpg”></div>
<div class="image" style="display: none;"><img src=“2.jpg”></div>
<div class="image" style="display: none;"><img src=“3.jpg”></div>
<script type="text/javascript">
var divs = document.querySelectorAll('div.image');
var button = document.getElementById('next'); //button.
var currentImage = 0;
function showNext() {
button.style.display = 'inline';
divs[currentImage].style.display = 'block';
setTimeout(hide, 5000);
}
function hide() {
button.style.display = 'block';
divs[currentImage].style.display = 'none';
currentImage = (currentImage + 1) % divs.length;
}
</script>
</head>
</html>
this is the JS that is used
var divs = document.querySelectorAll(‘image');
var button = document.getElementById('next');
var currentImage = 0;
function showNext() {
button.style.display = 'inline';
divs[currentImage].style.display = 'block';
setTimeout(hide, 500000);
}
function hide() {
button.style.display = 'block';
divs[currentImage].style.display = 'none';
currentImage = (currentImage + 1) % divs.length;
}
Updated
So, here is working code:
HTML
<button id="next">Show next image</button>
<div class="image" style="display: none;"><img src="http://dummyimage.com/100x100/000/fff.jpg"></div>
<div class="image" style="display: none;"><img src="http://dummyimage.com/100x100/990000/fff.jpg"></div>
<div class="image" style="display: none;"><img src="http://dummyimage.com/100x100/009900/fff.jpg"></div>
JS
var divs = document.querySelectorAll('.image');
var button = document.getElementById('next');
var currentImage = 0;
button.addEventListener('click', function(){
button.style.display = 'inline';
divs[currentImage].style.display = 'block';
setTimeout(hide, 2000);
});
function hide() {
button.style.display = 'block';
divs[currentImage].style.display = 'none';
currentImage = (currentImage + 1) % divs.length;
}
I provided jsfiddle too.
I just want to upgrade image arrays using JavaScript. I added thumbnails below, So larger image can be displayed when thumbail is clicked.
The problem happens after I click "prev" or "next" (after click on the thumbail), the current image is not hidden and the next or pevious image is shown on its rigt side. Sometimes it does right, sometimes not...please help if you can. Thank you in advance.
<div id="bigImages" style="height:550px; overflow:hidden;">
<div class="image" style="display:table-cell; vertical-align:middle;"><img src="url big image 1"></div>
<div class="image" style="display:table-cell; vertical-align:middle;"><img src="url big image 2"></div>
<div class="image" style="display:table-cell; vertical-align:middle;"><img src="url big image 3"></div>
</div>
<a id="prev" href="#">Prev</a> <a id="next" href="#">Next</a>
<br/>
<div id="smallImages">
<img class ="small" src="url small image 1">
<img class ="small" src="url small image 2">
<img class ="small" src="url small image 3">
</div>
Javascript
<script type="text/javascript">
var imgArr = document.getElementById('bigImages').getElementsByTagName('img');
for(var i=1; i<imgArr.length; i++){
imgArr[i].style.display = "none";
}
i=0;
document.getElementById('prev').onclick = function(){
if(i===0){
imgArr[i].style.display = "none";
i=imgArr.length-1;
imgArr[i].style.display = "";
}
else{
imgArr[i].style.display = "none";
i--;
imgArr[i].style.display = "";
}
}
document.getElementById('next').onclick = function(){
if(i===imgArr.length-1){
imgArr[i].style.display = "none";
i=0;
imgArr[i].style.display = "";
}
else{
imgArr[i].style.display = "none";
i++;
imgArr[i].style.display = "";
}
}
function show(dptr) {
for (var i=0; i<imgArr.length; i++){
imgArr[i].style.display = 'none';
}
imgArr[dptr].style.display = "";
}
well..., I came up with this solution :
html+style
<div id="bigImages" style="height:550px; overflow:hidden;">
<div class="image" style="display:table-cell; vertical-align:middle;"><img src="http://www.livehacking.com/web/wp-content/uploads/2012/08/chrome-logo-1301044215-300x300.jpg"></div>
<div class="image" style="display:table-cell; vertical-align:middle;"><img src="http://upload.wikimedia.org/wikipedia/commons/e/e7/Mozilla_Firefox_3.5_logo_256.png"></div>
<div class="image" style="display:table-cell; vertical-align:middle;"><img src="http://html5doctor.com/wp-content/uploads/2011/01/HTML5_Logo_256.png"></div>
</div>
<a id="prev" href="#">Prev</a> <a id="next" href="#">Next</a>
<br/>
<div id="smallImages">
<img class ="small" src="http://www.livehacking.com/web/wp-content/uploads/2012/08/chrome-logo-1301044215-300x300.jpg">
<img class ="small" src="http://upload.wikimedia.org/wikipedia/commons/e/e7/Mozilla_Firefox_3.5_logo_256.png">
<img class ="small" src="http://html5doctor.com/wp-content/uploads/2011/01/HTML5_Logo_256.png">
</div>
<style>
#smallImages img{
width:20px;
}
</style>
script
var imgArrbig = document.getElementById('bigImages').getElementsByTagName('img');
for(var i=1; i<imgArrbig.length; i++){
imgArrbig[i].style.display = "none";
}
i=0;
document.getElementById('prev').onclick = function(){
if(i===0){
imgArrbig[i].style.display = "none";
i=imgArrbig.length-1;
imgArrbig[i].style.display = "";
}
else{
imgArrbig[i].style.display = "none";
i--;
imgArrbig[i].style.display = "";
}
}
document.getElementById('next').onclick = function(){
if(i===imgArrbig.length-1){
imgArrbig[i].style.display = "none";
i=0;
imgArrbig[i].style.display = "";
}
else{
imgArrbig[i].style.display = "none";
i++;
imgArrbig[i].style.display = "";
}
}
rr = 0
$('.small').each(function(){
$(this).attr('number',''+ rr +'');
rr = rr+1
});
$('.small').click(function(i){
var compare = $(this).attr('number');
$('#bigImages img').css('display','none');
$(imgArrbig[compare]).css('display','block');
});
Here is example