Javascript - Carousel managed automatically and with keyboard - javascript

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");
}
}));

Related

Toggle between multiple images

I have 4 images black, red, orange and green - and the disabled version in gray.
What I want to achieve is that when I click on a disabled one, the other ones should turn gray/disabled and the one clicked should turn to his color image.
I tried following now this will get his child div and will do the toggle trick with the clicked image, but it won't disable the other ones. How can I disable all the other ones?
$('.toggle').each(function() {
var clickCounter = 0,
firstEdit = false;
$(this).on('click', function() {
clickCounter++;
if (clickCounter == 1 || firstEdit == true) {
$(this).toggle();
$(this).next('.toggled').toggle();
clickCounter = 0;
firstEdit = true;
}
});
});
$('.toggled').on('click', function() {
$(this).toggle();
$(this).prev('.toggle').toggle();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<div class="toggle"><img class="" src="data/img/controller/orange.jpg"></div>
<div class="toggled"><img class="" src="data/img/controller/orange_disabled.jpg"></div>
<div class="toggle"><img class="" src="data/img/controller/red.jpg"></div>
<div class="toggled"><img class="" src="data/img/controller/red_disabled.jpg"></div>
<div class="toggle"><img class="" src="data/img/controller/black.jpg"></div>
<div class="toggled"><img class="" src="data/img/controller/black_disabled.jpg"></div>
<div class="toggle"><img class="" src="data/img/controller/green.jpg"></div>
<div class="toggled"><img class="" src="data/img/controller/green_disabled.jpg"></div>
You'll need loop through all images in onclick event handler and set proper class on each image. Also note, you could make images look grey with simple css filter, don't need create separate images
const test = document.getElementById("test");
test.addEventListener("click", e =>
{
for(let i = 0, children = test.children; i < children.length; i++)
{
children[i].classList.toggle("selected", children[i] === e.target);
}
});
.content > img:not(.selected)
{
filter: saturate(0);
opacity: 0.5;
}
<span id="test" class="content">
<img src="https://lh3.googleusercontent.com/IlhDxQVsR17dwwER5xYZJej867KrdSx0K5eyRP2RFP4eQJMD2pi0ZGBhrMOcajBUP9M54lpmIr90JecPUFGPaRe3sDZ82RvHBSw1rw-YJvQs7J8K3g=w102-h68-n-l50-sg-rj">
<img src="https://lh3.googleusercontent.com/taykG37GWDgY-FGkdogDvsHSJMUGRMvkuVRT6yR-5UNkKvGRKeRlpGYXlslocOcS0txlfUdGW59JGtzADknxbMqnh6AtVCv9EXyB8nHp80YsRNA0Yw=w102-h68-n-l50-sg-rj">
<img src="https://lh3.googleusercontent.com/aS2Up3osDMLTua1vXPTqnXko13KbIAmB0nQ44AP_IFTEt-VjUa6Tz2MC9jdH11bsZfjdiR8z4HbnxvhmmxSU1swKrtjc5PXreP6i=w102-h68-n-l50-sg-rj">
<img src="https://lh3.googleusercontent.com/dTH5_J82_TqXaLW_Hzq1rbMVqfzRWG9PkcKgHdjXphAy9M4MZF5Q7_cQZeM1kbqEYMysrBLlY4szACDZwIbP7Jm17BnGNjT0Tht8Qw=w102-h68-n-l50-sg-rj">
</span>
P.S.
Please don't use bloatware jquery, save the planet.
Delegation for dynamic content
jQuery version
Change toggleClass to addClass to not toggle the clicked image
$('#container').on('click', 'img', function() {
$(this).siblings().each(function() { $(this).removeClass('selected') });
$(this).toggleClass('selected')
});
.content>img:not(.selected) {
filter: saturate(0);
opacity: 0.5;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
<div class="content">
<img src="https://lh3.googleusercontent.com/IlhDxQVsR17dwwER5xYZJej867KrdSx0K5eyRP2RFP4eQJMD2pi0ZGBhrMOcajBUP9M54lpmIr90JecPUFGPaRe3sDZ82RvHBSw1rw-YJvQs7J8K3g=w102-h68-n-l50-sg-rj">
<img src="https://lh3.googleusercontent.com/taykG37GWDgY-FGkdogDvsHSJMUGRMvkuVRT6yR-5UNkKvGRKeRlpGYXlslocOcS0txlfUdGW59JGtzADknxbMqnh6AtVCv9EXyB8nHp80YsRNA0Yw=w102-h68-n-l50-sg-rj">
<img src="https://lh3.googleusercontent.com/aS2Up3osDMLTua1vXPTqnXko13KbIAmB0nQ44AP_IFTEt-VjUa6Tz2MC9jdH11bsZfjdiR8z4HbnxvhmmxSU1swKrtjc5PXreP6i=w102-h68-n-l50-sg-rj">
<img src="https://lh3.googleusercontent.com/dTH5_J82_TqXaLW_Hzq1rbMVqfzRWG9PkcKgHdjXphAy9M4MZF5Q7_cQZeM1kbqEYMysrBLlY4szACDZwIbP7Jm17BnGNjT0Tht8Qw=w102-h68-n-l50-sg-rj">
</div>
<div class="content">
<img src="https://lh3.googleusercontent.com/IlhDxQVsR17dwwER5xYZJej867KrdSx0K5eyRP2RFP4eQJMD2pi0ZGBhrMOcajBUP9M54lpmIr90JecPUFGPaRe3sDZ82RvHBSw1rw-YJvQs7J8K3g=w102-h68-n-l50-sg-rj">
<img src="https://lh3.googleusercontent.com/taykG37GWDgY-FGkdogDvsHSJMUGRMvkuVRT6yR-5UNkKvGRKeRlpGYXlslocOcS0txlfUdGW59JGtzADknxbMqnh6AtVCv9EXyB8nHp80YsRNA0Yw=w102-h68-n-l50-sg-rj">
<img src="https://lh3.googleusercontent.com/aS2Up3osDMLTua1vXPTqnXko13KbIAmB0nQ44AP_IFTEt-VjUa6Tz2MC9jdH11bsZfjdiR8z4HbnxvhmmxSU1swKrtjc5PXreP6i=w102-h68-n-l50-sg-rj">
<img src="https://lh3.googleusercontent.com/dTH5_J82_TqXaLW_Hzq1rbMVqfzRWG9PkcKgHdjXphAy9M4MZF5Q7_cQZeM1kbqEYMysrBLlY4szACDZwIbP7Jm17BnGNjT0Tht8Qw=w102-h68-n-l50-sg-rj">
</div>
</div>
Vanilla - it does not toggle the clicked image
const container = document.getElementById('container');
container.addEventListener('click', e => {
const tgt = e.target;
if (!tgt.matches('img')) return;
const images = tgt.closest('.content').querySelectorAll('img');
images.forEach(img => img.classList.toggle('selected', img === tgt));
});
.content>img:not(.selected) {
filter: saturate(0);
opacity: 0.5;
}
<div id="container">
<div class="content">
<img src="https://lh3.googleusercontent.com/IlhDxQVsR17dwwER5xYZJej867KrdSx0K5eyRP2RFP4eQJMD2pi0ZGBhrMOcajBUP9M54lpmIr90JecPUFGPaRe3sDZ82RvHBSw1rw-YJvQs7J8K3g=w102-h68-n-l50-sg-rj">
<img src="https://lh3.googleusercontent.com/taykG37GWDgY-FGkdogDvsHSJMUGRMvkuVRT6yR-5UNkKvGRKeRlpGYXlslocOcS0txlfUdGW59JGtzADknxbMqnh6AtVCv9EXyB8nHp80YsRNA0Yw=w102-h68-n-l50-sg-rj">
<img src="https://lh3.googleusercontent.com/aS2Up3osDMLTua1vXPTqnXko13KbIAmB0nQ44AP_IFTEt-VjUa6Tz2MC9jdH11bsZfjdiR8z4HbnxvhmmxSU1swKrtjc5PXreP6i=w102-h68-n-l50-sg-rj">
<img src="https://lh3.googleusercontent.com/dTH5_J82_TqXaLW_Hzq1rbMVqfzRWG9PkcKgHdjXphAy9M4MZF5Q7_cQZeM1kbqEYMysrBLlY4szACDZwIbP7Jm17BnGNjT0Tht8Qw=w102-h68-n-l50-sg-rj">
</div>
<div class="content">
<img src="https://lh3.googleusercontent.com/IlhDxQVsR17dwwER5xYZJej867KrdSx0K5eyRP2RFP4eQJMD2pi0ZGBhrMOcajBUP9M54lpmIr90JecPUFGPaRe3sDZ82RvHBSw1rw-YJvQs7J8K3g=w102-h68-n-l50-sg-rj">
<img src="https://lh3.googleusercontent.com/taykG37GWDgY-FGkdogDvsHSJMUGRMvkuVRT6yR-5UNkKvGRKeRlpGYXlslocOcS0txlfUdGW59JGtzADknxbMqnh6AtVCv9EXyB8nHp80YsRNA0Yw=w102-h68-n-l50-sg-rj">
<img src="https://lh3.googleusercontent.com/aS2Up3osDMLTua1vXPTqnXko13KbIAmB0nQ44AP_IFTEt-VjUa6Tz2MC9jdH11bsZfjdiR8z4HbnxvhmmxSU1swKrtjc5PXreP6i=w102-h68-n-l50-sg-rj">
<img src="https://lh3.googleusercontent.com/dTH5_J82_TqXaLW_Hzq1rbMVqfzRWG9PkcKgHdjXphAy9M4MZF5Q7_cQZeM1kbqEYMysrBLlY4szACDZwIbP7Jm17BnGNjT0Tht8Qw=w102-h68-n-l50-sg-rj">
</div>
</div>

How to control a single carousel in a page with more carousels?

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');
}
}

How can I reset my html image gallery to start with first image after leaving it?

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');"

Make slider counter, count just the amount of slides in the slider

I made a jQuery slider for a website, it has 9 slides, and I want the counter to count JUST until 9. What happens is that as soon as I get to the last slide (09 of 09) and CLICK on the NEXT bnt, it goes to the first slide (01 of 09) and when I click to go to the second slide I get this: 11 of 09. Please help!
It's an infinite slider, and would like the counter to work "UP" and "DOWN", meaning to have the counter add if the user goes NEXT and subtract if the user goes previous.
The slider is in this site http://madebymorro.com/web_dev_vavilco/
at the very bottom.
Thanks!
the code I have is HTML:
<section id="construction">
<div class="wrapper">
<div id="home-slider">
<div id="slider-data">
<div class="count">
<span class="current">1</span>/09
</div>
<div class="slider-nav">
<div class="prev"><img src="images/home-prev.svg" alt=""></div>
<div class="next"><img src="images/home-next.svg" alt=""></div>
</div>
</div>
<div id="home-slider-c">
<section class="slider-project">
<img src="images/home-slider001.jpg" alt="">
<div class="img-data">
<p>zaragoza</p>
<p>apartamentos</p>
</div>
</section>
<section class="slider-project">
<img src="images/home-slider002.jpg" alt="">
<div class="img-data">
<p>bravtevilla</p>
<p>casas</p>
</div>
</section>
<section class="slider-project">
<img src="images/home-slider003.jpg" alt="">
<div class="img-data">
<p>business Center Dorado</p>
<p>oficinas</p>
</div>
</section>
<section class="slider-project">
<img src="images/home-slider004.jpg" alt="">
<div class="img-data">
<p>balcones de la trinidad</p>
<p>apartamentos</p>
</div>
</section>
<section class="slider-project">
<img src="images/home-slider005.jpg" alt="">
<div class="img-data">
<p>gratamira 131</p>
<p>apartamentos</p>
</div>
</section>
<section class="slider-project">
<img src="images/home-slider006.jpg" alt="">
<div class="img-data">
<p>torre olaya plaza</p>
<p>apartamentos y plaza comercial</p>
</div>
</section>
<section class="slider-project">
<img src="images/home-slider007.jpg" alt="">
<div class="img-data">
<p>torre olaya plaza</p>
<p>locales comerciales</p>
</div>
</section>
<section class="slider-project">
<img src="images/home-slider008.jpg" alt="">
<div class="img-data">
<p>plaza castilla</p>
<p>apartamentos</p>
</div>
</section>
<section class="slider-project">
<img src="images/home-slider009.jpg" alt="">
<div class="img-data">
<p>sauses del country</p>
<p>apartamentos</p>
</div>
</section>
</div>
</div>
</div>
the code I have is jQuery:
var slider = $('#home-slider-c'),
next = $('.slider-nav .next'),
prev = $('.slider-nav .prev');
$('#home-slider-c section:last-child').insertBefore('#home-slider-c section:first-child');
slider.css('margin-left', '-100%');
var n = 0;
function getNext() {
var e = n === $('.slider-project').length - 1 ? 0 : n + 1;
$(".current").html(e + 1);
n++;
console.log(e);
slider.animate({
marginLeft: '-200%'
}, 700, function() {
$('#home-slider-c section:first-child').insertAfter('#home-slider-c section:last-child');
slider.css('margin-left', '-100%');
});
// $(".current").html(e++);
}
var n = 0;
function getPrev() {
var e = n <= 0 ? $('.slider-project').length - 1 : n - 1;
$(".current").html(e + 1);
n--;
console.log(e);
slider.animate({
marginLeft: 0
}, 700, function() {
$('#home-slider-c section:last-child').insertBefore('#home-slider-c section:first-child');
slider.css('margin-left', '-100%');
});
}
next.on('click', getNext);
prev.on('click', getPrev);
Try using this single counter e initialized to 1
....
var e= 1;
function getNext() {
e= e<$('.slider-project').length?e:0;
e++;
$(".current").html(e);
// n++;
console.log(e);
....
}
function getPrev() {
e= e<=1?$('.slider-project').length+1:e;
e--;
$(".current").html(e);
// n--;
console.log(e);
....
}
Use the Reminder Operator % Here you go:
var tot = 6, // Let's say we have 6 slides.
c = 0; // Dummy counter
$("#prev, #next").on("click", function(){
// Increment or decrement counter depending on button ID
c = this.id==="next" ? ++c : --c;
// OK almost there, now let's loop our counter to prevent exceeding <0 or >5
// >5 since index 5 is the 6th slide (tot-1).
// If counter went less than 0 (prev button) than set it to tot-1
// For all other cases use modulo % which will reset it to 0 automagically.
c = c<0 ? tot-1 : c%tot;
$("#test").text(c);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id=prev>«</button>
<span id=test>0</span>
<button id=next>»</button>
The above can be written using a bigger if else logic, but if it's all clear than you can simply use this snippet and drop it into any current or future gallery you build:
// Logic to loop counter on prev / next click:
c = (this.id==="next" ? ++c : --c) < 0 ? tot-1 : c%tot;

JavaScript array skipping values

I have this function that loops through all of the <img> tags and adds their sourcesrc into an array. When the user clicks on the main parent div, Bootstrap's modal fades in showing the rest of the gallery.
My problem is, whenever I press the right chevron on a specific div it shows the gallery and slides them perfectly but when I click on another div, the array skips two values and displays the third one instead.
To explain my problem more briefly, lets say I have this array:
arr = [1,2,3,4,5]
When I click the next button the first time it works perfectly
1 => 2 => 3 => 4 => 5
But when I click on another div and press next:
1 => 2 => 5
Here's a working demo of what I have done till now.
HTML:
<div class="col-md-4 col-sm-4 col-lg-4 padBtm10">
<a data-toggle="modal" data-target="#exampleModal" href="#" class="modal-trigger deco-none" onclick="return false;">
<div class="card that_img radius10">
<img data-caption-title="First caption" class="card-img-top img-responsive caption" src="http://dummyimage.com/500x300/000/fff" alt="Card image cap" />
<span class="fa fa-search search fa-3x blue"></span>
<div class="redbg radiusBtm10 white card-block">
<h4 class="card-title">Lorem Ipsum</h4>
</div>
<div class="imgs-album">
<img src="http://dummyimage.com/500x300/000/fff" class="img-responsive full" data-caption-title="First caption for slider 1" />
<img src="http://dummyimage.com/500x300/ddd/fff" class="img-responsive full" data-caption-title="First caption for slider 2" />
<img src="http://dummyimage.com/500x300/aaa/fff" class="img-responsive full" data-caption-title="First caption for slider 3" />
<img src="http://dummyimage.com/500x300/ccc/000" class="img-responsive full" data-caption-title="First caption for slider 4" />
</div>
</div>
</a>
</div>
update (HTML structure for the modal)
<div class="modal breaker fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body noPad">
<button type="button" class="close-pop close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<div class="">
<a href="#" onclick="return false;">
<span class="fa fa-chevron-right fa-2x right white"></span>
</a>
<a href="#" onclick="return false;">
<span class="fa fa-chevron-left fa-2x left white"></span>
</a>
</div>
<div class="pop-image">
<img src="" class="img-responsive full">
</div>
<h4 class="modal_caption"></h4>
</div>
</div>
</div>
</div>
JavaScript:
(function() {
var ready = function() {
$(".that_img").hover(function() {
$(this).find("span.search").css("display", "block");
}, function() {
$(this).find("span.search").css("display", "none");
});
$(".that_img").on({
click: function() {
var img_src_arr = $(this).find(".imgs-album")
.children("img").map(function() {
return $(this).attr("src");
}).get();
var img_data_cap = $(this).find(".imgs-album")
.children("img").map(function() {
return $(this).data("caption-title");
}).get();
$(".pop-image").find("img").attr("src", img_src_arr[0]);
$(".modal_caption").html(img_data_cap[0]);
var counter = 0;
counter >= 0 ? $(".left").hide() : $(".left").show();
$(".right").on({
click: function() {
counter += 1;
if (counter == 1) {
$(".left").show()
}
var next = $(".pop-image").find("img")
.attr("src", img_src_arr[counter]);
var next_cap = $(".modal_caption")
.html(img_data_cap[counter]);
if (counter > (img_src_arr.length - 2)) {
$(".right").hide();
$(".left").show();
}
}
});
$(".left").on({
click: function() {
counter -= 1;
$(".right").show();
if (counter === 0) {
$(".right").show();
$(".left").hide();
}
$(".pop-image").find("img")
.attr("src", img_src_arr[counter]);
var prev = $(".modal_caption").html(img_data_cap[counter]);
}
});
}
});
}
$(document).ready(ready);
}).call(this);
The problem occurs because every time an image is clicked, click-handlers are added. With the first image everything seems fine because .left and .right have, at that point, a single click handler. Upon clicking another image, new click-handlers are added and now when you click a chevron, the 2 handlers are being executed resulting in your counter going up, or down, by 2 instead of 1. To prevent this from happening you will have to unbind the handlers from the object.
Change these lines, (explanation here)
$(".right").on({
$(".left").on({
to,
$(".right").off().on({
$(".left").off().on({
And change this line,
counter >= 0 ? $(".left").hide() : $(".left").show();
to,
$(".right").show()
$(".left").hide()
Edit : as mentioned by juhana unbind() is deprecated, so use off() instead.

Categories