I need to fade out and fade in some child elements in <div> like in Toni Almeida'a answer:
Fade in and out image
<div class="display" id="slideshow">
<a class="slice" href="myUrl1">
<div class="caption">Some text1...</div>
<img src="AnyUrl1" width="360" height="300"/>
</a>
<a class="slice" href="myUrl2">
<div class="caption">Some text2...</div>
<img src="AnyUrl2" width="360" height="300"/>
</a>
<a class="slice" href="myUrl3">
<div class="caption">Some text3...</div>
<img src="AnyUrl3" width="360" height="300"/>
</a>
.......
</div>
How should I edit the code in that answer?
Here is my js code modified to work with your html:
var count = 1;
setInterval(function() {
count = ($("#slideshow").find(".slice:nth-child("+count+")").fadeOut().next().length == 0) ? 1 : count+1;
$("#slideshow").find(".slice:nth-child("+count+")").fadeIn();
}, 2000);
Fiddle: http://jsfiddle.net/HewAd/
var count = 1;
var $slideShow = $("#slideshow");
var $prevSlice;
var $nextSlice;
setInterval(function() {
$prevSlice = $slideShow.find(".slice:nth-child("+count+")");
count = ($prevSlice.next().length == 0) ? 1 : count+1;
$nextSlice = $slideShow.find(".slice:nth-child("+count+")");
$prevSlice.fadeOut();
$nextSlice.fadeIn();
}, 2000);
Here is a fiddle: http://jsfiddle.net/KA4Zq/308/
Is it correct?
Related
I'm developing an automatic and keyboard managed carousel slider but it doesn't respond when I hit the previous or back buttons in the keyboard. It works when I click the previous and next buttons, and changes automatically.
Here is my HTML and Js code:
let currentSlide = 0;
const slides = document.querySelectorAll(".picture")
//carousel
const init = (n) => {
slides.forEach((picture, index) => {
picture.style.display = "none"
})
slides[n].style.display = "block"
}
//left and right buttons
document.addEventListener("DOMContentLoaded", init(currentSlide))
const next = () => {
currentSlide >= slides.length - 1 ? currentSlide = 0 : currentSlide++
init(currentSlide)
}
const prev = () => {
currentSlide <= 0 ? currentSlide = slides.length - 1 : currentSlide--
init(currentSlide)
}
document.querySelector(".buttonleft").addEventListener('click', prev)
document.querySelector(".buttonright").addEventListener('click', next)
//each 3 seconds change picture
setInterval(() => {
next()
}, 3000);
// NAVIGATE WITH KEYS
document.keydown(function(e) {
if (e.keyCode === 37) {
// Previous
$(".buttonleft").click();
return false;
}
if (e.keyCode === 39) {
// Next
$(".buttonright").click();
return false;
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="carousel-container">
<!-- next and prev buttons -->
<div class="navigation">
<div class="btn buttonleft">
<img src="assets/img/left.png">
</div>
<div class="btn buttonright">
<img src="assets/img/right.png">
</div>
<!-- carousel -->
<div class="carousel">
<div class="logo">
<img src="assets/img/mmlogo.png" alt="Yahoo" class="image">
</div>
<div class="picture fade">
<a href="http://www.yahoo.com" target="_blank">
<img src="assets/img/image1.png" alt="Cloudy with a Chance of Meatballs" class="image">
</a>
</div>
<div class="picture fade">
<a href="http://www.google.com" target="_blank">
<img src="assets/img/image2.png" alt="Cloudy with a Chance of Meatballs" class="image">
</a>
</div>
<div class="picture fade">
<a href="http://www.youtube.com" target="_blank">
<img src="assets/img/image3.png" alt="Cloudy with a Chance of Meatballs" class="image">
</a>
</div>
<div class="picture fade">
<a href="http://www.gmail.com" target="_blank">
<img src="assets/img/image4.png" alt="Cloudy with a Chance of Meatballs" class="image">
</a>
</div>
<div class="picture fade">
<a href="http://www.outlook.com" target="_blank">
<img src="assets/img/image5.png" alt="Cloudy with a Chance of Meatballs" class="image">
</a>
</div>
</div>
</div>
</div>
Any ideas? I don't want to use Bootstrap.
Thanks!
Looks like you're using vanilla javascript, until the last event listener. Looks like jquery.
Make it vanilla js like you did above. It works fine.
Keeping your console tools open will give you a good idea of what's wrong.
document.addEventListener('keydown', (function(e) {
if (e.keyCode === 37) {
// Previous
console.log("prev");
}
if (e.keyCode === 39) {
// Next
console.log("next");
}
}));
I'am studying and experimenting with javascript and jquery*.
I'm creating an image slider, one works correctly, but when I decided to try to insert more than one on the same page, I realized that, of course, the controls to go to the next and previous images affect all the sliders on the page. I would like to click on one of them to check only the corresponding carousel ... do you have any advice to implement in my code? thank you very much.
I know there are better solutions before you kill me :)
HTML
<div class="slider">
<div class="images">
<img class="first active" src="https://source.unsplash.com/1600x900/?nature" alt="">
<img src="https://source.unsplash.com/1600x900/?water" alt="">
<img src="https://source.unsplash.com/1600x900/?food" alt="">
<img class="last" src="https://source.unsplash.com/1600x900/?business" alt="">
</div>
<div class="nav">
<div class="next">></div>
<div class="prev"><</div>
</div>
</div>
<div class="slider">
<div class="images">
<img class="first active" src="https://source.unsplash.com/1600x900/?nature" alt="">
<img src="https://source.unsplash.com/1600x900/?water" alt="">
<img src="https://source.unsplash.com/1600x900/?food" alt="">
<img class="last" src="https://source.unsplash.com/1600x900/?business" alt="">
</div>
<div class="nav">
<div class="next">></div>
<div class="prev"><</div>
</div>
</div>
```
-----
JS
-----
```
$('.next').on('click',function(){
goNext();
});
$('.prev').on('click',function(){
goPrev();
});
function goNext(){
var imgActive = $('img.active');
var imgNext = $('img.active').next();
if(imgActive.hasClass('last') == true){
imgActive.removeClass('active');
$('img.first').addClass('active');
} else{
imgActive.removeClass('active');
imgNext.addClass('active');
}
}
function goPrev(){
var imgActive = $('img.active');
var imgPrev = $('img.active').prev();
if(imgActive.hasClass('first') == true){
imgActive.removeClass('active');
$('img.last').addClass('active');
} else{
imgActive.removeClass('active');
imgPrev.addClass('active');
}
}
```
What you can do is call the parent slider instead of manipulating objects throughout the document.
I didn't test the code below but assuming your code works on all sliders, this should work as intended:
$('.next').on('click',function(){
goNext($(this));
});
$('.prev').on('click',function(){
goPrev($(this));
});
function goNext(control){
var slider = control.parents(".slider");
var imgActive = slider.find('img.active');
var imgNext = slider.find('img.active').next();
if(imgActive.hasClass('last') == true){
imgActive.removeClass('active');
slider.find('img.first').addClass('active');
} else{
imgActive.removeClass('active');
imgNext.addClass('active');
}
}
function goPrev(control){
var slider = control.parents(".slider");
var imgActive = slider.find('img.active');
var imgPrev = slider.find('img.active').prev();
if(imgActive.hasClass('first') == true){
imgActive.removeClass('active');
slider.find('img.last').addClass('active');
} else{
imgActive.removeClass('active');
imgPrev.addClass('active');
}
}
I have designed following code snippet:
<div id="content">
<h3>Select Images Below</h3>
<ul id="imagegallery">
<li>
<a class='a' href="./img/team/t1.jpg" title="The crowd goes wild" onclick="">
<img src="./img/team/t1.jpg" height="50px" width="50px" alt="the band in concert" />
</a>
</li>
<li>
<a class='a' href="./img/team/t2.jpg" title="An atmospheric moment">
<img src="./img/team/t2.jpg" height="50px" width="50px" alt="the bassist" />
</a>
</li>
<li>
<a class='a' href="./img/team/t3.jpg" title="Rocking out">
<img id='image' src="./img/team/t3.jpg" height="50px" width="50px" alt="the guitarist" />
</a>
</li>
<li>
<a class='a'href="./img/team/t4.jpg" title="Encore! Encore!">
<img id='image' src="./img/team/t4.jpg" height="50px" width="50px" alt="the audience" />
</a>
</li>
</ul>
<div>
<img id='placeholder', src="./img/resources/neutral_1.jpg", height="450px" width="550px" alt="Image gooes here", style="margin-bottom: 50px;padding: 10px;">
</div>
<div id="loading">
<img src="img/loading.gif" alt="">
</div>
<div id="show">
<h1 id ='h'>It works</h1>
</div>
</div>
and the JS for this code is something like this
window.onload = function() {
var links = document.getElementsByClassName('a');
for (var i = 0; i < links.length; i++) {
links[i].addEventListener('click', function(e) {
// Hide results
document.getElementById('placeholder').style.display = 'none';
// Show loader
document.getElementById('loading').style.display = 'block';
setTimeout(showpic(this), 2000);
e.preventDefault();
});
}
function showPic(whichpic) {
document.getElementById('placeholder').style.display = 'block';
var source = whichpic.getAttribute('href');
var placeholder = document.getElementById('placeholder');
placeholder.setAttribute('src', source);
return false;
}
};
I am trying to show the clicked image in the placeholder below,reading the source from href of a tags and assigning it to src of placeholder, but the problem I am facing is that showpic is never called/reached. how should i modify my code to resolve this problem. I click the image, loader appears and then image loads in browser window
This is not correct
setTimeout(showpic(this), 2000);
You should pass a function to setTimeout but you are calling it and actually passing some result of one's execution. You should do like this, for example
setTimeout(() => showpic(this), 2000);
You have a typo. You declare your function as showPic but call it as showpic
Correct showpic(this) to () => showpic(this).Your call to the showPic function is misspelled. Also your showPicfunction does not need to be wrapped inside of your window.onload function. Your JS should look like this and it should work:
window.onload = function() {
var links = document.getElementsByClassName('a');
for (var i = 0; i < links.length; i++) {
links[i].addEventListener('click', function(e) {
// Hide results
document.getElementById('placeholder').style.display = 'none';
// Show loader
document.getElementById('loading').style.display = 'block';
setTimeout(() => showPic(this), 2000);
e.preventDefault();
});
}
}
function showPic(whichpic) {
document.getElementById('placeholder').style.display = 'block';
var source = whichpic.getAttribute('href');
var placeholder = document.getElementById('placeholder');
placeholder.setAttribute('src', source);
return false;
}
I have a website with multiple image galleries on different parts of the website. When you click on the image of specific gallery it changes to next one of that gallery and so on.
What I am trying to achieve is to reset the previous gallery to image 1 when you start clicking on a different gallery. So when the user goes back to the previous gallery, it would start from the first image.
Code used for the galleries:
let projectIndexes = {
project1: 1,
project2: 1,
}
showDivs("project1", projectIndexes.project1);
showDivs("project2", projectIndexes.project2);
function plusDivs(project, n) {
showDivs(project, projectIndexes[project] += n);
}
function showDivs(project, index) {
let i;
let x = document.getElementById(project).getElementsByClassName("slidess");
if (index > x.length) { index = 1 }
if (index < 1) { index = x.length }
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[index - 1].style.display = "block";
projectIndexes[project] = index;
let elements = document.getElementById(project).querySelector('.imgslide').children;
let imgNames = [];
for (let i = 0; i < elements.length; i++) {
imgNames.push(elements[i].children[0].children[0].alt);
}
}
<div class="slide">
<div class="slide-content">
<div class="nextt" onclick="plusDivs('project1', 1)"></div>
</div>
<div class="image-container container prjct">
<div class="projects" id="project1">
<div class="imgslide noselect">
<div class="content-container slidess">
<div class="style-3 style-3-left">
<img class="imageName" alt="Img" src="">
</div>
<div class="style-3 style-3-middle">
<img class="imageName" alt="Img" src="">
</div>
<div class="style-3 style-3-right">
<img class="imageName" alt="Img" src="">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="slide">
<div class="slide-content">
<div class="nextt" onclick="plusDivs('project2', 1)"></div>
</div>
<div class="image-container container prjct">
<div class="projects" id="project2">
<div class="imgslide noselect">
<div class="content-container slidess">
<div class="style-3 style-3-left">
<img class="imageName" alt="Img" src="">
</div>
<div class="style-3 style-3-middle">
<img class="imageName" alt="Img" src="">
</div>
<div class="style-3 style-3-right">
<img class="imageName" alt="Img" src="">
</div>
</div>
<!-- <div class="img-name"></div> -->
</div>
</div>
</div>
</div>
I know a way to force show the first element, but it turns out it does that for all projects.
What I was not able to find is a way to recognise when clicking on a new project, that the previous and only previous project needs to reset to first image.
I have been struggling with this for a while now and cannot make it work, so any help would be highly appreciated. And if something is not clear, let me know and I will clarify things.
If I'm following you correctly, the following should do it.
function resetPriorGalleries(currentProject) {
var projectDivs = document.getElementsByClassName("projects");
for (let i = 0; i < projectDivs.length; i++) {
if (projectDivs[i].id === currentProject)
return;
showDivs(projectDivs[1].id, 1);
}
}
The best place to call it would probably be in the onclicks.
onclick="plusDivs('project2', 1); resetPriorGalleries('project2');"
I am trying to write a function, that will automatically carousel cycle through img thumbs on my site with 12 different sets of images, which are just put together in one div. The javascript below works, but only as long, as I have the same amount of images in every div. I am also sure, that I took the long route of telling javascript, what to do in terms of variables so my question is, what should I change, so that I can have different amounts of img in my separate divs?
Thanks a lot for any tips!
var myIndex = 0;
carousel();
function carousel() {
var i;
var u = document.getElementsByClassName("thumbs1");
var v = document.getElementsByClassName("thumbs2");
var w = document.getElementsByClassName("thumbs3");
// and so on ...
for (i = 0; i < w.length; i++) {
u[i].style.display = "none";
v[i].style.display = "none";
w[i].style.display = "none";
// ...
}
myIndex++;
if (myIndex > w.length) {myIndex = 1}
u[myIndex-1].style.display = "inline-block";
v[myIndex-1].style.display = "inline-block";
w[myIndex-1].style.display = "inline-block";
// ...
setTimeout(carousel, 1200); // Change image every 2 seconds
}
<div class="imageholder">
<img class="thumbs1" src="image11.jpg">
<img class="thumbs1" src="image12.jpg">
<img class="thumbs1" src="image13.jpg">
<img class="thumbs1" src="image14.jpg">
</div>
<div class="imageholder">
<img class="thumbs2" src="image21.jpg">
<img class="thumbs2" src="image22.jpg">
<img class="thumbs2" src="image23.jpg">
</div>
<div class="imageholder">
<img class="thumbs3" src="image31.jpg">
<img class="thumbs3" src="image32.jpg">
<img class="thumbs3" src="image33.jpg">
<img class="thumbs3" src="image34.jpg">
<img class="thumbs3" src="image35.jpg">
</div>
<!-- ... -->
Keep counting the myIndex (so do not reset it) and use the modulus % operator with the array length of each image set.
Further notes:
The value of Timeout/Interval is in milliseconds. So 2000ms = 2s
You do not need to get all elements' references again with each call to carousel(). Just do it once at the beginning.
If something is not clear, please ask.
var myIndex = 0;
var i;
var u = document.getElementsByClassName("thumbs1");
var v = document.getElementsByClassName("thumbs2");
var w = document.getElementsByClassName("thumbs3");
var allThumbs = [u, v, w];
var myInterval = setInterval(carousel, 2000); // Change image every 2 seconds
function carousel() {
myIndex++;
for (i = 0; i < allThumbs.length; i++) {
allThumbs[i][(myIndex - 1) % allThumbs[i].length].style.display = "none";
allThumbs[i][myIndex % allThumbs[i].length].style.display = "inline-block";
}
}
.thumbs1:not(:first-child),
.thumbs2:not(:first-child),
.thumbs3:not(:first-child) {
display: none;
}
<div class="imageholder">
<img class="thumbs1" src="image11.jpg" alt="1">
<img class="thumbs1" src="image12.jpg" alt="2">
<img class="thumbs1" src="image13.jpg" alt="3">
<img class="thumbs1" src="image14.jpg" alt="4">
</div>
<div class="imageholder">
<img class="thumbs2" src="image21.jpg" alt="1">
<img class="thumbs2" src="image22.jpg" alt="2">
<img class="thumbs2" src="image23.jpg" alt="3">
</div>
<div class="imageholder">
<img class="thumbs3" src="image31.jpg" alt="1">
<img class="thumbs3" src="image32.jpg" alt="2">
<img class="thumbs3" src="image33.jpg" alt="3">
<img class="thumbs3" src="image34.jpg" alt="4">
<img class="thumbs3" src="image35.jpg" alt="5">
</div>