I am working with content carousel slider.
I am having a js file for the same and I just need to call function from my html file.
Everything runs fine till now. But now I want to use the same slider twice in my page so to avoid conflicts between similar class names which are used by js file to give me a sliding effect,I want to make it specific to the id I would like to pass in a function..Based on that id,I would like to filter out the divs to be affected by js file.
I tried finding how to get id of jQuery window object, I am getting in js file...but no success..
The code is like:
HTML:
<script type="text/javascript">
$('#ca-container').contentcarousel();// i call function from here
</script>
JS
(function($) {
alert(this.get(0).attr("id")); // gives nothing
alert($(this).attr("id")); // gives undefined - I got this: logically its a jquery window object so that was obvious...
var aux = {
// navigates left / right
navigate : function( dir, $el, $wrapper, opts, cache ) {
var scroll = opts.scroll,
factor = 1,
idxClicked = 0;
if( cache.expanded ) {
scroll = 1; // scroll is always 1 in full mode
factor = 3; // the width of the expanded item will be 3 times bigger than 1 collapsed item
idxClicked = cache.idxClicked; // the index of the clicked item
}
// clone the elements on the right / left and append / prepend them according to dir and scroll
if( dir === 1 ) {
$wrapper.find('div.ca-item:lt(' + scroll + ')').each(function(i) {
$(this).clone(true).css( 'left', ( cache.totalItems - idxClicked + i ) * cache.itemW * factor + 'px' ).appendTo( $wrapper );
});
}
else {
var $first = $wrapper.children().eq(0);
$wrapper.find('div.ca-item:gt(' + ( cache.totalItems - 1 - scroll ) + ')').each(function(i) {
// insert before $first so they stay in the right order
$(this).clone(true).css( 'left', - ( scroll - i + idxClicked ) * cache.itemW * factor + 'px' ).insertBefore( $first );
});
}
// animate the left of each item
// the calculations are dependent on dir and on the cache.expanded value
$wrapper.find('div.ca-item').each(function(i) {
var $item = $(this);
$item.stop().animate({
left : ( dir === 1 ) ? '-=' + ( cache.itemW * factor * scroll ) + 'px' : '+=' + ( cache.itemW * factor * scroll ) + 'px'
}, opts.sliderSpeed, opts.sliderEasing, function() {
if( ( dir === 1 && $item.position().left < - idxClicked * cache.itemW * factor ) || ( dir === -1 && $item.position().left > ( ( cache.totalItems - 1 - idxClicked ) * cache.itemW * factor ) ) ) {
// remove the item that was cloned
$item.remove();
}
cache.isAnimating = false;
});
});
},
// opens an item (animation) -> opens all the others
openItem : function( $wrapper, $item, opts, cache ) {
cache.idxClicked = $item.index();
// the item's position (1, 2, or 3) on the viewport (the visible items)
cache.winpos = aux.getWinPos( $item.position().left, cache );
$wrapper.find('div.ca-item').not( $item ).hide();
$item.find('div.ca-content-wrapper').css( 'left', cache.itemW + 'px' ).stop().animate({
width : cache.itemW * 2 + 'px',
left : cache.itemW + 'px'
}, opts.itemSpeed, opts.itemEasing)
.end()
.stop()
.animate({
left : '0px'
}, opts.itemSpeed, opts.itemEasing, function() {
cache.isAnimating = false;
cache.expanded = true;
aux.openItems( $wrapper, $item, opts, cache );
});
},
// opens all the items
openItems : function( $wrapper, $openedItem, opts, cache ) {
var openedIdx = $openedItem.index();
$wrapper.find('div.ca-item').each(function(i) {
var $item = $(this),
idx = $item.index();
if( idx !== openedIdx ) {
$item.css( 'left', - ( openedIdx - idx ) * ( cache.itemW * 3 ) + 'px' ).show().find('div.ca-content-wrapper').css({
left : cache.itemW + 'px',
width : cache.itemW * 2 + 'px'
});
// hide more link
aux.toggleMore( $item, false );
}
});
},
// show / hide the item's more button
toggleMore : function( $item, show ) {
( show ) ? $item.find('a.ca-more').show() : $item.find('a.ca-more').hide();
},
// close all the items
// the current one is animated
closeItems : function( $wrapper, $openedItem, opts, cache ) {
var openedIdx = $openedItem.index();
$openedItem.find('div.ca-content-wrapper').stop().animate({
width : '0px'
}, opts.itemSpeed, opts.itemEasing)
.end()
.stop()
.animate({
left : cache.itemW * ( cache.winpos - 1 ) + 'px'
}, opts.itemSpeed, opts.itemEasing, function() {
cache.isAnimating = false;
cache.expanded = false;
});
// show more link
aux.toggleMore( $openedItem, true );
$wrapper.find('div.ca-item').each(function(i) {
var $item = $(this),
idx = $item.index();
if( idx !== openedIdx ) {
$item.find('div.ca-content-wrapper').css({
width : '0px'
})
.end()
.css( 'left', ( ( cache.winpos - 1 ) - ( openedIdx - idx ) ) * cache.itemW + 'px' )
.show();
// show more link
aux.toggleMore( $item, true );
}
});
},
// gets the item's position (1, 2, or 3) on the viewport (the visible items)
// val is the left of the item
getWinPos : function( val, cache ) {
switch( val ) {
case 0 : return 1; break;
case cache.itemW : return 2; break;
case cache.itemW * 2 : return 3; break;
}
}
},
methods = {
init : function( options ) {
if( this.length ) {
var settings = {
sliderSpeed : 500, // speed for the sliding animation
sliderEasing : 'easeOutExpo',// easing for the sliding animation
itemSpeed : 500, // speed for the item animation (open / close)
itemEasing : 'easeOutExpo',// easing for the item animation (open / close)
scroll : 1 // number of items to scroll at a time
};
return this.each(function() {
// if options exist, lets merge them with our default settings
if ( options ) {
$.extend( settings, options );
}
var $el = $(this),
$wrapper = $el.find('div.ca-wrapper'),
$items = $wrapper.children('div.ca-item'),
cache = {};
// save the with of one item
cache.itemW = $items.width();
// save the number of total items
cache.totalItems = $items.length;
// add navigation buttons
if( cache.totalItems > 3 )
$el.prepend('<div class="ca-nav"><span class="ca-nav-prev">Previous</span><span class="ca-nav-next">Next</span></div>')
// control the scroll value
if( settings.scroll < 1 )
settings.scroll = 1;
else if( settings.scroll > 3 )
settings.scroll = 3;
var $navPrev = $el.find('span.ca-nav-prev'),
$navNext = $el.find('span.ca-nav-next');
// hide the items except the first 3
$wrapper.css( 'overflow', 'hidden' );
// the items will have position absolute
// calculate the left of each item
$items.each(function(i) {
$(this).css({
position : 'absolute',
left : i * cache.itemW + 'px'
});
});
// click to open the item(s)
$el.find('a.ca-more').live('click.contentcarousel', function( event ) {
if( cache.isAnimating ) return false;
cache.isAnimating = true;
$(this).hide();
var $item = $(this).closest('div.ca-item');
aux.openItem( $wrapper, $item, settings, cache );
return false;
});
// click to close the item(s)
$el.find('a.ca-close').live('click.contentcarousel', function( event ) {
if( cache.isAnimating ) return false;
cache.isAnimating = true;
var $item = $(this).closest('div.ca-item');
aux.closeItems( $wrapper, $item, settings, cache );
return false;
});
// navigate left
$navPrev.bind('click.contentcarousel', function( event ) {
if( cache.isAnimating ) return false;
cache.isAnimating = true;
aux.navigate( -1, $el, $wrapper, settings, cache );
});
// navigate right
$navNext.bind('click.contentcarousel', function( event ) {
if( cache.isAnimating ) return false;
cache.isAnimating = true;
aux.navigate( 1, $el, $wrapper, settings, cache );
});
// adds events to the mouse
$el.bind('mousewheel.contentcarousel', function(e, delta) {
if(delta > 0) {
if( cache.isAnimating ) return false;
cache.isAnimating = true;
aux.navigate( -1, $el, $wrapper, settings, cache );
}
else {
if( cache.isAnimating ) return false;
cache.isAnimating = true;
aux.navigate( 1, $el, $wrapper, settings, cache );
}
return false;
});
});
}
}
};
$.fn.contentcarousel = function(method) {
if ( methods[method] ) {
return methods[method].apply( this, Array.prototype.slice.call( arguments, 1 ));
} else if ( typeof method === 'object' || ! method ) {
return methods.init.apply( this, arguments );
} else {
$.error( 'Method ' + method + ' does not exist on jQuery.contentcarousel' );
}
};
})(jQuery);
please help me finding out how can i call function with same class names but different ids and on other side,i would be able to filter out the action?
even if there is some other way of achieving my goal,please let me know.i am free either way!!
Thanks.
In the init method of your JS file, you have a variable $er :
var $el = $(this)
This $el is the current element. So, you'll get the id of the element directly using :
var elementId = $el.attr('id'); // Now, elementId = ca-container