We Keep Coding

jQuery/javascript - can't find a way to avoid code adding a class

I'm currently modifying the FlexNav Plugin. Instead of hovering to open the sub-menus, I changed it to open by click.
The problem now is that it takes two clicks to open a submenu.
I understand the problem is the fact that the code adds the class "flexnav-show" to the submenu ul when the menu is opened intitially. A click on the submenu trigger then removes this class, which causes nothing, and a second click add it again opening the submenu.
If anyone can point me to the right place in the code where i can avoid adding the class on all ul's. Or, if someone has a better idea...
$.fn.flexNav = function(options) {
var $nav, $top_nav_items, breakpoint, count, nav_percent, nav_width, resetMenu, resizer, settings, showMenu, toggle_selector, touch_selector;
settings = $.extend({
'animationSpeed': 250,
'transitionOpacity': true,
'buttonSelector': '.menu-button',
'hoverIntent': false,
'hoverIntentTimeout': 150,
'calcItemWidths': false,
'hover': false
}, options);
$nav = $(this);
$nav.addClass('with-js');
if (settings.transitionOpacity === true) {
$nav.addClass('opacity');
}
$nav.find("li").each(function() {
if ($(this).has("ul").length) {
return $(this).addClass("item-with-ul").find("ul").hide();
}
});
if (settings.calcItemWidths === true) {
$top_nav_items = $nav.find('>li');
count = $top_nav_items.length;
nav_width = 100 / count;
nav_percent = nav_width + "%";
}
if ($nav.data('breakpoint')) {
breakpoint = $nav.data('breakpoint');
}
showMenu = function() {
if ($nav.hasClass('lg-screen') === true && settings.hover === true) {
if (settings.transitionOpacity === true) {
return $(this).find('>ul').addClass('flexnav-show').stop(true, true).animate({
height: ["toggle", "swing"],
opacity: "toggle"
}, settings.animationSpeed);
} else {
return $(this).find('>ul').addClass('flexnav-show').stop(true, true).animate({
height: ["toggle", "swing"]
}, settings.animationSpeed);
}
}
};
resetMenu = function() {
if ($nav.hasClass('lg-screen') === true && $(this).find('>ul').hasClass('flexnav-show') === true && settings.hover === true) {
if (settings.transitionOpacity === true) {
return $(this).find('>ul').removeClass('flexnav-show').stop(true, true).animate({
height: ["toggle", "swing"],
opacity: "toggle"
}, settings.animationSpeed);
} else {
return $(this).find('>ul').removeClass('flexnav-show').stop(true, true).animate({
height: ["toggle", "swing"]
}, settings.animationSpeed);
}
}
};
resizer = function() {
var selector;
if ($(window).width() <= breakpoint) {
$nav.removeClass("lg-screen").addClass("sm-screen");
if (settings.calcItemWidths === true) {
$top_nav_items.css('width', '100%');
}
selector = settings['buttonSelector'] + ', ' + settings['buttonSelector'] + ' .touch-button';
$(selector).removeClass('active');
return $('.one-page li a').on('click', function() {
return $nav.removeClass('flexnav-show');
});
} else if ($(window).width() > breakpoint) {
$nav.removeClass("sm-screen").addClass("lg-screen");
if (settings.calcItemWidths === true) {
$top_nav_items.css('width', nav_percent);
}
$nav.removeClass('flexnav-show').find('.item-with-ul').on();
$('.item-with-ul').find('ul').removeClass('flexnav-show');
resetMenu();
if (settings.hoverIntent === true) {
return $('.item-with-ul').hoverIntent({
over: showMenu,
out: resetMenu,
timeout: settings.hoverIntentTimeout
});
} else if (settings.hoverIntent === false) {
return $('.item-with-ul').on('mouseenter', showMenu).on('mouseleave', resetMenu);
}
}
};
$(settings['buttonSelector']).data('navEl', $nav);
touch_selector = '.item-with-ul, ' + settings['buttonSelector'];
$(touch_selector).append('<span class="touch-button"><i class="navicon">▼</i></span>');
toggle_selector = settings['buttonSelector'] + ', ' + settings['buttonSelector'] + ' .touch-button';
$(toggle_selector).on('click', function(e) {
var $btnParent, $thisNav, bs;
$(toggle_selector).toggleClass('active');
e.preventDefault();
e.stopPropagation();
bs = settings['buttonSelector'];
$btnParent = $(this).is(bs) ? $(this) : $(this).parent(bs);
$thisNav = $btnParent.data('navEl');
return $thisNav.toggleClass('flexnav-show');
});
$('.touch-button').on('click', function(e) {
var $sub, $touchButton;
$sub = $(this).parent('.item-with-ul').find('>ul');
$touchButton = $(this).parent('.item-with-ul').find('>span.touch-button');
if ($nav.hasClass('lg-screen') === true) {
$(this).parent('.item-with-ul').siblings().find('ul.flexnav-show').removeClass('flexnav-show').hide();
}
if ($sub.hasClass('flexnav-show') === true) {
$sub.removeClass('flexnav-show').slideUp(settings.animationSpeed);
return $touchButton.removeClass('active');
} else if ($sub.hasClass('flexnav-show') === false) {
$sub.addClass('flexnav-show').slideDown(settings.animationSpeed);
return $touchButton.addClass('active');
}
});
$nav.find('.item-with-ul *').focus(function() {
$(this).parent('.item-with-ul').parent().find(".open").not(this).removeClass("open").hide();
return $(this).parent('.item-with-ul').find('>ul').addClass("open").show();
});
resizer();
return $(window).on('resize', resizer);
};

The code adds the class 'flexnav-show' in line 34 to all child 'ul' nodes.
The code is in action when the function showMenu is called.

JS Thumb scroller

I have a thumb scroller on my site and the problem is, when thumbs reach end scroller leaves blank spaces before it goes back to beginning... Can anyone help how to achive this... Thank you in advance!
This is the url: http://marinmartinovic.com/MK_test/
It could take a little bit to load. Still need to optimize images...
This is js:
$(document).ready(function(event) {
/*
*
* SORTING INDEX NUMBERS
*
*/
function sortIndexNumbers(){
loadPhotoIndex = 0;
indexNumbers = [];
for(var i = 0; i<photosLength;i++){
indexNumbers.push(i);
}
if(photoIndex === 0){
indexNumbersToAdd = indexNumbers.splice(photosLength-1, 1);
indexNumbers = indexNumbersToAdd.concat(indexNumbers);
}
if(photoIndex > 1){
indexNumbersToAdd = indexNumbers.splice(0, photoIndex -1);
indexNumbers = indexNumbers.concat(indexNumbersToAdd);
}
loadPhoto();
}
/*
*
* LOAD THUMBS
*
*/
var aThumbsWidth = [];
var speedThumb = 750;
var thumbIndex = 0;
var thumbSwiped = 0;
var thumbsWidth = 0;
function loadThumb(){
$('<img src="'+ aThumbs[thumbIndex] +'">').one('load', function() {
$(".thumb-content ul").append('<li><div class="thumb" id="thumb" data-index=' + thumbIndex + '><img src="'+ aThumbs[thumbIndex] +'"></div></li>');
//setTimeout(function() {
aThumbsWidth.push($('.thumb-content .thumb img').get(thumbIndex).width);
thumbsWidth+= $('.thumb-content .thumb img').get(thumbIndex).width + thumbSpacing;
thumbIndex++;
if(thumbIndex < aThumbs.length){
loadThumb();
}
// all 3 loaded
if(thumbIndex === aThumbs.length){
highlightThumb();
// find thumb and get its position
console.log(photoIndex);
var thumbPosition = $('.thumb-content').find("[data-index='" + photoIndex + "']").position().left;
selectThumb(thumbPosition);
}
//}, 50);
}).each(function() {
//if(this.complete) $(this).load();
});
}
/*
*
* SWIPE THUMB SLIDER
*
*/
var currentThumb = 0;
var currentThumbShift = 0;
$(".thumb-content").swipe( {
tap:function(event, target) {
if(!loadingInProgress){
photoIndex = parseFloat(target.getAttribute('data-index'));
selectPhoto();
highlightThumb();
}
},
triggerOnTouchEnd: false,
swipeStatus: swipeThumbStatus,
allowPageScroll: "vertical",
threshold: 200
});
function swipeThumbStatus(event, phase, direction, distance, fingers)
{
thumbSwiped = distance;
/*if( phase === "move" && (direction === "left" || direction === "right") )
{
var duration = 0;
if (direction === "left"){
scrollThumbs(currentThumbShift + distance, duration);
}
else if (direction === "right"){
scrollThumbs(currentThumbShift - distance, duration);
}
}
else if ( phase === "cancel")
{
scrollThumbs(currentThumbShift, duration);
}*/
if ( phase === "end" ){
if (direction === "right"){
if(!loadingInProgress){
prevPhoto();
setThreePhotos(prevPhoto, 1500, 1);
}
}
else if (direction === "left"){
if(!loadingInProgress){
nextPhoto();
setThreePhotos(nextPhoto, 1500, 1);
}
}
}
}
function selectThumb(distance){
currentThumb = currentThumb + photoIndex;
TweenLite.to($(".thumb-content"), 0.75, {left: -distance, ease:Power4.easeOut, force3D:true});
}
$('body').on('click', '.thumb', function(e) {
if(!loadingInProgress){
photoIndex = parseFloat($(this).attr('data-index'));
selectPhoto();
highlightThumb();
selectThumb($(this).position().left);
}
});
function highlightThumb(){
$('.thumb').css('opacity', '1');
$('.thumb-content').find("[data-index='" + photoIndex + "']").css('opacity', '0.5');
}
/*
*
* NEXT PREVIOUS THUMB
*
*/
var arrow = false;
var nextThree ;
var intervalBuffer;
$('#next-thumb').click(function(event) {
if(!loadingInProgress){
photoIndex += 2;
if((photoIndex+1) >= aPhotos.length){
photoIndex = 0;
}
selectPhoto();
highlightThumb();
// find thumb and get its position
var thumbPosition = $('.thumb-content').find("[data-index='" + photoIndex + "']").position().left;
selectThumb(thumbPosition);
}
});
$('#prev-thumb').click(function(event) {
if(!loadingInProgress){
photoIndex -= 2;
if((photoIndex+1) < 0){
photoIndex = aPhotos.length-1;
}
selectPhoto();
highlightThumb();
// find thumb and get its position
var thumbPosition = $('.thumb-content').find("[data-index='" + photoIndex + "']").position().left;
selectThumb(thumbPosition);
}
});
function setThreePhotos(callback, delay, repetitions) {
clearInterval(threePhotos);
var x = 0;
var threePhotos = setInterval(function () {
callback();
if (++x === repetitions) {
clearInterval(threePhotos);
}
}, delay);
}

Navigating long un-ordered list

I have this long list with overflow: auto to scroll through it, i set it up for keyboard navigation, the problem is that when using the keyboard it doesn't scroll correctly!
check this jsFiddle
$('ul').keydown(function (e) {
if (e.keyCode == 38) { // up
var selected = $(".selected");
$listItems.removeClass("selected");
if (selected.prev().length == 0) {
selected.siblings().last().addClass("selected");
} else {
selected.prev().addClass("selected");
}
}
if (e.keyCode == 40) { // down
var selected = $(".selected");
$listItems.removeClass("selected");
if (selected.next().length == 0) {
selected.siblings().first().addClass("selected");
} else {
selected.next().addClass("selected");
}
}
})
});
$listItems.click(function () {
if ($(this).is('.selected')) {
return true;
} else {
$('li').removeClass('selected');
$(this).addClass('selected');
}
the behavior i'm looking for is the same behavior of the element when scrolling through a long list of elements using the keyboard this plugin SelectBoxIt show's what i'm looking for.

you can use this code instead, i used animate function to navigate inside the div if the list exceed the width of the ul tag :
http://jsfiddle.net/goldendousa/p6243/13/
$('ul').focus(function() {
if ($('ul li').is('.selected')) {
$('ul li').first().removeClass('selected');
} else {
$('ul li').first().addClass('selected');
}
});
$('ul').keydown(function(e) {
if (e.keyCode == 38) { // up
e.preventDefault();
var selected = $(".selected");
$("ul li").removeClass("selected");
if (selected.prev().length == 0) {
selected.siblings().last().addClass("selected");
var selectedTopOffset = selected.siblings().last().offset().top;
$('div').animate({
scrollTop: selectedTopOffset
}, 200);
} else {
selected.prev().addClass("selected");
var selectedTopOffset = $("div").scrollTop() + selected.position().top - $("div").height()/2 + selected.height()/2;
$('div').animate({
scrollTop: selectedTopOffset
}, 200);
}
}
if (e.keyCode == 40) { // down
e.preventDefault();
var selected = $(".selected");
$("ul li").removeClass("selected");
if (selected.next().length == 0) {
selected.siblings().first().addClass("selected");
if (selected.siblings().first().offset().top < 0) {
$('div').animate({
scrollTop: selected.siblings().first().offset().top
}, 200);
}
} else {
selected.next().addClass("selected");
var selectedTopOffset = $("div").scrollTop() + selected.position().top - $("div").height()/2 + selected.height()/2;
$('div').animate({
scrollTop: selectedTopOffset
}, 200);
}
}
});
$('li').click(function() {
if ($(this).is('.selected')) {
return true;
} else {
$('li').removeClass('selected');
$(this).addClass('selected');
}
});

Shift an array and rendering it in a html list

Using the following script I am not able to swift and set the focus for an array back in the list when clicking PREV.
It should work as this example:
http://jsfiddle.net/QAsQj/2/
my code here
http://jsfiddle.net/Eq4js/
Could you point me out what am I doing wrong here, I would appreciate a sample of code on
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
.focus { color: red; }
</style>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.6.1.min.js"></script>
<script>
$(document).ready(function() {
var snippet = {
index: 0,
indexNew: 0,
start: 0,
$el: 'div.snippet-categories',
config: {
itemsVisible: 4
},
data: {
items: {
models: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
}
},
navigate: function(direction) {
if (direction === 'right') {
if (this.index < this.config.itemsVisible - 1) {
if (this.index < this.config.itemsVisible - 1) {
this.index++;
var result = '#' + this.index + '';
$('li.focus').removeClass('focus');
$(result).addClass('focus');
} else {
this.start++;
}
} else {
if (this.start < this.data.items.models.length - this.config.itemsVisible) {
this.start++;
this.renderItems();
var result = '#' + (this.config.itemsVisible - 1 + this.start) + '';
$('li.focus').removeClass('focus');
$(result).addClass('focus');
}
}
}
else if (direction === 'left') {
if (this.index > this.config.itemsVisible - 1) {
if (this.index > this.config.itemsVisible - 1) {
this.index--;
(Focus.to(this.getFocusable(-1, true)));
} else {
this.start++;
}
} else {
if (this.start > this.data.items.models.length - this.config.itemsVisible) {
this.index--;
this.renderItems();
} else {
}
}
}
},
render: function() {
this.renderItems();
},
renderItems: function(reverse) {
var reverse = reverse || false;
var html = '', result = '', subset = null;
var range = this.data.items.models;
var limit = range.length - this.config.itemsVisible;
if (this.indexNew !== null) {
if (reverse === false) {
} else {
}
subset = range.slice(this.start, this.start + this.config.itemsVisible);
var i = 0;
while (i < subset.length) {
var x = subset[i];
result += '<li id="' + this.data.items.models[x] + '" data-idx="' + this.data.items.models[x] + '" class="focusable">' + this.data.items.models[x] + '</li>';
i++;
}
html = result + '</ul>';
var el = $(this.$el);
el.empty();
el.append(html);
} else {
console.log('limit STOP');
}
},
};
snippet.render();
$('#next').click(function() {
snippet.navigate("right");
});
$('#prev').click(function() {
snippet.navigate("left");
});
});
</script>
</head>
<body>
<div class="snippet-categories"></div>
<div id="prev">prev</div>
<div id="next">next</div>
</body>
</html>
This question is related to
Are you able to solve it? JavaScript carousel implementation using an array

Finally I solved it
Algo example here
http://jsfiddle.net/QwATR/
Snippet_Categories = (function(Snippet) {
var Snippet_Categories = function() {
this.config = {
curPos: 0, // index for selected element
itemVisible: 4, // number of items visible
minIndex: 0, // define visible area start
maxIndex: 4 - 1, // define visible area end = "itemVisible -1"
outItems: 0 // number of element out of visible area
};
this.data = {
items: arguments[1].items
};
this.construct.apply(this, arguments);
};
$.extend(true, Snippet_Categories.prototype, Snippet.prototype, {
init: function() {
this.index = 0; // set default index
this.indexNew = 0; // set next index
this.start = 0;
this.render();
},
create: function() {
return this.parent.$el.find('.snippet-categories');
},
removeFocus: function() {
var test = $('li.focus');
Focus.blur(test);
//$('li.focus').removeClass('focus');
},
focus: function() {
//$('ul > li:eq(' + this.config.curPos + ')').addClass('focus');
var test = $('ul > li:eq(' + this.config.curPos + ')');
return Focus.to(test, true);
},
render: function() {
//debugger
this.renderItems();
this.focus();
},
renderItems: function() {
var html = '<ul>';
for (var i = 0; i < this.config.itemVisible; i++) {
html += '<li data-idx="' + this.data.items.at(i + this.config.outItems).get('id') + '" class="">' + this.data.items.at(i + this.config.outItems).get('label') + '</li>';
}
html += '</ul>';
$('.snippet-categories').empty();
$('.snippet-categories').html(html);
},
navigate: function(direction) {
if (direction === 'right') {
if (this.config.curPos < this.config.maxIndex)
{
this.removeFocus();
if (this.config.curPos < this.config.maxIndex)
this.config.curPos++;
else
{
this.config.outItems++;
}
} else {
if (this.config.outItems < this.data.items.length - this.config.itemVisible)
this.config.outItems++;
}
this.renderItems();
this.focus();
}
else if (direction === 'left') {
if (this.config.curPos > this.config.minIndex)
{
this.removeFocus();
if (this.config.curPos > this.config.minIndex)
this.config.curPos--;
else
{
this.config.clicks--;
}
} else {
if (this.config.outItems > 0)
this.config.outItems--;
}
this.renderItems();
this.focus();
}
},
onFocus: function() {
//this.index = parseInt(Focus.focused[0].dataset.idx, 10);
console.log('element in focus ' + this.index);
}
});
return Snippet_Categories;
})(Snippet);

jQuery: How can I put two of these elements on the same page?

I am using the following script, but if I put more than 1 occurrence on the same page, it breaks. I am trying to get it to where I can put multiple carousels on the same page.
HTML:
<div class="carousel_outer">
<div class="portfolio-carousel horizontal">
<div class="carousel" id="carousel1">
<div class="carousel_container carousel1">
<ul class="portfolio-wrap carousel1">
<li><a class="gall_thumb" href="#" title="First Pic"><img src="#" alt="First Pic" /></a></li>
<li><a class="gall_thumb" href="#" title="Second Pic"><img src="#" alt="Second Pic" /></a></li>
</ul>
</div>
<a class="carousel_prev" href="#">Previous</a>
<a class="carousel_next" href="#">Next</a>
</div>
</div>
</div>
Javascript on the page:
$('.carousel').mycarousel({
delay: 150,
fade:300,
slide: 700,
effect:'slide',
orientation:'horizontal',
loop: false,
autoplay: false
});
And the actual carousel javascript:
(function ($) {
$.fn.extend({
mycarousel: function (options) {
var defaults = {
delay: 150,
fade: 300,
slide: 500,
effect: "fade",
orientation: "horizontal",
captionFade: 150,
loop: false,
autoplay: true,
time: 3000
};
var options = $.extend(defaults, options);
return this.each(function () {
var o = options;
var carousel = this;
$carousel_container = $(carousel).find(".carousel_container");
$li = $(carousel).find(".carousel_container ul li");
var visible_width = parseInt($carousel_container.css("width"), 10);
var visible_height = parseInt($carousel_container.css("height"), 10);
var number_items = $li.size();
var item_width = parseInt($li.css("width"), 10);
var item_height = parseInt($li.css("height"), 10);
var item_marginRight = parseInt($li.css("marginRight"), 10);
var item_marginLeft = parseInt($li.css("marginLeft"), 10);
var item_marginTop = parseInt($li.css("marginTop"), 10);
var item_marginBottom = parseInt($li.css("marginBottom"), 10);
if (o.orientation == "horizontal") {
var visible_items = Math.ceil(visible_width / (item_width + item_marginRight + item_marginLeft));
} else {
var visible_items = Math.ceil(visible_height / (item_height + item_marginTop + item_marginBottom));
}
var slides = Math.ceil(number_items / visible_items);
$float_easing = "easeInOutQuart";
function set_item_classes_visibility() {
$li.each(function (index) {
var class_number = Math.floor((index + visible_items) / visible_items);
$(this).addClass("visible_" + class_number);
if (class_number == "1") {
$(this).css("display", "block");
$(this).find(".inner").css("display", "block");
} else {
$(this).css("display", "none");
$(this).find(".inner").css("display", "none");
}
});
}
set_item_classes_visibility();
function set_next_prev_classes() {
var visible_item_class = $(carousel).find(".carousel_container ul li:visible").attr("class");
var visible_id = visible_item_class.split("_");
if (!o.loop) {
if (visible_id[1] == "1") {
$(".carousel_prev").addClass("disable");
} else {
$(".carousel_prev").removeClass("disable");
}
if (visible_id[1] == slides) {
$(".carousel_next").addClass("disable");
} else {
$(".carousel_next").removeClass("disable");
}
}
}
set_next_prev_classes();
function set_item_position() {
$li.each(function () {
$(this).css("display", "none");
$(this).css("position", "absolute");
if (o.orientation == "horizontal") {
$(this).css("top", "0");
$(this).css("left", visible_width + parseInt($carousel_container.css("paddingLeft")) + parseInt($carousel_container.css("paddingRight")), 10);
} else {
if (o.orientation == "vertical") {
$(this).css("left", "0");
$(this).css("top", visible_height + parseInt($carousel_container.css("paddingTop")) + parseInt($carousel_container.css("paddingBottom")), 10);
}
}
});
$carousel_container.find("li.visible_1").each(function (index) {
$(this).css("display", "block");
if (o.orientation == "horizontal") {
var left_position = (index * (item_width + item_marginRight + item_marginLeft)) + parseInt($carousel_container.css("paddingLeft"), 10);
$(this).css("left", left_position);
} else {
if (o.orientation == "vertical") {
var top_position = (index * (item_height + item_marginTop + item_marginBottom)) + parseInt($carousel_container.css("paddingTop"), 10);
$(this).css("top", top_position);
}
}
});
}
if (o.effect == "slide") {
set_item_position();
}
function show_next_prev(method) {
function show_items_fade(id) {
var next_class_name = "visible_" + id;
$carousel_container.find("li." + next_class_name).css("display", "block");
$carousel_container.find("li." + next_class_name).each(function (index) {
var delay = (index) * o.delay;
if (method == "prev") {
var delay = ((visible_items - 1) - index) * o.delay;
}
var index_item = (index + 1);
$(this).find(".inner").delay(delay).fadeIn(o.fade, function () {
if (index_item == visible_items || id == slides) {
set_next_prev_classes();
}
});
});
}
function show_items_slide(id) {
var next_class_name = "visible_" + id;
$carousel_container.find("li." + next_class_name + " .inner").css("display", "block");
$carousel_container.find("li." + next_class_name).each(function (index) {
$(this).css("display", "block");
var delay = (index) * o.delay;
if (method == "prev") {
var delay = ((visible_items - 1) - index) * o.delay;
}
var index_item = (index + 1);
if (o.orientation == "horizontal") {
var left_position = (index * (item_width + item_marginRight + item_marginLeft)) + parseInt($carousel_container.css("paddingLeft"), 10);
$(this).delay(delay).animate({
left: left_position
}, o.slide, $float_easing, function () {
if (index_item == visible_items || id == slides) {
set_next_prev_classes();
}
});
} else {
if (o.orientation == "vertical") {
var top_position = (index * (item_height + item_marginTop + item_marginBottom)) + parseInt($carousel_container.css("paddingTop"), 10);
$(this).delay(delay).animate({
top: top_position
}, o.slide, $float_easing, function () {
if (index_item == visible_items || id == slides) {
set_next_prev_classes();
}
});
}
}
});
}
var visible_item_class = $carousel_container.find("li:visible").attr("class");
visible_id = visible_item_class.split("_");
var next_id = parseInt(visible_id[1], 10) + 1;
var prev_id = parseInt(visible_id[1], 10) - 1;
if (visible_id[1] == 1) {
prev_id = slides;
}
if (visible_id[1] == slides) {
next_id = 1;
}
switch (o.effect) {
case "fade":
$carousel_container.find("li:visible").each(function (index) {
var delay = (index) * o.delay;
var index_item = (index + 1);
var last_item = $carousel_container.find("li." + visible_item_class).size();
if (method == "prev") {
delay = ((visible_items - 1) - index) * o.delay;
last_item = 1;
}
$(this).find(".inner").delay(delay).fadeOut(o.fade, function () {
if (index_item == last_item) {
$("li." + visible_item_class).css("display", "none");
if (method == "next") {
show_items_fade(next_id);
} else {
if (method == "prev") {
show_items_fade(prev_id);
}
}
}
});
});
break;
case "slide":
$carousel_container.find("li.visible_" + prev_id).each(function (index) {
if (o.orientation == "horizontal") {
if (method == "next") {
var left_position = visible_width + parseInt($carousel_container.css("paddingLeft"), 10) + parseInt($carousel_container.css("paddingRight"), 10);
} else {
if (method == "prev") {
var left_position = "-" + item_width + "px";
}
}
$(this).css("left", left_position);
} else {
if (o.orientation == "vertical") {
if (method == "next") {
var top_position = visible_height + parseInt($carousel_container.css("paddingTop"), 10) + parseInt($carousel_container.css("paddingBottom"), 10);
} else {
if (method == "prev") {
var top_position = "-" + item_height + "px";
}
}
$(this).css("top", top_position);
}
}
});
$carousel_container.find("li." + visible_item_class).each(function (index) {
var delay = (index) * o.delay;
var zindex = index + 10;
var index_item = (index + 1);
var last_item = $carousel_container.find("li." + visible_item_class).size();
if (method == "prev") {
delay = ((visible_items - 1) - index) * o.delay;
zindex = ((visible_items - 1) - index) + 10;
last_item = 1;
}
$(this).css("z-index", zindex);
if (o.orientation == "horizontal") {
if (method == "next") {
var left_position = "-" + item_width;
} else {
if (method == "prev") {
var left_position = visible_width + parseInt($carousel_container.css("paddingLeft"), 10) + parseInt($carousel_container.css("paddingRight"), 10);
}
}
$(this).delay(delay).animate({
left: left_position
}, o.slide, $float_easing, function () {
if (index_item == last_item) {
$("li." + visible_item_class).css("display", "none");
if (method == "next") {
show_items_slide(next_id);
} else {
if (method == "prev") {
show_items_slide(prev_id);
}
}
}
});
} else {
if (o.orientation == "vertical") {
if (method == "next") {
var top_position = "-" + item_height;
} else {
if (method == "prev") {
var top_position = visible_height + parseInt($carousel_container.css("paddingTop"), 10) + parseInt($carousel_container.css("paddingBottom"), 10);
}
}
$(this).delay(delay).animate({
top: top_position
}, o.slide, $float_easing, function () {
if (index_item == last_item) {
$("li." + visible_item_class).css("display", "none");
if (method == "next") {
show_items_slide(next_id);
} else {
if (method == "prev") {
show_items_slide(prev_id);
}
}
}
});
}
}
});
break;
}
}
if (o.autoplay) {
var interval = setInterval(function () {
var visible_item_class = $(carousel).find(".carousel_container ul li:visible").attr("class");
var visible_id = visible_item_class.split("_");
if (!o.loop) {
if (visible_id[1] == slides) {
clearInterval(interval);
} else {
show_next_prev("next");
}
} else {
show_next_prev("next");
}
}, o.time);
}
$(carousel).find(".carousel_next").click(function () {
clearInterval(interval);
show_next_prev("next");
return (false);
});
$(carousel).find(".carousel_prev").click(function () {
clearInterval(interval);
show_next_prev("prev");
return (false);
});
$li.hover(function () {
clearInterval(interval);
$(this).find(".caption").fadeIn(o.captionFade);
}, function () {
$(this).find(".caption").fadeOut(o.captionFade);
});
});
}
});
})(jQuery);
I'm thinking if there is some way I can identify each carousel with an ID and the script only executes things within each ID it would work, but I can't figure out how to get it done.
EDIT: I am getting the following js console error when I click a next/prev button: visible_item_class is undefined

Give them each an unique ID and call them by that.
$('#carousel1').mycarousel({
theid: $(this).attr('id'),
delay: 150,
fade:300,
slide: 700,
effect:'slide',
orientation:'horizontal',
loop: false,
autoplay: false
});
$('#carousel2').mycarousel({
theid: $(this).attr('id'),
delay: 150,
fade:300,
slide: 700,
effect:'slide',
orientation:'horizontal',
loop: false,
autoplay: false
});
On a side note is the following line necessary:
theid: $(this).attr('id')
I don't see it used anywhere in the carousel code.

Based on the function set_next_prev_classes in the plugin, the problem is probably that your 'next' and 'previous' buttons share a common class. (The plugin shouldn't do things this way, but there it is anyway.)
The solution should be as simple as giving each carousel DISTINCT class names for their 'next' and 'previous' buttons -- this can be as simple as appending the numbers 1 and 2 to each. (And then tell the plugin author that this approach is causing problems.)

Two ways to fix the problem.
Change the carousel code to take id of the div used as carousel , and carousel controls.
Copy the carousel code two times.Replace ".carousel" with "#Id1" in first and "#Id2" in second.Then the controls will be "#Id1_next", "#Id1_prev".
This is kind of hacky but cant help it.