After successfully implementing a feature to replace background images with a button click, I now aim to create a gallery of thumbnail images that users can also click on. While I have managed to make the images change with "next" and "previous" buttons, integrating thumbnail clicks has proven to be challenging. Whenever I try to incorporate clicking on thumbnails, it disrupts the functionality. My goal is to allow users to click on a thumbnail image and update the index number so that when they press "next," it moves to the next image instead of reverting back to the second one regardless of the chosen thumbnail.
The main issue arises when clicking on a thumbnail correctly displays the corresponding image, but pressing "next" always leads to the second image in line, irrespective of the current position. I need a solution to ensure that the "next" function reads the index number of the current image accurately.
Thank you in advance for any help!
// Initiating the background slideshow function
$(function() {
// Defining arrays for background images and thumbnails
var colorBackgrounds = new Array(
'url(backgrounds/photoTest/20140714-_MG_0604.jpg)',
'url(backgrounds/photoTest/20140714-_MG_0860.jpg)',
'url(backgrounds/photoTest/20140716-IMG_1296.jpg)'
);
var backgroundThumbs = new Array(
'/backgrounds/photoTest/20140714-_MG_0604_TN.jpg)',
'/backgrounds/photoTest/20140714-_MG_0860_TN.jpg)',
'/backgrounds/photoTest/20140716-IMG_1296_TN.jpg)'
);
var colorCurrent = 0;
var tnCurrent = 0;
// Populating the div with thumbnails and their respective click function (working fine)
backgroundThumbs.forEach(function(value,index) {
$('#thumbID_' + index).html('<img src="' + value + '" class="thumbImage" />');
$('#thumbID_' + index).click(function() {
var tnCurrent = index;
var colorCurrent = tnCurrent;
$('.bodyBackground').fadeOut(500, function() {
$('.bodyBackground').css({
'background':colorBackgrounds[colorCurrent],
'background-position':'center center',
'background-repeat':'no-repeat',
'background-attachment':'fixed'});
$('.bodyBackground').fadeIn(500);
});
});
});
// Function to move to the next image (currently working, but not considering changes from thumbnail clicks)
$('.nextImageWrapper').click(function() {
$('.bodyBackground').fadeOut(500, function() {
$('.bodyBackground').css({
'background':colorBackgrounds[colorCurrent = ++colorCurrent % colorBackgrounds.length],
'background-position':'center center',
'background-repeat':'no-repeat',
'background-attachment':'fixed'});
$('.bodyBackground').fadeIn(500);
});
});
});