Develop Reference

Javascript not hiding button on last image

I have a JSFiddle that shows my code now:
https://jsfiddle.net/qtu1xgw3/2/
Basically there is an image button (pink flower) and then there are 4 images that change when the button is clicked.
Now the issue is that I want the button to hide when I get to the last image. Right now I need to click the button twice to get it to hide on the last image. But I want with the last click of the button to hide it at the same time that the last image in the gallery is shown.
One of the images is in the html part of the code, which might be what causes this issue, I think, but I'm not sure how to do this differently without breaking the code?
(random images from google used for the sake of testing)
HTML:
<div class="test">
<div class="desc">
<h2 id="title_text">test1</h2>
<p id="under_text">test2</p>
</div>
<div id="pink">
<img src="https://images.vexels.com/media/users/3/234325/isolated/lists/cba2167ec09abeeee327ffa0f994151b-detailed-flower-illustration.png" onclick="imagefun()"></div>
<div class="game">
<img src="https://images.vexels.com/media/users/3/143128/isolated/lists/2a84565e7c9642368346c7e6317fa1fa-flat-flower-illustration-doodle.png" id="getImage"></div>
</div>
CSS:
.game img {
width: 300px;
height: auto;
}
.test {
display: flex;
flex-direction: row;
}
JS:
var counter = 0,
gallery = ["https://cdn.cloudflare.steamstatic.com/steamcommunity/public/images/apps/914750/aab494aa7cde1991d0a86cc28ec6debdbee37d7f.jpg", "https://api.assistivecards.com/cards/gardening/flowers.png", "https://i.pinimg.com/474x/7d/10/75/7d1075cf259131c942037683d2243bb0.jpg"],
imagefun = function () {
if (counter >= gallery.length) {
document.getElementById("title_text").innerHTML = "test3"; document.getElementById("under_text").innerHTML = "test4"; document.getElementById("pink").style.display = "none";
}
else{
document.getElementById("getImage").src = gallery[counter];
counter++;
}
};

I have made some change to your code. It will help you.
var counter = 0,
gallery = ["https://cdn.cloudflare.steamstatic.com/steamcommunity/public/images/apps/914750/aab494aa7cde1991d0a86cc28ec6debdbee37d7f.jpg", "https://api.assistivecards.com/cards/gardening/flowers.png", "https://i.pinimg.com/474x/7d/10/75/7d1075cf259131c942037683d2243bb0.jpg"],
imagefun = function () {
if (counter == gallery.length -1) {
document.getElementById("getImage").src = gallery[counter];
document.getElementById("pink").style.display = "none";
}
else{
document.getElementById("getImage").src = gallery[counter];
counter++;
}
};

try this
Evaluate when the counter is equal to the size of your array if so then do the job you want
imagefun = function () {
if(counter==gallery.length)
{
document.getElementById("getImage").style.display = "none";
}
if (counter >= gallery.length) {
document.getElementById("title_text").innerHTML = "test3";
document.getElementById("under_text").innerHTML = "test4";
document.getElementById("pink").style.display = "none";
}
else{
document.getElementById("getImage").src = gallery[counter];
counter++;
}
};

The issue is that you increment your counter after the counter >= gallery.length check.
The correct solution is:
const gallery = [
"https://cdn.cloudflare.steamstatic.com/steamcommunity/public/images/apps/914750/aab494aa7cde1991d0a86cc28ec6debdbee37d7f.jpg",
"https://api.assistivecards.com/cards/gardening/flowers.png",
"https://i.pinimg.com/474x/7d/10/75/7d1075cf259131c942037683d2243bb0.jpg",
];
let counter = 0;
document.getElementById("getImage").src = gallery[counter];
function imagefun() {
counter += 1;
document.getElementById("getImage").src = gallery[counter];
if (counter >= gallery.length - 1) {
document.getElementById("title_text").innerHTML = "test3";
document.getElementById("under_text").innerHTML = "test4";
document.getElementById("pink").style.display = "none";
}
};

Javascript Slideshow Buttons Only Showing 1 Slide

I am working on a slideshow for the homepage of my website. It works, automatically shifting throughout 1-3, but the onclick functions are having some troubles. Every single one of the buttons bring me to my first slide, not the second or the third, just the first. Any help is appreciated, please and thanks!
document.getElementById("left").style.opacity =1;
var currentSlide = 2;
var myVar = setInterval(changeSlide, 5000);
function changeSlide() {
if (currentSlide == 1) {
currentSlide++;
document.getElementById("slide1IMG").src = 'http://theskindealer.com/img/slide1.png';
document.getElementById("left").style.opacity =1;
document.getElementById("right").style.opacity =.5;
} else if (currentSlide == 2) {
currentSlide++;
document.getElementById("slide1IMG").src = 'http://theskindealer.com/img/slide2.png';
document.getElementById("middle").style.opacity =1;
document.getElementById("left").style.opacity =.5;
} else {
--currentSlide;
--currentSlide;
document.getElementById("slide1IMG").src = 'http://theskindealer.com/img/slide3.png';
document.getElementById("right").style.opacity =1;
document.getElementById("middle").style.opacity =.5;
}
}
function firstSlide() {
currentSlide = 1;
myVar = setInterval(changeSlide, 5000);
}
function secondSlide() {
currentSlide = 2;
myVar = setInterval(changeSlide, 5000);
}
function thirdSlide() {
currentSlide = 3;
myVar = setInterval(changeSlide, 5000);
}
<div id="slideshow">
<div id="slide1">
<img src="/img/slide1.png" alt="" style="width:100%;height:100%;position:absolute;" id="slide1IMG">
</div>
<div id="selectors">
<a href="" onclick="firstSlide()">
<div id="left">
</div>
</a>
<a href="" onclick="secondSlide()">
<div id="middle">
</div>
</a>
<a href="" onclick="thirdSlide()">
<div id="right">
</div>
</a>
</div>
</div>

You are using links <a> tags, to handle your clicks, the page is reloading every time you click on one of them, on page reload, it will display the first slide. That is the expected behavior of href="".
The easiest solution is to change your <a> tags for <button> tags, though you could also catch the event and use event.preventDefault() to stop the page from reloading.
<button onclick="firstSlide()">
...
</button>
<button onclick="secondSlide()">
...
</button>
<button onclick="thirdSlide()">
...
</button>
Once you stop navigating away from the page, your code will be setting a new interval every time you handle the click, to avoid that, you could use a setTimeout() at the end of changeSlide(), instead of an interval, or clear the interval on your click handlers
function firstSlide() {
// Change the current slide
currentSlide = 1;
changeSlide();
// Reset the interval
clearInterval(myVar);
myVar = setInterval(changeSlide, 5000);
}
I would probaly rename myVar to something that makes it clear that it is the interval, like refreshSlideInterval.
You could also change the conditionals inside changeSlide to use strict comparisons
if (currentSlide == 1) {...}
to
if (currentSlide === 1) {...}
Since you know that you are working with integers.
Example snippet
const content = document.getElementById("content");
let currentSlide = 2;
let slideCountDown = setTimeout(changeSlide, 3000);
function changeSlide() {
// Clear the timeout
clearTimeout(slideCountDown);
if (currentSlide === 1) {
currentSlide = 2;
content.innerText = 1;
} else if (currentSlide === 2) {
currentSlide = 3;
content.innerText = 2;
} else {
currentSlide = 1;
content.innerText = 3;
}
// Reset the timeout
slideCountDown = setTimeout(changeSlide, 3000);
}
function firstSlide() {
currentSlide = 1;
changeSlide();
}
function secondSlide() {
currentSlide = 2;
changeSlide();
}
function thirdSlide() {
currentSlide = 3;
changeSlide();
}
#container {
display: flex;
flex-direction: column;
align-items: center;
}
#content {
font-size: 5rem;
padding: 2rem;
}
#buttons {
display: flex;
flex-direction: row;
}
<div id="container">
<div id="content">1</div>
<div id="buttons">
<button onclick="firstSlide()">
First
</button>
<button onclick="secondSlide()">
Second
</button>
<button onclick="thirdSlide()">
Third
</button>
</div>
</div>

The setInterval at each select function are not necessary.
According to the changeSlide function, change the currentSlide as follow.
function firstSlide() {
currentSlide = 3;
}
function secondSlide() {
currentSlide = 1;
}
function thirdSlide() {
currentSlide = 2;
}

check this (run the snippet below ) i fixed some syntax errors :
document.getElementById("left").style.opacity =1;
var currentSlide = 1;
var myVar = setInterval(function(){
return changeSlide()
}
,1000);
function changeSlide() {
if (currentSlide == 1) {
currentSlide++;
document.getElementById("slide1IMG").src = 'https://upload.wikimedia.org/wikipedia/commons/e/e1/FullMoon2010.jpg';
document.getElementById("left").style.opacity =1;
document.getElementById("right").style.opacity =.5;
} else if (currentSlide == 2) {
currentSlide++;
document.getElementById("slide1IMG").src = 'https://upload.wikimedia.org/wikipedia/commons/thumb/7/77/Stellar_%289460796504%29.jpg/1024px-Stellar_%289460796504%29.jpg';
document.getElementById("middle").style.opacity =1;
document.getElementById("left").style.opacity =.5;
} else if(currentSlide==3){
currentSlide = 1;
document.getElementById("slide1IMG").src = 'https://upload.wikimedia.org/wikipedia/commons/thumb/6/68/Pillars_of_creation_2014_HST_WFC3-UVIS_full-res_denoised.jpg/1024px-Pillars_of_creation_2014_HST_WFC3-UVIS_full-res_denoised.jpg';
document.getElementById("right").style.opacity =1;
document.getElementById("middle").style.opacity =.5;
}
}
function firstSlide() {
currentSlide = 1;
clearInterval(myVar)
myVar = setInterval(changeSlide(), 1000);
}
function secondSlide() {
currentSlide = 2;
clearInterval(myVar)
myVar = setInterval(changeSlide(), 1000);
}
function thirdSlide() {
currentSlide = 3;
clearInterval(myVar)
myVar = setInterval(changeSlide(), 1000);
}
<div id="slideshow">
<div id="slide1">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/77/Stellar_%289460796504%29.jpg/1024px-Stellar_%289460796504%29.jpg" alt="" style="width:100%;height:100%;position:absolute;" id="slide1IMG">
</div>
<div id="selectors">
<a href="" onclick="firstSlide()">
<div id="left">
</div>
</a>
<a href="" onclick="secondSlide()">
<div id="middle">
</div>
</a>
<a href="" onclick="thirdSlide()">
<div id="right">
</div>
</a>
</div>
</div>

Inconsistent Slide Animation in a JavaScript Switch

I am trying to implement a left/right sliding animation inside of a JavaScript switch statement and the animation (sliding left and right without a bounce effect and no whitespace in between images) is not consistently activating. Also, the slide animation still activates when the previous button is clicked on the first slide and when the next button is clicked on the last slide. This should not be happening. Does anyone have any thoughts? Please see the code example.
$(function() {
// USER EDITABLE CONTROLS
var content = 'img'; // accepts any DOM element - div, img, table, etc...
var showControls = true; // true/false shows/hides the slider's navigational controls
var transition = 'slide'; // supports default, fade, slide
var transitionDuration = .5; // adjust the time of the transition measured in seconds
// VARIABLE DECLARATIONS
var contentType = $(content);
var $el = $('#showcase');
var $leftArrow = '#left_arrow';
var $rightArrow = '#right_arrow';
var $load = $el.find(contentType)[0];
var slideCount = $el.children().length;
var slideNum = 1;
// PRELOADS SLIDE WITH CORRECT SETTINGS
$load.className = 'active';
// ADD SLIDER CONTROLS TO PAGE
if (showControls === true) {
$('<div id="controls">« Previous Next »</div>').insertAfter('#showcase');
$('#controls').find('#left_arrow').addClass('disabled');
}
// LOGIC FOR SLIDE TRANSITIONS
function transitions() {
switch (transition) {
// FADE TRANSITION
case 'fade':
$('.slide').stop().animate({opacity : 0}, transitionDuration*300, function(){
$('.active').stop().animate({opacity : 1}, transitionDuration*1000);
});
break;
// SLIDE TRANSITION
case 'slide':
if (slideNum > 1) {
$('.slide').stop().animate({left : -160}, transitionDuration*800, function(){
$('.active').stop().animate({left : 0}, transitionDuration*1000);
});
}
if (slideNum < slideCount) {
$('.slide').stop().animate({left : 160}, transitionDuration*800, function(){
$('.active').stop().animate({left : 0}, transitionDuration*1000);
});
}
break;
// DEFAULT TRANSITION
case 'default':
break;
}
}
// CHECKS FOR FIRST AND LAST INDEX IN THE SLIDER
function checkSlide() {
if (slideNum == 1) {
$($leftArrow).addClass('disabled');
} else {
$($leftArrow).removeClass('disabled');
}
if (slideNum == slideCount) {
$($rightArrow).addClass('disabled');
} else {
$($rightArrow).removeClass('disabled');
}
}
// NAVIGATIONAL LOGIC FOR PREVIOUS/NEXT BUTTONS
$(document).on('click', $leftArrow, function() {
if (slideNum > 1) {
var counter = $('.active').index();
counter--;
$('.active').addClass('slide');
$('.active').removeClass('active');
transitions();
$el.find(contentType).eq(counter).addClass('active');
slideNum--;
checkSlide();
}
})
$(document).on('click', $rightArrow, function() {
if (slideNum < slideCount) {
var counter = $('.active').index();
counter++;
$('.active').addClass('slide');
$('.active').removeClass('active');
transitions();
$el.find(contentType).eq(counter).addClass('active');
slideNum++;
checkSlide();
}
})
});
#showcase {
width: 160px;
overflow: hidden;
}
img {
width: 160px;
}
a {
color: blue;
}
.disabled {
color: red !important;
}
.slide {
display: none;
opacity: 0;
position: relative;
left: 0px;
right: 0px;
}
.active {
display: block;
opacity: 1;
position: relative;
left: 0px;
right: 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="showcase">
<img class="slide" src="https://picsum.photos/458/354" />
<img class="slide" src="https://picsum.photos/458/354/?image=306" />
<img class="slide" src="https://picsum.photos/458/354/?image=626" />
</div>

As said in the comments you need to fix your conditional statements. Awhile ago you had set two click handlers - one of which is binded (and is triggered regardless of any condition) when the other handler is triggered, this caused the slide animation still activates when the previous button is clicked on the first slide and when the next button is clicked on the last slide issue.
As for the animations, see my code below. I hacked your conditions a litte. When previous is clicked, the slide is to move from left to right. When next is clicked the slide is to move from right to left. I used a flag to determine the movement it will make - see the new paramter for transition function
$(function() {
// USER EDITABLE CONTROLS
var content = 'img'; // accepts any DOM element - div, img, table, etc...
var showControls = true; // true/false shows/hides the slider's navigational controls
var transition = 'slide'; // supports default, fade, slide
var transitionDuration = .5; // adjust the time of the transition measured in seconds
// VARIABLE DECLARATIONS
var contentType = $(content);
var $el = $('#showcase');
var $leftArrow = '#left_arrow';
var $rightArrow = '#right_arrow';
var $load = $el.find(contentType)[0];
var slideCount = $el.children().length;
var slideNum = 1;
// PRELOADS SLIDE WITH CORRECT SETTINGS
$load.className = 'active';
// ADD SLIDER CONTROLS TO PAGE
if (showControls === true) {
$('<div id="controls">« Previous Next »</div>').insertAfter('#showcase');
$('#controls').find('#left_arrow').addClass('disabled');
}
// LOGIC FOR SLIDE TRANSITIONS
function transitions(impl = null) {
switch (transition) {
// FADE TRANSITION
case 'fade':
$('.slide').stop().animate({
opacity: 0
}, transitionDuration * 300, function() {
$('.active').stop().animate({
opacity: 1
}, transitionDuration * 1000);
});
break;
// SLIDE TRANSITION
case 'slide':
if (impl == "next") {
$('.slide').css("left", '160px');
$('.slide').stop().animate({
left: 160
}, transitionDuration * 800, function() {
$('.active').stop().animate({
left: 0
}, transitionDuration * 1000);
});
} else if (impl == "prev") {
$('.slide').css("left", '-160px');
$('.slide').stop().animate({
left: -160
}, transitionDuration * 800, function() {
$('.active').stop().animate({
left: 0
}, transitionDuration * 1000);
});
}
break;
// DEFAULT TRANSITION
case 'default':
break;
}
}
// CHECKS FOR FIRST AND LAST INDEX IN THE SLIDER
function checkSlide() {
if (slideNum == 1) {
$($leftArrow).addClass('disabled');
} else {
$($leftArrow).removeClass('disabled');
}
if (slideNum == slideCount) {
$($rightArrow).addClass('disabled');
} else {
$($rightArrow).removeClass('disabled');
}
}
// NAVIGATIONAL LOGIC FOR PREVIOUS/NEXT BUTTONS
$(document).on('click', $leftArrow, function() {
if (slideNum > 1) {
var counter = $('.active').index();
counter--;
$('.active').addClass('slide');
$('.active').removeClass('active');
transitions('prev');
$el.find(contentType).eq(counter).addClass('active');
slideNum--;
checkSlide();
}
})
$(document).on('click', $rightArrow, function() {
if (slideNum < slideCount) {
var counter = $('.active').index();
counter++;
$('.active').addClass('slide');
$('.active').removeClass('active');
transitions('next');
$el.find(contentType).eq(counter).addClass('active');
slideNum++;
checkSlide();
}
})
});
#showcase {
width: 160px;
overflow: hidden;
}
img {
width: 160px;
}
a {
color: blue;
}
.disabled {
color: red !important;
}
.slide {
display: none;
opacity: 0;
position: relative;
left: 0px;
right: 0px;
}
.active {
display: block;
opacity: 1;
position: relative;
left: 0px;
right: 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="showcase">
<img class="slide" src="https://picsum.photos/458/354" />
<img class="slide" style="left: 160px;" src="https://picsum.photos/458/354/?image=306" />
<img class="slide" style="left: 160px;" src="https://picsum.photos/458/354/?image=626" />
</div>

Change div's hover state with jQuery timer

I’m a complete jquery newb and I want to create 5 classes(.button1 - .button5) with a timer which toggles the next classes :hover or :active state every 4000ms on a continuous loop. I also want the ability for the timer to halt and continue if another one of the classes is hovered on by the user. Does anyone know of a good starting point or a thread with a similar solution?
I’ve attached a diagram.
CSS
.wrapper { width:100%; margin:0 auto; background:#f3f3f3; }
#buttonblock { display:block; }
.button1, .button2, .button3, .button4, .button5 { display:inline-block; margin:0 5px; height:50px; width:50px; border-radius:25px; background:#3cc8dd; }
.button1:hover, .button2:hover, .button3:hover, .button4:hover, .button5:hover{ background:#fbc040; }
HTML
<div class="wrapper">
<div id="buttonblock">
<div class="button1"></div>
<div class="button2"></div>
<div class="button3"></div>
<div class="button4"></div>
<div class="button5"></div>
</div>
</div>

you can simply loop over the array of objects, for example
var $block = $('#buttonblock div');
for (var n=0; n<$block.length; n++)
{
var domELM = $block[n]; // you can do $(domELM) to create a jquery of the dom
// do stuff here, set interval or whatever it is you wish to do.
if(n == $block.elngth)
n=0; //resets the loop
}

HTML
<div class="wrapper">
<div id="buttonblock">
<div class="button button1"></div>
<div class="button button2"></div>
<div class="button button3"></div>
<div class="button button4"></div>
<div class="button button5"></div>
</div>
css
.hover {
background:#fbc040;
}
js
var counter = 1;
var timer;
$(document).ready(function () {
startTimer();
$('.button').mouseenter(function () {
$('.hover').removeClass('hover');
clearInterval(timer);
});
$('.button').mouseleave(function () {
startTimer();
});
});
function startTimer() {
timer = setInterval(function () {
counter = (counter > 5) ? 1 : counter;
$('.hover').removeClass('hover');
$('.button' + counter).addClass('hover');
counter++;
}, 4000);
}
JSFiddle

Try this
var divs = $('#buttonblock').children('div'),
number = divs.length,
currentIndex = 0,
intervalLength = 2000;
function setTimer() {
divs.removeClass('hover');
divs.eq(currentIndex).addClass('hover');
currentIndex++;
if (currentIndex == number) {
currentIndex = 0;
}
}
setTimer();
var timer = setInterval(setTimer, intervalLength);
divs.mouseenter(function () {
clearInterval(timer);
divs.removeClass('hover');
var div = $(this);
div.addClass('hover');
currentIndex = divs.index(div);
}).mouseleave(function () {
timer = setInterval(setTimer, intervalLength);
});
Example - setInterval
or using setTimeout

Jquery fadeIn not appearing to happen

I have made this minimal test jsfiddle to show images and navigate with thumbnails, next and previous and also run as a slideshow.
It seems to be working OK, except that I can not get the current displayed image to fadeOut prior to the fadeIn of the next image.
Initially all the images were placed in a stack in the #holder DIV and then FadeIn and FadeOut worked as I expected, but I need to have the images in an array and load as required, because there will be several different values, associated with each image.
I probably have made some fundamental mistake or I do not understand how FadeIn and FadeOut properly work, as I am not an expert in javascript and jquery and I just get by, by looking at examples on here and similar sites.
I suspect I may need to somehow force a delay before loading the next image, but I can not work out how to do that.
Thanks
<style type='text/css'>
#holder { position: absolute; top: 100px; background-color:#CCCCCC;
width: 300px; height: 200px;
}
.slides { position: relative; top: 0px;
display: none;
}
#thumbs li
{
display: inline;
list-style-type: none;
padding-right: 6px;
}
</style>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
// define Global Vars
var timerON = null;
var files = [
["http://dummyimage.com/300x200/000/fff&text=Array-01", "http://dummyimage.com/40x40/000/fff&text=01","Title-01"] ,
["http://dummyimage.com/300x200/000/fff&text=Array-02", "http://dummyimage.com/40x40/000/fff&text=02","Title-02"] ,
["http://dummyimage.com/300x200/000/fff&text=Array-03", "http://dummyimage.com/40x40/000/fff&text=03","Title-03"] ,
["http://dummyimage.com/300x200/000/fff&text=Array-04", "http://dummyimage.com/40x40/000/fff&text=04","Title-04"] ,
["http://dummyimage.com/300x200/000/fff&text=Array-05", "http://dummyimage.com/40x40/000/fff&text=05","Title-05"] ,
["http://dummyimage.com/300x200/000/fff&text=Array-06", "http://dummyimage.com/40x40/000/fff&text=06","Title-06"] ,
["http://dummyimage.com/300x200/000/fff&text=Array-07", "http://dummyimage.com/40x40/000/fff&text=07","Title-07"]
]
var numImages = files.length;
// initial routines
showImage(1);
buildThumbs();
function showImage(num) {
//$('#holder img').fadeOut();
if ( $('#holder img').length > 0 ) { // fadeout existing
$("#holder img").fadeOut(700);
//alert("Faded OUT");
}
$("#holder").html('<img id="' + num + '" src="' + files[num-1][0] + '" style="display:none;"' + '" />');
$("#holder img").fadeIn(700);
//alert("Faded IN");
}
function buildThumbs() {
var thumbs = "";
for (cnt=0; cnt<files.length; cnt++) {
thumbs += '<li><a href="#" id="' + (cnt + 1) + '"><img src="' + files[cnt][1] + '" /></li>';
}
$('#thumbs').html(thumbs);
}
// Initialise routines for acting on click events
$(document).ready(function() {
$('#prev').click( function () {
var currImage = parseInt($('#holder img:visible').attr("id"));
if (currImage == 1) {
// at first position
}
else {
showImage(currImage-1); }
});
$('#next').click( function () {
var currImage = parseInt($('#holder img:visible').attr("id"));
if (currImage == numImages) {
// at last position
}
else {
showImage(currImage+1);
}
});
$('#thumbs a').click( function () {
var selImage = parseInt($(this).attr('id'));
var currImage = parseInt($('#holder img:visible').attr("id"));
showImage(selImage);
});
$('#slideShowBtn').click( function () {
slideShowCheck();
});
});
function slideShowCheck() {
if(timerON != null) {
clearTimeout(timerON);
timerON = null;
$('#slideShowBtn').text('Play Slideshow');
} else {
$('#slideShowBtn').text('Stop Slideshow');
slideShow();
}
}
function slideShow() {
var nextImage = 0;
var currImage = parseInt($('#holder img:visible').attr("id"));
if (currImage == numImages) {
nextImage = 1;
} else {
nextImage = currImage + 1;
}
showImage(nextImage);
timerON = setTimeout(slideShow, 3000);
}
});//]]>
</script>
</head>
<body>
<p>
<button id="prev">« Prev</button>
<button id="next">Next »</button>
</p>
<ul id="thumbs">
</ul>
<p>
<button id="slideShowBtn">Play Slideshow</button>
</p>
<div id="holder">
</div>
<div style="clear:both;"></div>
<ul id="thumbs2">
</ul>
</body>
</html>

Callbacks, callbacks, callbacks.
JS does alot of things async, so you will need to make use of a callback on that fadein.
$(ITEM1).fadeOut("fast", function() {
alert("all the way faded out");
$(ITEM2).fadeIn("fast");
});
Here's your fixed fiddle.