For example, if you click on the third element of $gall and $zoom appears on the screen, the variable i has a value of 2 and if you click on the fourth element of $previewImg in the $zoom, the third picture of when you click $gall is displayed on the screen. Of course, in the slide() function, variable i has a value of 2. How do we solve this? Help!
var $gall = $('div.after_load > div.modal_wrap > div.modals.modal_history > div.content > div.gallery > div.gallery> div.images')
var i,
count = $gall.length - 1,
$viewImg = $zoom.find('div.image > img'),
$previewImg = $zoom.find('div.preview > div.item_wrap > div.items');
//var $imgTitle = $gall.eq(i).children('h5.img_expl');
$gall.on('click', function(){
//show $zoom
$zoom.show();
i = $gall.index(this);
slide();
// When you press the close button.
$zoom.children('span').on('click', function(){
$zoom.hide();
});
});
function slide(){
var cur = $gall.eq(i).children('img');
// // $previeImg hover effect.
if (!$previewImg.hasClass('active')) {
$previewImg.children('img').mouseover(function(){
$(this).addClass('active');
});
};
$viewImg.attr('src', cur.attr('src'));
$viewImg.fadeOut(0);
$viewImg.fadeIn(500);
$previewImg.children('div.border').css('display', 'none');
$previewImg.eq(i).children('div.border').css('display', 'block');
$previewImg.children('img').removeClass('active');
$previewImg.eq(i).children('img').addClass('active');
console.log('current ',i)
};
$previewImg.on('click', function(){
var i = $previewImg.index(this);
**//passing a new variable i within the slide() function.**
slide();
});
function previous(){
if(i > 0){
i = i-1;
}else{
i = count;
};
slide();
};
function next(){
if(i < count) {
i = i+1;
}else{
i = 0;
};
slide();
};
$('div.gall_mask > div.zoom > div.controller > div.btn.left').on('click', function(){
previous();
});
$('div.gall_mask > div.zoom > div.controller > div.btn.right').on('click', function(){
next();
});
You are using i as a global variable, so it is meaningless to initialize vari in this closure. If you initialize vari in the closure, it is i that only works in the closure, so it is irrelevant to the global variable i that the slide() function refers to.
In my opinion, i means "the current active slide of any slider," and this is a pretty peripheral variable. I wonder why you use this as a discharging variable. I think it'll work if I just flip the slide with the click. What exactly is the problem?
$previewImg.on('click', function() {
i = $previewImg.same principle as index(this); // prev(), next()
slide();
});
© 2024 OneMinuteCode. All rights reserved.