We Keep Coding

hide next button when last element reaches

I am creating a simple gallery with an overlay to display enlarged image when clicked.
In my gallery, every 3 images are grouped into a container as
<div class='overlay'>
<a class='next control'>Next</a>
</div>
<div class="container">
<div class="image">
<img src="http://dummyimage.com/100&text=Image1"/>
</div>
<div class="image">
<img src="http://dummyimage.com/100&text=Image2" />
</div>
<div class="image">
<img src="http://dummyimage.com/100&text=Image3"/>
</div>
</div>
<div class="container">
<div class="image">
<img src="http://dummyimage.com/100&text=Image4"/>
</div>
<div class="image">
<img src="http://dummyimage.com/100&text=Image5" />
</div>
<div class="image">
<img src="http://dummyimage.com/100&text=Image6"/>
</div>
</div>
JQuery
$(document).ready(function () {
var src;
var currentElement;
$(".image").click(function () {
currentElement = $(this);
src = $(currentElement).find("img").attr("src");
$(".overlay").css("background-image", "url('" + src + "')");
$(".overlay").show();
});
$(".next").click(function () {
if ($(currentElement).next().length) {
currentElement = currentElement.next();
src = $(currentElement).find("img").attr("src");
}
else {
currentElement = $(currentElement).parent().next().find(".image:first");
src = $(currentElement).find("img").attr("src");
}
$(".overlay").css("background-image", "url('" + src + "')");
});
});
I am able to get the next image on clicking next. But my problem is How to disable the next button when last image reaches ?.
I am unable to find a logic to get the last image.
Note: the images in last container may vary from 1 to 3
Here is the demo : https://jsfiddle.net/y5fwgz25/1/

here is my solution but i do not like this code, but works fine
<div class='overlay'>
<a class='next'></a>
</div>
<div id="gallery">
<div class="container">
<div class="image">
<img src="http://dummyimage.com/100&text=Image1"/>
</div>
<div class="image">
<img src="http://dummyimage.com/100&text=Image2" />
</div>
<div class="image">
<img src="http://dummyimage.com/100&text=Image3"/>
</div>
</div>
<div class="container">
<div class="image">
<img src="http://dummyimage.com/100&text=Image4"/>
</div>
<div class="image">
<img src="http://dummyimage.com/100&text=Image5" />
</div>
<div class="image">
<img src="http://dummyimage.com/100&text=Image6"/>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function () {
var src;
var currentElement;
var last_img = $("#gallery .container:last-child .image:last-child");
$(".image").click(function () {
currentElement = $(this);
src = $(currentElement).find("img").attr("src");
$(".overlay").css("background-image", "url('" + src + "')");
$(".overlay").show();
if ( $(currentElement)[0] == $(last_img)[0] ) {
$(".overlay .next").hide();
}
});
$(".next").click(function () {
if ( $(currentElement).next()[0] == $(last_img)[0] ) {
$(".overlay .next").hide();
}
if ($(currentElement).next().length) {
currentElement = currentElement.next();
src = $(currentElement).find("img").attr("src");
}else {
currentElement = $(currentElement).parent().next().find(".image:first");
src = $(currentElement).find("img").attr("src");
}
$(".overlay").css("background-image", "url('" + src + "')");
});
});
</script>

why don't you use jquery last method to get the last sibling and compare any of its attributes with the same attributes of the current element.
If they are the same, hide or disable the next button.

You can add one if condition. If the length of currentElement is zero then hide .next.
Updated Fiddle-
$(document).ready(function () {
var src;
var currentElement;
$(".image").click(function () {
currentElement = $(this);
src = $(currentElement).find("img").attr("src");
$(".overlay").css("background-image", "url('" + src + "')");
$(".overlay").show();
});
$(".next").click(function () {
if ($(currentElement).next().length) {
currentElement = currentElement.next();
src = $(currentElement).find("img").attr("src");
}
else {
currentElement = $(currentElement).parent().next().find(".image:first");
src = $(currentElement).find("img").attr("src");
}
if($(currentElement).length==0) {
$(".next").hide();
}
$(".overlay").css("background-image", "url('" + src + "')");
});
});
.overlay {
position: fixed;
top: 0;
left: 0;
display: none;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.9) no-repeat;
background-position: center;
}
.next {
position: absolute;
width: 50px;
height: 50px;
top: 50%;
background-image: url("http://dummyimage.com/50&text=Next");
right: 8em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='overlay'>
<a class='next'></a>
</div>
<div class="container">
<div class="image">
<img src="http://dummyimage.com/100&text=Image1"/>
</div>
<div class="image">
<img src="http://dummyimage.com/100&text=Image2" />
</div>
<div class="image">
<img src="http://dummyimage.com/100&text=Image3"/>
</div>
</div>
<div class="container">
<div class="image">
<img src="http://dummyimage.com/100&text=Image4"/>
</div>
<div class="image">
<img src="http://dummyimage.com/100&text=Image5" />
</div>
<div class="image">
<img src="http://dummyimage.com/100&text=Image6"/>
</div>
</div>

Multiple Auto fade in/fade out on loop in multiple divs

I have 3 columns in a table with different pictures in each. I am trying to have the fade at different times with different pictures in a loop and to start automatically.
I have managed to get it working but i have after about 20 seconds i have white boxes and not images.
Here is a link to it on https://jsfiddle.net/nmcj4yze/3/.
My Jquery code:
$(document).ready(function () {
var InfiniteRotator = {
init: function () {
//initial fade-in time (in milliseconds)
var initialFadeIn = 4000;
//interval between items (in milliseconds)
var itemInterval = 4000;
//cross-fade time (in milliseconds)
var fadeTime = 4000;
//count number of items
var numberOfItems = $('.rotating-home').length;
//set current item
var currentItem = 0;
//show first item
$('.rotating-home').eq(currentItem).fadeIn(initialFadeIn);
//loop through the items
var infiniteLoop = setInterval(function () {
$('.rotating-home').eq(currentItem).fadeOut(fadeTime);
var rand = Math.floor(Math.random() * (numberOfItems - 1)) + 1;
currentItem = (currentItem + rand) % numberOfItems;
$('.rotating-home').eq(currentItem).fadeIn(fadeTime);
}, itemInterval);
}
};
InfiniteRotator.init();
});
//]]>
Css:
body {
color:#999;
font-family:"MS Serif", "New York", serif;
font-size:16px;
padding-left:20px;}
/* slider */
#rotating-item-wrapper {
list-style-type:none;
margin:0;
padding:0;
height: 150px;
}
.rotating-home {
display:;
position: absolute;
}
And Html:
<table width="60%" align="center">
<tr>
<td>
<div id="rotating-home-wrapper">
<div class="rotating-home">
<img src="http://paul.cerrone.me/wp-content/uploads/2013/06/BQcDAAAAAwoDanBnAAAABC5vdXQKFjlCVTZ6M0RDM3hHN2xTbFRpWUlPQlEAAAACaWQKAXgAAAAEc2l6ZQ.jpg" height="100" width="100" border="0" />
</div>
<div class="rotating-home">
<img src="http://www.dailyfailcenter.com/sites/default/files/fail/ea662e71d267.jpg" class="slide" height="100" width="100" border="0" />
</div>
</td>
<td>
<div class="rotating-home">
<img src="http://blog.epromos.com/images/google-dog.jpg" class="slide" height="100" border="0" />
</div>
<div class="rotating-home">
<img src="http://www.thelastnewspaper.com/images-future/gps-dog-tracking-300x400.jpg" class="slide" height="100" border="0" />
</div>
</td>
<td>
<div class="rotating-home">
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQHzIZUSCKJBajh8kY8zbVmyYYBCbzgy7ADISw6h9cCJ-Mw2pwnFw" class="slide" height="100" border="0" />
</div>
<div class="rotating-home">
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSWgFW9ZbKPn3_ECEJgV58atYzlbyZzKzvkhgsP3zdt4BFmw_7GfQ" class="slide" height="100" border="0" />
</div>
</td>
</div>
</tr>
Updated
Sorry i should of been more clear.
At first i want 3 columns in a table. The first one was 600x600, the second was 300x600 and the third was 300x600. When the page loads you see 3 pictures. After 4 seconds column 1 fades into another picture without going to a white background. After another 4 seconds column two fades into a another picture, and after another 4 seconds column 3 does then same. I would like to be on a continuous cycle so it would start again. But i couldn't do that, i did achieve something close with a random cycle but i have white backgrounds after about 20 seconds. Not sure where i am going wrong
I have tried everything and and look everywhere.
Any help will be much appreciated.
Thanks

I'm assuming the following is what you wanted:
https://jsfiddle.net/nmcj4yze/7/
You were on the right track. I cleaned up your HTML a bit, and removed some CSS that wasn't doing anything. I also made it so that the initial image in each table was hidden.
With regards to the javascript, I switched out the selectors to iterate over each <td> element, and had it use jQuery's fadeToggle() function on its contents. Given that the first item was hidden by default, this would immediately toggle the animations for both images.
Changed your code to the following:
$(document).ready(function () {
var InfiniteRotator = {
init: function () {
//initial fade-in time (in milliseconds)
var initialFadeIn = 4000;
//interval between items (in milliseconds)
var itemInterval = 4000;
//cross-fade time (in milliseconds)
var fadeTime = 4000;
//count number of items
var rotationLimit = $('td').length + 1;
//set current item
var currentItem = 0;
//loop through the items
var infiniteLoop = setInterval(function () {
$('td').eq(currentItem).find('.rotating-home').fadeToggle(fadeTime);
currentItem++;
if(currentItem == rotationLimit) currentItem = 0;
}, itemInterval);
}
};
InfiniteRotator.init();
});
//]]>
#charset"utf-8";
#page {
height: 100%;
display: none;
}
body {
color:#999;
font-family:"MS Serif", "New York", serif;
font-size:16px;
padding-left:20px;
}
.rotating-home {
position: absolute;
}
.rotating-home:first-of-type {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table width="60%" align="center">
<tr>
<td>
<div class="rotating-home" data-display="0">
<img src="http://paul.cerrone.me/wp-content/uploads/2013/06/BQcDAAAAAwoDanBnAAAABC5vdXQKFjlCVTZ6M0RDM3hHN2xTbFRpWUlPQlEAAAACaWQKAXgAAAAEc2l6ZQ.jpg" height="100" width="100" border="0" />
</div>
<div class="rotating-home" data-display="1">
<img src="http://www.dailyfailcenter.com/sites/default/files/fail/ea662e71d267.jpg" class="slide" height="100" width="100" border="0" />
</div>
</td>
<td>
<div class="rotating-home" data-display="2">
<img src="http://blog.epromos.com/images/google-dog.jpg" class="slide" height="100" border="0" />
</div>
<div class="rotating-home" data-display="3">
<img src="http://www.thelastnewspaper.com/images-future/gps-dog-tracking-300x400.jpg" class="slide" height="100" border="0" />
</div>
</td>
<td>
<div class="rotating-home" data-display="4">
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQHzIZUSCKJBajh8kY8zbVmyYYBCbzgy7ADISw6h9cCJ-Mw2pwnFw" class="slide" height="100" border="0" />
</div>
<div class="rotating-home" data-display="5">
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSWgFW9ZbKPn3_ECEJgV58atYzlbyZzKzvkhgsP3zdt4BFmw_7GfQ" class="slide" height="100" border="0" />
</div>
</td>
</tr>
</table>

How to change a div with a button to another div?

I've a next button and back button. I want to show one question div at a time. Then I want next button to change the div to the next div question and the back button should change the div back to the previous div. Only one div should be seen at a time.
<input type="image" src="forward.gif" alt="Next">
<input type="image" src="back.gif" alt="Back">
<div class="question_one">
<img src ="images/green_question1.png" width="100%" height="100%"></img>
</div>
<div class="question_two">
<img src ="images/green_question2.png" width="100%" height="100%"></img>
</div>
<div class="question_three">
<img src ="images/green_question3.png" width="100%" height="100%"></img>
</div>
<div class="question_four">
<img src ="images/green_question4.png" width="100%" height="100%"></img>
</div>

Here's a simple JavaScript which solves this kind of problem:
<script>
var next = document.getElementById('next'),
back = document.getElementById('back'),
questions = document.getElementsByTagName('div'),
current = 0;
next.onclick = function showNext() {
if (questions[current+1]) {
questions[current].style.display = 'none';
questions[current+1].style.display = 'block';
current++;
} else {
return false;
}
}
back.onclick = function showPrev() {
if (questions[current-1]) {
questions[current].style.display = 'none';
questions[current-1].style.display = 'block';
current--;
} else {
return false;
}
}
</script>
And at first you should hide the questions with CSS (except the first one):
<style>
div:not(:first-of-type) {
display: none;
}
</style>
EDIT: here is your HTML...
<input type="image" src="forward.gif" alt="Next" id="next">
<input type="image" src="back.gif" alt="Back" id="back">
<div class="question_one">
<img src ="images/green_question1.png" width="100%" height="100%"></img>
</div>
<div class="question_two">
<img src ="images/green_question2.png" width="100%" height="100%"></img>
</div>
<div class="question_three">
<img src ="images/green_question3.png" width="100%" height="100%"></img>
</div>
<div class="question_four">
<img src ="images/green_question4.png" width="100%" height="100%"></img>
</div>

First, regroup your class with unique name and add id to your back and forward button (To apply clicks events). Example :
<input type="image" src="forward.gif" alt="Next" id="forwardQ">
<input type="image" src="back.gif" alt="Back" id="nextQ">
<div class="question">
<img src ="images/green_question1.png" width="100%" height="100%"></img>
</div>
<div class="question">
<img src ="images/green_question2.png" width="100%" height="100%"></img>
</div>
<div class="question">
<img src ="images/green_question3.png" width="100%" height="100%"></img>
</div>
<div class="question">
<img src ="images/green_question4.png" width="100%" height="100%"></img>
</div>
With JQuery:
var actual = 0; // select by default the first question
$(document).ready(function() {
var number_of_question = $('.question').length; // get number of questions
$('.question:gt(' + actual + ')').hide(); // Hide unselect question
$('#nextQ').click(function() {
if(actual < number_of_question - 1 ) {
changeQuestion(actual + 1); // display select question
}
});
$('#forwardQ').click(function() {
if(actual) {
changeQuestion(actual - 1); // display select question
}
});
});
function changeQuestion( newQuestion ) {
$('.question:eq(' + actual +')').hide(); // hide current question
$('.question:eq(' + newQuestion +')').show(); // show new question
actual = newQuestion; // memorize actual selection
}

You can achieve this by combining HTML, CSS and jQuery.
In the below example I am displaying only the div elements with class active and hiding the other divs. And adding the class active to appropriate divs when ever the user clicks on the Next or Previous button.
HTML Code
<input type="button" value="Next" id="next_qs">
<input type="button" value="Back" id="prev_qs">
<div class="question_one">
QS1
</div>
<div class="question_two">
QS2
</div>
<div class="question_three">
QS3
</div>
<div class="question_four">
QS4
</div>
CSS Code
div {
width: 300px; height: 200px; border: 1px solid #333; clear: both; display: none;
}
div.active {
display: block;
}
jQuery Code
$("div:first").addClass('active')
$("#next_qs").click(function() {
$("div.active").removeClass('active').next().addClass('active');
});
$("#prev_qs").click(function() {
$("div.active").removeClass('active').prev().addClass('active');
});
http://jsfiddle.net/27gwy14f/

HTML
<div id="container">
<input type="image" src="back.gif" alt="Back">
<input type="image" src="forward.gif" alt="Next">
<div class="question_one question active">
1
<img src ="images/green_question1.png" width="100%" height="100%"></img>
</div>
<div class="question_two question">
2
<img src ="images/green_question2.png" width="100%" height="100%"></img>
</div>
<div class="question_three question ">
3
<img src ="images/green_question3.png" width="100%" height="100%"></img>
</div>
<div class="question_four question">
4
<img src ="images/green_question4.png" width="100%" height="100%"></img>
</div>
</div>
Jquery
<script>
var $container = $("#container") // caches the jquery object
$container.find('input[alt="Next"]').on("click",function(){
var active = $container.find(".active")
if(active.next(".question").length === 0){
return false
}else{
active.removeClass("active")
active.next(".question").addClass("active")
}
})
$container.find('input[alt="Back"]').on("click",function(){
var active = $container.find(".active")
if(active.prev(".question").length === 0){
return false
}else{
active.removeClass("active")
active.prev(".question").addClass("active")
}
})
</script>
CSS
<style>
#container .question{
display:none
}
#container .active{
display:inline-block;
}
</style>
JS FIDDLE
http://jsfiddle.net/vrnxL9n8/
edit: added js fiddle link

Display more than one image at onmouseover event

I have the following code which displays an image onmouseover and sets back the default image active onmouseout.
<img src="image1.jpg" onmouseover="this.src='image2.jp'" onmouseout="this.src='image1.jpg'" />
I want to be able to display multiple images onmouseover event; each displaying after a set time. Can anyone help me out on this?

HTML
<div id="container">
<img id="initialIMG" src="http://icons.iconarchive.com/icons/jamespeng/construction/128/bonecrusher-icon.png" />
</div>
<img src="http://icons.iconarchive.com/icons/jamespeng/construction/128/bonecrusher-icon.png" onmouseover="this.src='http://icons.iconarchive.com/icons/jamespeng/construction/128/longhaul-icon.png'" onmouseout="this.src='http://icons.iconarchive.com/icons/jamespeng/construction/128/bonecrusher-icon.png'" />
JavaScript
$(document).ready(function(){
$("#container").mouseenter(function() {
var t = setTimeout(function(){
$("#initialIMG").hide();
$("#initialIMG").attr("src", "http://icons.iconarchive.com/icons/jamespeng/construction/128/longhaul-icon.png" )
$("#initialIMG").fadeIn(50);
$("#container").append( '<img id="addedIMG" src="http://icons.iconarchive.com/icons/jamespeng/construction/128/mixmaster-icon.png" style="display:none;"/>' );
$("#addedIMG").fadeIn(50);
},500);
});
$("#container").mouseleave(function() {
var t = setTimeout(function(){
$("#initialIMG").hide();
$("#initialIMG").attr("src", "http://icons.iconarchive.com/icons/jamespeng/construction/128/bonecrusher-icon.png" )
$("#initialIMG").fadeIn(50);
$("#addedIMG").remove();
},500);
});
});
FIDDLE

Try this:
function showImage() {
//Your code here
}
function hideImage() {
//Your code here
}
<img src="image1.jpg" onmouseover="showImage();" onmouseout="hideImage();" />

Is there any specific reason you don't want to use jQuery?
in css:
#my-pics .default{
display: inline;
}
in html:
<div id="my-pics">
<img src="image1.jpg" class="default" />
<img src="image2.jpg" style="display:none;" />
<img src="image3.jpg" style="display:none;" />
</div>
in js:
$("#my-pics").mouseenter(function(){
$(this).find(".default").hide();
$(this).find(":not(.default)").show();
}).mouseleave(function(){
$(this).find(".default").show();
$(this).find(":not(.default)").hide();
});
Of course you need to import jquery first. Haven't tested this myself, any errors?
CSS solution?
in html:
<div id="my-pics">
<img src="image1.jpg" class="default" />
<img src="image2.jpg"/>
<img src="image3.jpg"/>
</div>
in css:
#my-pics img{
display: none;
}
#my-pics img.default{
display: inline;
}
#my-pics:hover img{
display: inline;
}
#my-pics:hover img.default{
display: none;
}

A quick solution, maybe not the most beautiful one, but it works.
HTML:
<img id="image1" src="image1.jpg" onmouseover="showImages()" onmouseout="hideImages()" />
<img id="image2" src="image2.jpg" style="display:none;" />
<img id="image3" src="image3.jpg" style="display:none;" />
Javascript:
function showImages(){
document.getElementById('image2').style = '';
document.getElementById('image3').style = '';
}
function hideImages(){
document.getElementById('image2').style = 'display: none;';
document.getElementById('image3').style = 'display: none;';
}
Of course you should solve this with classes to clean up your code. This is just a basic example that works.

If you are using jQuery then when your document is ready:
<img class="main-image" data-target=".images-set1" src="mainImage1.jpg">
secondary images:
<div class="images-set1">
<img src="secondary1-1.jpg" style="display:none">
<img src="secondary1-2.jpg" style="display:none">
<img src="secondary1-2.jpg" style="display:none">
....
</div>
with jQuery:
$('main-image').on('mouseover', function (event) {
$($(event.target).attr('data-target') + ' img').show();
})
.on('mouseout', function (event) {
$($(event.target).attr('data-target') + ' img').hide();
});
this will just hide/show the secondary image element related to the main image,
tell me if this is not exactly the behaviour you want.

Adding Next and Prev Button for Thumbnails Gallery and Larger Image Gallery

I am trying to add the next and prev button for both thumbnail and larger image gallery. And that next and prev button should support the keyboard event listeners too.
This is the link which I have tried.
http://jsfiddle.net/L7yKp/36/
I need some help.

Here i have done complete solution for above issue for adding next and previous buttons.
Demo: http://codebins.com/bin/4ldqp7y
HTML
<div id="panel">
<div class="controls">
<img src="http://aux.iconpedia.net/uploads/1698581142461241089.png" class="prev" />
<span>
Thumbnail Navigation
</span>
<img src="http://cdn1.iconfinder.com/data/icons/fatcow/32x32_0760/resultset_next.png" class="next" />
</div>
<div id="thumbs">
<div class="thumb active">
<img src="http://images.replacements.com/images/images5/china/C/lenox_china_garden_birds_no_box_P0000014675S0122T2.jpg" width="100" height="80" />
</div>
<div class="thumb">
<img src="http://coolfunnyanimals.com/thumb/funny-animal-bird-47.jpg" width="100" height="80" />
</div>
<div class="thumb">
<img src="http://learnordie.files.wordpress.com/2012/05/thrasher.jpg" width="100" height="80" />
</div>
<div class="thumb">
<img src="http://3.bp.blogspot.com/_N_mOB63qPaE/TSC17ceXRII/AAAAAAAARaQ/TeDi9FYIBPw/s1600/Flying-Bird-Picture-2.jpg" width="100" height="80" />
</div>
<div class="thumb">
<img src="http://www.kevinhearne.com/wp-content/uploads/2011/11/pic6.jpg" width="100" height="80" />
</div>
</div>
<div class="controls" align="center" width="400px">
<img src="http://aux.iconpedia.net/uploads/1698581142461241089.png" class="prev" />
<span>
Large Image Navigation
</span>
<img src="http://cdn1.iconfinder.com/data/icons/fatcow/32x32_0760/resultset_next.png" class="next" />
</div>
<div id="large">
<div class="bigthumb active">
<img src="http://images.replacements.com/images/images5/china/C/lenox_china_garden_birds_no_box_P0000014675S0122T2.jpg" />
</div>
<div class="bigthumb">
<img src="http://coolfunnyanimals.com/thumb/funny-animal-bird-47.jpg" />
</div>
<div class="bigthumb">
<img src="http://learnordie.files.wordpress.com/2012/05/thrasher.jpg" />
</div>
<div class="bigthumb">
<img src="http://3.bp.blogspot.com/_N_mOB63qPaE/TSC17ceXRII/AAAAAAAARaQ/TeDi9FYIBPw/s1600/Flying-Bird-Picture-2.jpg" />
</div>
<div class="bigthumb">
<img src="http://www.kevinhearne.com/wp-content/uploads/2011/11/pic6.jpg" />
</div>
</div>
</div>
CSS:
#thumbs{
text-align:center;
background:#77a5c6;
padding:5px;
}
.thumb{
display:inline-block;
margin:0px;
padding:0px;
cursor:pointer;
}
#thumbs .active{
border:3px solid #333;
}
.controls{
margin-left:10px;
}
.controls img{
cursor:pointer;
margin:0px;
}
.controls span{
font-size:13px;
display:inline-block;
vertical-align:top;
margin-top:5px;
}
#large{
text-align:center;
}
#large .bigthumb{
display:none;
}
#large .active{
display:block;
}
#large .active img{
border:2px solid #333;
}
jQuery:
$(function() {
$("#thumbs").find(".thumb:first").addClass("active");
$("#large").find(".bigthumb:first").addClass("active");
var getIndex = $("#thumbs").find(".active").index();
$(".controls").each(function() {
$(this).find(".next").click(function() {
getIndex = $("#thumbs").find(".active").index();
getIndex += 1;
if (getIndex > ($("#thumbs").find(".thumb").length - 1)) {
getIndex = 0;
}
setActiveImage(getIndex);
});
$(this).find(".prev").click(function() {
getIndex -= 1;
if (getIndex < 0) {
getIndex = $("#thumbs").find(".thumb").length - 1;
}
setActiveImage(getIndex); //Set/Show Active Image
});
});
});
function setActiveImage(index) {
if (typeof(index) == "undefined" || index == "" || index == null) index = 0;
$("#thumbs").find(".thumb").removeClass("active");
$("#thumbs").find(".thumb:eq(" + index + ")").addClass("active");
$("#large").find(".bigthumb").removeClass("active");
$("#large").find(".bigthumb:eq(" + index + ")").addClass("active");
}
Demo: http://codebins.com/bin/4ldqp7y

See http://jsfiddle.net/L7yKp/37/
The problem is
$(['next','prev']).each(function(){
var that=this;
$('#'+that).click(function(){
$('#thumbs img.clicked')[that]().click();
});
});
because now you have
Next
Prev
and
Next
Prev
So the solution is;
$(['next','prev']).each(function(){
var that=this;
$('.'+that).click(function(){
$('#thumbs .clicked')[that]().click();
});
});
and
Next
Prev