I'm trying to create a gallery. Most of it already works thanks to some online tutorials.
On the final page there should be a slider and also some thumbnails to click on which will effect the slider. I tried to achieve this by working with status. The problem I'm facing right now is to change the status when clicking on the matching img.
const imgs = document.querySelectorAll('.imgs img');
let status = 0;
var num = document.querySelectorAll('.profile_pics img').length;
let maxstatus = status + num;
imgs.forEach(img => img.addEventListener('click', imgClick));
function imgClick(){
for(let f = 0; f < imgs.length; f++){
if(imgs[f].click == true){
status = [f];
}
}
}
// Rest of the code (is working)
function reset(){
for(let i = 0; i < maxstatus; i++){
slides[i].style.display = 'none';
slides[i].style.opacity = 0;
slides[i].classList.add('fade_in');
imgs[i].style.opacity = 1;
}
}
function focus(){
imgs[status].style.opacity = opacity;
}
function startSlide(){
reset();
slides[0].style.display = 'block';
}
function slideLeft(){
reset();
slides[status - 1].style.display = 'block';
status--;
focus()
console.log(status);
}
function slideRight(){
reset();
slides[status + 1].style.display = 'block';
status++;
focus()
console.log(status);
}
prevBtn.addEventListener('click', function(){
if(status === 0){
status = maxstatus;
}
slideLeft();
});
nextBtn.addEventListener('click', function(){
if(status === maxstatus - 1){
status = -1;
}
slideRight();
});
startSlide();
I've tried now for a couple of hours but can't find a solution. Worked with console.log of course but simply can't get the status update working when clicking of one of those images.
Help would be appreciated - Thanks a lot
Full Code Can Be Found Here: Paste Bin Link
Update:
// Global Variable
let status = -1;
let imgs = [
$('#img0'),
$('#img1'),
$('#img2'),
$('#img3'),
$('#img4'),
$('#img5'),
]
// Functions
function imgClick(elm){
status = imgs.indexOf(elm); // This will set the status variable to the element index, using indexOf function. it will check inside of imgs variable which element index it is, if it cant be found status will return a -1 value
}
// Execute
imgs.forEach(img => img.on('click', () => {
imgClick(img);
}));
Related
I want to create a fullscreen image slider in js so I watched a tutorial and I understand most of it beside the 'counter'.I know that its representing the current image but I don't know how it doing that, how is assigned.
HERE IS THE CODE
let sliderImages = document.querySelectorAll(".slide"),
arrowLeft = document.querySelector("#arrow-left"),
arrowRight = document.querySelector("#arrow-right"),
current = 0; (!!!!THIS ONE I DON`T UNDERSTAND HOW IT S REPRESENTING THE CURRENT IMAGE!!!
// Clear all images
function reset() {
for (let i = 0; i < sliderImages.length; i++) {
sliderImages[i].style.display = "none";
}
}
// Init slider
function startSlide() {
reset();
sliderImages[0].style.display = "block";
}
// Show prev
function slideLeft() {
reset();
sliderImages[current - 1].style.display = "block";
current--;
}
// Left arrow click
arrowLeft.addEventListener("click", function () {
if (current === 0) {
current = sliderImages.length;
}
slideLeft();
});
// Show next
function slideRight() {
reset();
sliderImages[current + 1].style.display = "block";
current++;
}
// Right arrow click
arrowRight.addEventListener("click", function () {
if (current === sliderImages.length - 1) {
current = -1;
}
slideRight();
});
startSlide();
!! HERE IS THE LINK FROM TUTORIAL https://youtu.be/7ZO2RTMNSAY
Current is being used for the index of the array that contains all the elements with the class name of slide.
It might be beneficial for you to read more about arrays: https://www.w3schools.com/js/js_arrays.asp
all
This code select a random element in the array that will hide/show a div It toggle it.
The point is that I need that it always open a new one and hide the previous one with the same button.
I have done that it shows a new one but It doesn't hide the previous.
It is not mandatory to be random, but it needs to always open a new element and hide them . I am a bit stuck
I would appreciate some clues around.
Thanks a lot for ur attention
document.getElementById("rojo").addEventListener("click", show);
var secret = ["h-ma-1","h-ma-2","h-ma-3" ];
var s = secret[RndInt(0, 2)];
function RndInt(min, max) {
return Math.floor(Math.random() * (max - min+ 1) ) + min;}
function show (){
for ( var i=0 ; i<=0 ; i++ ){
if
(document.getElementById(s).style.display == "block")
{
document.getElementById(s).style.display = "none";
}
else
{
document.getElementById(s).style.display = "block";
}
}
}
This code can help you with you task
document.getElementById("rojo").addEventListener("click", show);
var secret = ["h-ma-1", "h-ma-2", "h-ma-3"];
var s = secret[RndInt(0, 2)];
const DEFAULT_VISIBILITY = 'block';
const mapToggle = {
'block': 'none',
'none': 'block'
};
function getCurrentVisibility(node) {
return node.style.display;
}
function getElementFromId(id) {
return document.getElementById(id);
}
function toggleVisibility(node) {
node.style.display = mapToggle[getCurrentVisibility(node) || DEFAULT_VISIBILITY];
}
function toggle(ids) {
ids.forEach((id) => {
var node = getElementFromId(id);
if (node) {
toggleVisibility(node);
}
});
}
function RndInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
function show() {
toggle(secret);
}
<div id="h-ma-1">h-ma-1</div>
<div id="h-ma-2">h-ma-2</div>
<div id="h-ma-3">h-ma-3</div>
<button id="rojo">toggle</button>
So far this has been helping me to solve my problem but it is not done by using the array itself. And so it might difficult to keep in maintenance
It is done by changing the name of the div directly by adding the last part of the name.
I just put all the div in the css as diplay = none .
Thanks
document.getElementById("rojo").addEventListener("click", show);
function show (){
for ( var i=-0 ; i<12 ; i++ ){
s="h-ma-"+i;
document.getElementById(s).style.display = "none";
}
document.getElementById("h-ma-"+Math.ceil(Math.random()*11)).style.display = "block";
}
Dear stackoverflow users,
I'm working on a project for myself and i run into a js problem.
I'm trying to make a slide with 3 employees on my homepage.
Default it will show image 1, image 2 and image 3.
When i press the back icon, i needs to go to:
Image 4, image 1 and image 2.
My code so far (Only backwards!)
let sliderImages = document.querySelectorAll('.slide');
let arrowBack = document.querySelector('#arrow-back');
let arrowNext = document.querySelector('#arrow-next');
let currentOne = 0;
let currentTwo = 1;
let currentThree = 2;
// Make employees transparent
function reset(){
for(let i = 0; i < sliderImages.length; i++){
sliderImages[i].style.display = 'none';
}
}
// Make employee 1 visable
function startSlide(){
reset();
sliderImages[0].style.display = 'inline-block';
sliderImages[1].style.display = 'inline-block';
sliderImages[2].style.display = 'inline-block';
}
// Show command backwards
function slideBack(){
reset();
sliderImages[currentOne - 1].style.display = 'inline-block';
sliderImages[currentTwo - 1].style.display = 'inline-block';
sliderImages[currentThree - 1].style.display = 'inline-block';
currentOne--;
currentTwo--;
currentThree--;
}
// Back arrow clicked
arrowBack.addEventListener('click', function(){
if(currentOne === 0){
currentOne = sliderImages.length;
}
if(currentTwo === 0){
currentTwo = sliderImages.length;
}
if(currentThree === 0){
currentThree = sliderImages.length;
}
slideBack();
})
When i refresh the page i see Image 1, 2 and 3 so that works. But it doesn't go to 4, 1 and 2 when i press #arrow-back.
I know the structure isn't perfect with my 3x if, but i'm just learning to understand Javascript.
Can any of you guys give me some tips with how i can progress my project?
Thanks a lot.
Great,
Loxiuras
(Be notest that my html works. It will change the images, but it doesn't get the right order.)
I am creating an image slider for JavaScript. I have it so that my left and right arrows display the next image. I was thinking to add a setInterval method to just change the display image every few seconds. I was assuming it would be as easy as calling the function to click the right image every 3 seconds. But I get an error saying
index.js:26 Uncaught TypeError: Cannot read property 'style' of undefined
at slideRight (index.js:26)
Heres my code
let sliderImages = document.querySelectorAll('.slide');
let arrowLeft = document.getElementById('arrow-left');
let arrowRight = document.getElementById('arrow-right');
let current = 0;
function reset() {
for(let i = 0; i < sliderImages.length; i++) {
sliderImages[i].style.display = 'none';
}
}
function startSlider() {
reset();
sliderImages[0].style.display = 'block';
}
function slideLeft() {
reset();
sliderImages[current - 1].style.display = 'block';
current --;
}
function slideRight() {
reset();
sliderImages[current + 1].style.display = 'block';
console.log(current);
current ++;
console.log(current);
}
arrowLeft.addEventListener('click', function() {
reset()
if(current == 0) {
current = sliderImages.length;
}
slideLeft();
});
arrowRight.addEventListener('click', function () {
if(current == sliderImages.length -1 ) {
current = -1;
}
slideRight();
})
startSlider();
setInterval(slideRight, 3000);
Your problem seems to me to be that when you go too far right that index no longer exists in the array, so you need to use the modulus operator when going right:
sliderImages[(current + 1) % sliderImages.length].style.display = 'block';
And you need to wrap around to the right side when going left too far:
sliderImages[current - 1 >= 0 ?
current - 1 : sliderImages.length - 1].style.display = 'block';
The problem is in sliderImages[current + 1].
When you reach the lastest image current + 1 is an out of bound index and the cooresponding entry in sliderImages returns null.
You probably need to check something like
if (current < sliderImages.length) {
sliderImages[current + 1].style.display = 'block';
current++;
}
I have a full width slideshow. So I have a few problems with it.
One is that clearTimeout won't work. If I call the function by a click, it should clear the Timeout.
Does someone know why this won't work? Please explain and show where exactly the problem is.
Thank you and sorry for my bad English.
var index = 0;
var slideSpeed = 1000;
function mainSlider(menuLink){
clearTimeout(slide);
if(menuLink !== false){
alert('You call this function by a click event.');
clearTimeout(slide);
}
var sliderIndex = $('.main_slider_content').length - 1;
$('.main_slider_content').hide();
index++;
if(index > sliderIndex){
index = 0;
}
$('.main_slider_content:eq(' + index + ')').show();
var slide = setTimeout(function(){mainSlider(false)}, slideSpeed);
setTimeout(countContentImg(index), slideSpeed);
}
$(document).on('click', '.main_slider_menu_link',function(){
var linkIndex = $(this).index();
mainSlider(linkIndex);
});
function countContentImg(index){
$('#main_slider_selected_img').html('');
var sliderIndex = $('.main_slider_content').length;
for(var i = 0; i < sliderIndex; i++) {
if(i === index)
$('#main_slider_selected_img').append('<li class="main_slider_menu_link main_slider_menu_link_slected"></li>');
else
$('#main_slider_selected_img').append('<li class="main_slider_menu_link"></li>');
}
}
$(document).ready(function(){
countContentImg(index);
mainSlider(false);
});
This looks like a scope issue. You're trying to clear a timeout from a variable that doesn't contain a timeout reference yet. Each call to mainSlider creates a new, locally scoped timeout reference, long after you've tried to clear it.
function mainSlider(menuLink){
clearTimeout(slide); // Clearing a timeout that doesn't exist yet
if(menuLink !== false){
alert('You call this function by a click event.');
clearTimeout(slide); // Clearing a timeout that doesn't exist yet
}
var sliderIndex = $('.main_slider_content').length - 1;
$('.main_slider_content').hide();
index++;
if(index > sliderIndex){
index = 0;
}
$('.main_slider_content:eq(' + index + ')').show();
// Now the timeout exists, but only in the scope of this current call
var slide = setTimeout(function(){mainSlider(false)}, slideSpeed);
setTimeout(countContentImg(index), slideSpeed);
}
Change it to:
var slide;
function mainSlider(menuLink){
clearTimeout(slide);
if(menuLink !== false){
alert('You call this function by a click event.');
clearTimeout(slide);
}
var sliderIndex = $('.main_slider_content').length - 1;
$('.main_slider_content').hide();
index++;
if(index > sliderIndex){
index = 0;
}
$('.main_slider_content:eq(' + index + ')').show();
// Remove var
slide = setTimeout(function(){mainSlider(false)}, slideSpeed);
setTimeout(countContentImg(index), slideSpeed);
}