Java Slider Help

teejaymurone · May 5, 2011

I have an image slider i am trying to edit. Currently i can only make it display only 1 continuios line of images that disapears. What i am trying to get, is an overflow feature that allows the images to start a new line instead of only one line. here is the code.

JAVA Code:

(function($) {

$.fn.loopedCarousel = function(options) {

var defaults = {

container: '.container',

slides: '.slides',

pagination: '.pagination',

autoStart: 0, // Set to positive number for auto interval and interval time

slidespeed: 300, // Speed of slide animation

fadespeed: 300, // Speed of fade animation

items: 6, // Items show

padding: 26, // Padding between items

showPagination: false, // Shows pagination links

vertical: false

};

this.each(function() {

var obj = $(this);

var o = $.extend(defaults, options);

var i = o.items;

var m = 0;

var t = 1;

var s = $(o.slides,obj).children().size();

var w = $(o.slides,obj).children().outerWidth()+o.padding;

var h = $(o.slides,obj).children().outerHeight()+o.padding;

var c = Math.ceil($(o.slides,obj).children().size()/i);

var pd = o.padding/2;

var p = 0;

var u = false;

var n = 0;

var pt = 0;

var os = i*c-s;

var params = {};

if (o.vertical===true) { w = h; }

if(o.showPagination){

var buttons = s/i;

$(obj).append('<ul class="pagination">');

$(o.slides,obj).children().each(function(){

if (n<buttons) {

$(o.pagination,obj).append('<li><a rel="'+(n+1)+'" href="#" >'+(n+1)+'</a></li>');

n = n+1;

} else {

n = 0;

return false;

}

$(o.pagination+' li a:eq(0)',obj).parent().addClass('active');

});

}

if (o.vertical===true) {

$(o.container,obj).css({height:(w*i)});

$(o.slides,obj).css({height:(s*w)});

} else {

$(o.container,obj).css({width:(w*i)});

$(o.slides,obj).css({width:(s*w)});

}

$(o.slides,obj).children().each(function(){

if (o.vertical===true) {

$(this).css({position:'absolute',top:p+pd,display:'block'});

} else {

$(this).css({position:'absolute',left:p+pd,display:'block'});

}

p=p+w;

});

$(o.slides,obj).children().each(function(){

pt = pt+1;

if (pt<i+1) {

params[o.vertical ? 'top' : 'left'] = (-w*pt)+pd-(w*os);

$(o.slides,obj).children(':eq('+(s-pt)+')').css(params);

}

if (pt===i+2) {

pt = 0;

return false;

}

});

$('.next',obj).click(function(){

if(u===false) {

animate('next',true);

if(o.autoStart){clearInterval(sliderIntervalID);}

}

return false;

});

$('.previous',obj).click(function(){

if(u===false) {

animate('prev',true);

if(o.autoStart){clearInterval(sliderIntervalID);}

} return false;

});

$(o.pagination+' li a',obj).click(function(){

if ($(this).parent().hasClass('active')) {return false;}

else {

t = $(this).attr('rel');

$(o.pagination+' li a',obj).parent().siblings().removeClass('active');

$(this).parent().addClass('active');

animate('fade',t);

if(o.autoStart){clearInterval(sliderIntervalID);}

} return false;

});

if (o.autoStart) {

sliderIntervalID = setInterval(function(){

if(u===false) {animate('next',true);}

}, o.autoStart);

}

function current(t) {

if(t===c+1){t=1;}

if(t===0){t=c;}

$(o.pagination+' li a',obj).parent().siblings().removeClass('active');

$(o.pagination+' li a[rel=' + (t) + ']',obj).parent().addClass('active');

}

function animate(dir,clicked){

u = true;

switch(dir){

case 'next':

t = t+1;

m = (-(t*w-w)*i);

current(t);

params[o.vertical ? 'top' : 'left'] = m;

$(o.slides,obj).animate(params, o.slidespeed,function(){

if (t===c+1) {

t = 1;

params[o.vertical ? 'top' : 'left'] = 0;

$(o.slides,obj).css(params,function(){

$(o.slides,obj).animate(params);

});

$(o.slides,obj).children().each(function(){

if (pt<i) {

params[o.vertical ? 'top' : 'left'] = (w*pt)+pd;

$(o.slides,obj).children(':eq('+pt+')').css(params);

params[o.vertical ? 'top' : 'left'] = -(w*(pt+os+1)-pd);

$(o.slides,obj).children(':eq('+(s-(pt+1))+')').css(params);

} else {

pt = 0;

return false;

}

pt = pt+1;

});

}

if (t===c) {

$(o.slides,obj).children().each(function(){

if (pt<i) {

params[o.vertical ? 'top' : 'left'] = w*(s+pt+os)+pd;

$(o.slides,obj).children(':eq('+(pt)+')').css(params);

} else {

pt = 0;

return false;

}

pt = pt+1;

});

}

if (t===2) {

$(o.slides,obj).children().each(function(){

pt = pt+1;

if (pt<i+1) {

params[o.vertical ? 'top' : 'left'] = ((w*s)+pd)-(w*pt);

$(o.slides,obj).children(':eq('+(s-pt)+')').css(params);

} else {

pt = 0;

return false;

}

});

}

u = false;

});

break;

case 'prev':

t = t-1;

m = (-(t*w-w)*i);

current(t);

params[o.vertical ? 'top' : 'left'] = m;

$(o.slides,obj).animate(params, o.slidespeed,function(){

if (t===0) {

t = c;

params[o.vertical ? 'top' : 'left'] = -w*(s-i)-(w*os);

$(o.slides,obj).css(params);

$(o.slides,obj).children().each(function(){

if (pt<i) {

params[o.vertical ? 'top' : 'left'] = w*(s+pt+os)+pd;

$(o.slides,obj).children(':eq('+pt+')').css(params);

params[o.vertical ? 'top' : 'left'] = (s*w)+pd-(pt*w)-w;

$(o.slides,obj).children(':eq('+((s-1)-pt)+')').css(params);

} else {

pt = 0;

return false;

}

pt = pt+1;

});

}

if (t===2) {

$(o.slides,obj).children().each(function(){

if (pt<i) {

params[o.vertical ? 'top' : 'left'] = (w*pt)+pd;

$(o.slides,obj).children(':eq('+pt+')').css(params);

} else {

pt = 0;

return false;

}

pt = pt+1;

});

}

if (t===1) {

$(o.slides,obj).children().each(function(){

if (pt<i) {

params[o.vertical ? 'top' : 'left'] = -(w*pt)-w+pd-(w*os);

$(o.slides,obj).children(':eq('+((s-1)-pt)+')').css(params);

} else {

pt = 0;

return false;

}

pt = pt+1;

});

}

u = false;

});

break;

case 'fade':

t = [t]*1;

m = (-(t*w-w)*i);

current(t);

$(o.slides,obj).children().fadeOut(o.fadespeed, function(){

params[o.vertical ? 'top' : 'left'] = m;

$(o.slides,obj).css(params);

$(o.slides,obj).children().each(function(){

if (pt<i) {

params[o.vertical ? 'top' : 'left'] = (pt*w)+pd;

$(o.slides,obj).children(':eq('+pt+')').css(params);

params[o.vertical ? 'top' : 'left'] = w*(s-pt)-w+pd;

$(o.slides,obj).children(':eq('+((s-1)-pt)+')').css(params);

} else {

pt = 0;

return false;

}

pt = pt+1;

});

if(t===c){

$(o.slides,obj).children().each(function(){

if (pt<i) {

params[o.vertical ? 'top' : 'left'] = w*(s+pt+os)+pd;

$(o.slides,obj).children(':eq('+(pt)+')').css(params);

} else {

pt = 0;

return false;

}

pt = pt+1;

});

}

if(t===1){

$(o.slides,obj).children().each(function(){

pt = pt+1;

if (pt<i+1) {

params[o.vertical ? 'top' : 'left'] = -(w*pt)+pd-(w*os);

$(o.slides,obj).children(':eq('+(s-pt)+')').css(params);

} else {

pt = 0;

return false;

}

});

}

$(o.slides,obj).children().fadeIn(o.fadespeed);

u = false;

});

break;

default:

break;

}

});

};

})(jQuery);

CSS Code:

<h2 class="extra-title">Products</h2>

<li><a href="#tab1">Panels</a></li>

<li><a href="#tab2">Keypads</a></li>

<li><a href="#tab3">Devices</a></li>

<li><a href="#tab3">Manuals</a></li>

</ul>

</div>

<div>

<dl>

<dd>

<strong>Power Series</strong>

Now Available

</dd>

<a href="#"><img src="images/info-icon.gif" alt="" /></a>Details

</dd>

</dl>

</div>

<div>

<dl>

<dd>

<strong>Alexor</strong>

Now Available

</dd>

<a href="#"><img src="images/info-icon.gif" alt="" /></a>Details

</dd>

</dl>

</div>

<div>

<dl>

<dd>

Now Available

</dd>

<a href="#"><img src="images/info-icon.gif" alt="" /></a>Details

</dd>

</dl>

</div>

<div>

<dl>

<dd>

<strong>New Panel</strong>

Spring 2011

</dd>

<a href="#"><img src="images/info-icon.gif" alt="" /></a>Details

</dd>

</dl>

</div>

<div>

<dl>

<dd>

<strong>Power Series</strong>

Now Available

</dd>

<a href="#"><img src="images/info-icon.gif" alt="" /></a>Details

</dd>

</dl>

</div>

<div>

<dl>

<dd>

<strong>Alexor</strong>

Now Available

</dd>

<a href="#"><img src="images/info-icon.gif" alt="" /></a>Details

</dd>

</dl>

</div>

<div>

<dl>

<dd>

Now Available

</dd>

<a href="#"><img src="images/info-icon.gif" alt="" /></a>Details

</dd>

</dl>

</div>

<div>

<dl>

<dd>

<strong>New Panel</strong>

Spring 2011

</dd>

<a href="#"><img src="images/info-icon.gif" alt="" /></a>Details

</dd>

</dl>

</div>

<div>

<dl>

<dd>

<strong>Power Series</strong>

Now Available

</dd>

<a href="#"><img src="images/info-icon.gif" alt="" /></a>Details

</dd>

</dl>

</div>

<div>

<dl>

<dd>

<strong>Alexor</strong>

Now Available

</dd>

<a href="#"><img src="images/info-icon.gif" alt="" /></a>Details

</dd>

</dl>

</div>

<div>

<dl>

<dd>

Now Available

</dd>

<a href="#"><img src="images/info-icon.gif" alt="" /></a>Details

</dd>

</dl>

</div>

<div>

<dl>

<dd>

<strong>New Panel</strong>

Spring 2011

</dd>

<a href="#"><img src="images/info-icon.gif" alt="" /></a>Details

</dd>

</dl>

</div>

</div>

let me know if you need any further information. thank you!

xenophobia · May 6, 2011

Try to be more specify. Which part doesn't work. Instead of post your js script here and expect ppl to try out for you =)

trq · May 6, 2011

ps: JavaScript is in no way related to Java.

Sign In

Java Slider Help

Recommended Posts

teejaymurone

Link to comment

Share on other sites

xenophobia

Link to comment

Share on other sites

trq

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information