Permalink
Browse files

Merge pull request #7 from joshuaballoch/add

Add 'addItems' function to Lemmon-Slider
  • Loading branch information...
lemmon committed May 30, 2013
2 parents 2c658f4 + ccef3c9 commit a885c6f954f7bfacd0831b6075dea2fcb324bac1
Showing with 115 additions and 36 deletions.
  1. +55 −5 demo.html
  2. +60 −31 lemmon-slider.js
View
@@ -4,14 +4,14 @@
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0">
<title>Carousel With Variable Elements Widths | Lemmon jQuery</title>
<meta name="generator" content="TextMate http://macromates.com/">
<meta name="author" content="Jakub Pelák">
<meta name="robots" content="index, follow">
<script src="http://static.lemmonjuice.com/public/jquery/jquery-1.6.min.js"></script>
</head>
@@ -44,8 +44,46 @@
<a href="#" class="next-slide">Next Slide</a> |
<a href="#" class="next-page">Next Page</a>
</div>
<h2> Adding Items to a Slider </h2>
You can now add items to a slider through a method 'addItems'
<br>
<div id="slider2" class="slider">
<ul>
<li><div style="width:200px;height:160px;background:#2aa198;"> 1</div></li>
<li><div style="width:250px;height:160px;background:#268bd2;"> 2</div></li>
</ul>
</div>
<div class="controls">
<a href="#" class="prev-page">Prev Page</a> |
<a href="#" class="prev-slide">Prev Slide</a> |
<a href="#" class="next-slide">Next Slide</a> |
<a href="#" class="next-page">Next Page</a>
</div>
<br>
Item to add:
<input id="addItem2" type="text" style="width:500px;" value='<li><div style="width:100px;height:160px;background:#6c71c4;">new</div></li>'>
<button id="add-to-slider2">Add it!</button>
You can now also prepend items into the slider
<br>
<div id="slider3" class="slider">
<ul>
<li><div style="width:200px;height:160px;background:#2aa198;"> 1</div></li>
<li><div style="width:250px;height:160px;background:#268bd2;"> 2</div></li>
</ul>
</div>
<div class="controls">
<a href="#" class="prev-page">Prev Page</a> |
<a href="#" class="prev-slide">Prev Slide</a> |
<a href="#" class="next-slide">Next Slide</a> |
<a href="#" class="next-page">Next Page</a>
</div>
<br>
Item to add:
<input id="addItem3" type="text" style="width:500px;" value='<li><div style="width:100px;height:160px;background:#6c71c4;">new</div></li>'>
<button id="add-to-slider3">Prepend it!</button>
</div>
<script src="lemmon-slider.js"></script>
<script>
window.onload = function(){
@@ -54,17 +92,29 @@
$( '#slider1' ).lemmonSlider({
infinite: true
});
$( '#slider2' ).lemmonSlider({
infinite: true
});
$( '#slider3' ).lemmonSlider({
infinite: true
});
alert('OK');
}
$('#add-to-slider2').click(function(){
$('#slider2').lemmonSlider('addItem', {item: $('input#addItem2').val()});
})
$('#add-to-slider3').click(function(){
$('#slider3').lemmonSlider('addItem', {item: $('input#addItem3').val(), prepend: true});
})
</script>
<style type="text/css" media="screen">
.wrap { width:640px; margin:20px; background:#ffc; }
body div.slider { overflow:hidden; position:relative; width:100%; height:160px !important; }
body div.slider ul { margin:0; padding:0; height:160px; }
body div.slider li { float:left; list-style:none; margin:0 5px 0 0; }
body div.slider li { text-align:center; line-height:160px; font-size:25px; }
</style>
</style>
</body>
</html>
</html>
View
@@ -21,43 +21,44 @@
// Initialzie plugin
//
init : function(options){
var options = $.extend({}, $.fn.lemmonSlider.defaults, options);
return this.each(function(){
var $slider = $( this ),
data = $slider.data( 'slider' );
if ( ! data ){
var $sliderContainer = $slider.find(options.slider),
$sliderControls = $slider.next().filter('.controls'),
$items = $sliderContainer.find( options.items ),
originalWidth = 1;
$items.each(function(){ originalWidth += $(this).outerWidth(true) });
$sliderContainer.width( originalWidth );
// slide to last item
if ( options.slideToLast ) $sliderContainer.css( 'padding-right', $slider.width() );
// infinite carousel
if ( options.infinite ){
$slider.attr('data-slider-infinite',true)
originalWidth = originalWidth * 3;
$sliderContainer.width( originalWidth );
$items.clone().addClass( '-after' ).insertAfter( $items.filter(':last') );
$items.filter( ':first' ).before( $items.clone().addClass('-before') );
$items = $sliderContainer.find( options.items );
}
$slider.items = $items;
$slider.options = options;
// first item
//$items.filter( ':first' ).addClass( 'active' );
@@ -75,7 +76,7 @@
}
});
if ( x > 0 && $sliderContainer.outerWidth() - scroll - $slider.width() > 0 ){
if ( x > 0 && $sliderContainer.outerWidth() - scroll - $slider.width() - 1 > 0 ){
slideTo( e, $slider, scroll+x, slide, 'fast' );
} else if ( options.loop ){
// return to first
@@ -125,7 +126,7 @@
}
});
if ( x > 0 && scroll + w < originalWidth ){
if ( x > 0 && scroll + w + 1 < originalWidth ){
slideTo( e, $slider, scroll+x, slide, 'slow' );
} else if ( options.loop ){
// return to first
@@ -194,7 +195,7 @@
});
//if ( typeof $slider.options.create == 'function' ) $slider.options.create();
$slider.data( 'slider', {
'target' : $slider,
'options' : options
@@ -203,34 +204,62 @@
}
});
},
//
// Add Item
//
addItem : function(options){
var options = $.extend({}, $.fn.lemmonSlider.defaults, options);
var $slider = $( this ),
$sliderContainer = $slider.find(options.slider),
$sliderControls = $slider.next().filter('.controls'),
$items = $sliderContainer.find( options.items )
options.infinite = $slider.attr('data-slider-infinite')
if (!options.item) { return false }
methods.destroy.apply(this);
if (options.prepend) {
$sliderContainer.prepend(options.item);
} else {
$sliderContainer.append(options.item);
}
methods.init.apply( this, [options]);
},
//
// Destroy plugin
//
destroy : function(){
return this.each(function(){
var $slider = $( this ),
$sliderControls = $slider.next().filter( '.controls' ),
$items = $slider.find('> *:first > *'),
data = $slider.data( 'slider' );
$slider.unbind( 'nextSlide' );
$slider.unbind( 'prevSlide' );
$slider.unbind( 'nextPage' );
$slider.unbind( 'prevPage' );
$slider.unbind( 'slideTo' );
$sliderControls.find( '.next-slide' ).unbind( 'click' );
$sliderControls.find( '.prev-slide' ).unbind( 'click' );
$sliderControls.find( '.next-page' ).unbind( 'click' );
$sliderControls.find( '.next-page' ).unbind( 'click' );
$slider.removeData( 'slider' );
if ($slider.attr('data-slider-infinite')) {
$.merge($items.filter('.-before'),$items.filter('.-after')).each(function(index,item){
$(item).remove();
});
}
});
}
//
//
@@ -240,9 +269,9 @@
// Private functions
//
function slideTo( e, $slider, x, i, t ){
$slider.items.filter( 'li:eq(' + i + ')' ).addClass( 'active' ).siblings( '.active' ).removeClass( 'active' );
if ( typeof t == 'undefined' ){
t = 'fast';
}
@@ -255,12 +284,12 @@
$slider.scrollLeft( x );
checkInfinite( $slider );
}
//if ( typeof $slider.options.slide == 'function' ) $slider.options.slide( e, i, time );
}
function checkInfinite( $slider ){
var $active = $slider.items.filter( '.active' );
if ( $active.hasClass( '-before' ) ){
@@ -275,9 +304,9 @@
$active.removeClass( 'active' );
$active = $slider.items.filter( ':not(.-before):eq(' + i + ')' ).addClass( 'active' );
$slider.scrollLeft( $slider.scrollLeft() + $active.position().left );
}
}
//
// Debug
@@ -288,8 +317,8 @@
//
//
//
$.fn.lemmonSlider = function( method ){
$.fn.lemmonSlider = function( method , options ){
if (options == null) { options = {}; };
if ( methods[method] ) {
return methods[ method ].apply( this, Array.prototype.slice.call( arguments, 1 ));
} else if ( typeof method === 'object' || !method ){
@@ -303,14 +332,14 @@
//
//
$.fn.lemmonSlider.defaults = {
'items' : '> *',
'loop' : true,
'slideToLast' : false,
'slider' : '> *:first',
// since 0.2
'infinite' : false
}
})( jQuery );

0 comments on commit a885c6f

Please sign in to comment.