Hey guys, been working on modifying a pre-built carousel, so far I have the following
/*
* jQuery infinitecarousel plugin
* @author admin@catchmyfame.com - http://www.catchmyfame.com
* @version 1.2.2
* @date August 31, 2009
* @category jQuery plugin
* @copyright (c) 2009 admin@catchmyfame.com (www.catchmyfame.com)
* @license CC Attribution-Share Alike 3.0 - http://creativecommons.org/licenses/by-sa/3.0/
*/
(function($){
$.fn.extend({
infiniteCarousel: function(options)
{
var defaults =
{
transitionSpeed : 1500,
displayTime : 0,
textholderHeight : .2,
displayProgressBar : 0,
displayThumbnails: 1,
displayThumbnailNumbers: 0,
displayThumbnailBackground: 1,
thumbnailWidth: '150px',
thumbnailHeight: '70px',
thumbnailFontSize: '.7em'
};
var options = $.extend(defaults, options);
return this.each(function() {
var randID = Math.round(Math.random()*100000000);
var o=options;
var obj = $(this);
var curr = 1;
var numImages = $('img', obj).length; // Number of images
var imgHeight = $('img:first', obj).height();
var imgWidth = $('img:first', obj).width();
var autopilot = 1;
$('p', obj).hide(); // Hide any text paragraphs in the carousel
$(obj).width(imgWidth).height(imgHeight);
// Build progress bar
if(o.displayProgressBar)
{
$(obj).append('<div id="progress'+randID+'" style="position:absolute;bottom:0;background:#bbb;left:'+$(obj).css('paddingLeft')+'"></div>');
$('#progress'+randID).width(imgWidth).height(5).css('opacity','.5');
}
// Move last image and stick it on the front
$(obj).css({'overflow':'hidden','position':'relative'});
$('li:last', obj).prependTo($('ul', obj));
$('ul', obj).css('left',-imgWidth+'px');
$('ul',obj).width(9999);
$('ul',obj).css({'list-style':'none','margin':'0','padding':'0','position':'relative'});
$('li',obj).css({'display':'inline','float':'left'});
// Build textholder div thats as wide as the carousel and 20%-25% of the height
$(obj).append('<div id="textholder'+randID+'" class="textholder" style="position:absolute;bottom:0px;margin-bottom:'+-imgHeight*o.textholderHeight+'px;left:'+$(obj).css('paddingLeft')+'"></div>');
var correctTHWidth = parseInt($('#textholder'+randID).css('paddingTop'));
var correctTHHeight = parseInt($('#textholder'+randID).css('paddingRight'));
$('#textholder'+randID).width(imgWidth-(correctTHWidth * 2)).height((imgHeight*o.textholderHeight)-(correctTHHeight * 2)).css({'backgroundColor':'#FFF','opacity':'0.5'});
showtext($('li:eq(1) p', obj).html());
// Prev/next button(img)
html = '<div id="btn_rt'+randID+'" style="position:absolute;right:0;top:'+((imgHeight/2)-15)+'px"><a href="javascript:void(0);"><img style="border:none;margin-right:2px" src="assets/right_btn.png" /></a></div>';
html += '<div id="btn_lt'+randID+'" style="position:absolute;left:0;top:'+((imgHeight/2)-15)+'px"><a href="javascript:void(0);"><img style="border:none;margin-left:2px" src="assets/left_btn.png" /></a></div>';
$(obj).append(html);
// Left and right arrow image button actions
$('#btn_rt'+randID).css('opacity','1').click(function(){
autopilot = 0;
$('#progress'+randID).stop().fadeOut();
anim('next');
setTimeout(function(){$('#play_btn'+randID).fadeIn(250);},o.transitionSpeed);
clearTimeout(clearInt);
}).hover(function(){$(this).animate({opacity:'1'},250)},function(){$(this).animate({opacity:'1'},250)});
$('#btn_lt'+randID).css('opacity','1').click(function(){
autopilot = 0;
$('#progress'+randID).stop().fadeOut();
anim('prev');
setTimeout(function(){$('#play_btn'+randID).fadeIn(250);},o.transitionSpeed);
clearTimeout(clearInt);
}).hover(function(){$(this).animate({opacity:'1'},250)},function(){$(this).animate({opacity:'1'},250)});
if(o.displayThumbnails)
{
// Build thumbnail viewer and thumbnail divs
$(obj).after('<div id="thumbs'+randID+'" style="position:relative;overflow:auto;text-align:left;padding-top:5px; margin:0 auto;"></div>');
$('#thumbs'+randID).width(imgWidth);
for(i=0;i<=numImages-1;i++)
{
thumb = $('img:eq('+(i+1)+')', obj).attr('src');
$('#thumbs'+randID).append('<div class="thumb" id="thumb'+randID+'_'+(i+1)+'" style="cursor:pointer;background-image:url('+thumb+');display:inline;float:left;width:'+o.thumbnailWidth+';height:'+o.thumbnailHeight+';line-height:'+o.thumbnailHeight+';padding:0;overflow:hidden;text-align:center;margin-right:4px;font-size:'+o.thumbnailFontSize+';font-family:Arial;color:#000;text-shadow:0 0 3px #fff">'+(i+1)+'</div>');
if(i==0) $('#thumb'+randID+'_1').css({'border-color':'#ff0000'});
}
// Next two lines are a special case to handle the first list element which was originally the last
thumb = $('img:first', obj).attr('src');
$('#thumb'+randID+'_'+numImages).css({'background-image':'url('+thumb+')'});
$('#thumbs'+randID+' div.thumb:not(:first)').css({'opacity':'.65'}); // makes all thumbs 65% opaque except the first one
$('#thumbs'+randID+' div.thumb').hover(function(){$(this).animate({'opacity':.99},150)},function(){if(curr!=this.id.split('_')[1]) $(this).animate({'opacity':.65},250)}); // add hover to thumbs
// Assign click handler for the thumbnails. Normally the format $('.thumb') would work but since it's outside of our object (obj) it would get called multiple times
$('#thumbs'+randID+' div').bind('click', thumbclick); // We use bind instead of just plain click so that we can repeatedly remove and reattach the handler
if(!o.displayThumbnailNumbers) $('#thumbs'+randID+' div').text('');
if(!o.displayThumbnailBackground) $('#thumbs'+randID+' div').css({'background-image':'none'});
}
function thumbclick(event)
{
target_num = this.id.split('_'); // we want target_num[1]
if(curr != target_num[1])
{
$('#thumb'+randID+'_'+curr).css({'border-color':'#ccc'});
$('#progress'+randID).stop().fadeOut();
clearTimeout(clearInt);
//alert(event.data.src+' '+this.id+' '+target_num[1]+' '+curr);
$('#thumbs'+randID+' div').css({'cursor':'default'}).unbind('click'); // Unbind the thumbnail click event until the transition has ended
autopilot = 0;
setTimeout(function(){$('#play_btn'+randID).fadeIn(250);},o.transitionSpeed);
}
if(target_num[1] > curr)
{
diff = target_num[1] - curr;
anim('next',diff);
}
if(target_num[1] < curr)
{
diff = curr - target_num[1];
anim('prev', diff);
}
}
function showtext(t)
{
// the text will always be the text of the second list item (if it exists)
if(t != null)
{
$('#textholder'+randID).html(t).animate({marginBottom:'0px'},500); // Raise textholder
showminmax();
}
}
function showminmax()
{
if(!autopilot)
{
html = '<img style="position:absolute;top:2px;right:18px;display:none;cursor:pointer" src="/js/infiniteCarousel/images/down.png" title="Minimize" alt="minimize" id="min" /><img style="position:absolute;top:2px;right:18px;display:none;cursor:pointer" src="/js/infiniteCarousel/images/up.png" title="Maximize" alt="maximize" id="max" />';
html += '<img style="position:absolute;top:2px;right:6px;display:none;cursor:pointer" src="/js/infiniteCarousel/images/close.png" title="Close" alt="close" id="close" />';
$('#textholder'+randID).append(html);
$('#min').fadeIn(250).click(function(){$('#textholder'+randID).animate({marginBottom:(-imgHeight*o.textholderHeight)-(correctTHHeight * 2)+24+'px'},500,function(){$("#min,#max").toggle();});});
$('#max').click(function(){$('#textholder'+randID).animate({marginBottom:'0px'},500,function(){$("#min,#max").toggle();});});
$('#close').fadeIn(250).click(function(){$('#textholder'+randID).animate({marginBottom:(-imgHeight*o.textholderHeight)-(correctTHHeight * 2)+'px'},500);});
}
}
function borderpatrol(elem)
{
$('#thumbs'+randID+' div').css({'border-color':'#ccc'}).animate({opacity: 0.65},500);
setTimeout(function(){elem.css({'border-color':'#ff0000'}).animate({'opacity': .99},500);},o.transitionSpeed);
}
function anim(direction,dist)
{
// Fade left/right arrows out when transitioning
$('#btn_rt'+randID).fadeOut(500);
$('#btn_lt'+randID).fadeOut(500);
// animate textholder out of frame
$('#textholder'+randID).animate({marginBottom:(-imgHeight*o.textholderHeight)-(correctTHHeight * 2)+'px'},500);
//?? Fade out play/pause?
$('#pause_btn'+randID).fadeOut(250);
$('#play_btn'+randID).fadeOut(250);
if(direction == "next")
{
if(curr==numImages) curr=0;
if(dist>1)
{
borderpatrol($('#thumb'+randID+'_'+(curr+dist)));
$('li:lt(2)', obj).clone().insertAfter($('li:last', obj));
$('ul', obj).animate({left:-imgWidth*(dist+1)},o.transitionSpeed,function(){
$('li:lt(2)', obj).remove();
for(j=1;j<=dist-2;j++)
{
$('li:first', obj).clone().insertAfter($('li:last', obj));
$('li:first', obj).remove();
}
$('#btn_rt'+randID).fadeIn(500);
$('#btn_lt'+randID).fadeIn(500);
$('#play_btn'+randID).fadeIn(250);
showtext($('li:eq(1) p', obj).html());
$(this).css({'left':-imgWidth});
curr = curr+dist;
$('#thumbs'+randID+' div').bind('click', thumbclick).css({'cursor':'pointer'});
});
}
else
{
borderpatrol($('#thumb'+randID+'_'+(curr+1)));
$('#thumbs'+randID+' div').css({'cursor':'default'}).unbind('click'); // Unbind the thumbnail click event until the transition has ended
// Copy leftmost (first) li and insert it after the last li
$('li:first', obj).clone().insertAfter($('li:last', obj));
// Update width and left position of ul and animate ul to the left
$('ul', obj)
.animate({left:-imgWidth*2},o.transitionSpeed,function(){
$('li:first', obj).remove();
$('ul', obj).css('left',-imgWidth+'px');
$('#btn_rt'+randID).fadeIn(500);
$('#btn_lt'+randID).fadeIn(500);
if(autopilot) $('#pause_btn'+randID).fadeIn(250);
showtext($('li:eq(1) p', obj).html());
if(autopilot)
{
$('#progress'+randID).width(imgWidth).height(5);
$('#progress'+randID).animate({'width':0},o.displayTime,function(){
$('#pause_btn'+randID).fadeOut(50);
setTimeout(function(){$('#pause_btn'+randID).fadeIn(250)},o.transitionSpeed)
});
}
curr=curr+1;
$('#thumbs'+randID+' div').bind('click', thumbclick).css({'cursor':'pointer'});
});
}
}
if(direction == "prev")
{
if(dist>1)
{
borderpatrol($('#thumb'+randID+'_'+(curr-dist)));
$('li:gt('+(numImages-(dist+1))+')', obj).clone().insertBefore($('li:first', obj));
$('ul', obj).css({'left':(-imgWidth*(dist+1))}).animate({left:-imgWidth},o.transitionSpeed,function(){
$('li:gt('+(numImages-1)+')', obj).remove();
$('#btn_rt'+randID).fadeIn(500);
$('#btn_lt'+randID).fadeIn(500);
$('#play_btn'+randID).fadeIn(250);
showtext($('li:eq(1) p', obj).html());
curr = curr - dist;
$('#thumbs'+randID+' div').bind('click', thumbclick).css({'cursor':'pointer'});
});
}
else
{
borderpatrol($('#thumb'+randID+'_'+(curr-1)));
$('#thumbs'+randID+' div').css({'cursor':'default'}).unbind('click'); // Unbind the thumbnail click event until the transition has ended
// Copy rightmost (last) li and insert it after the first li
$('li:last', obj).clone().insertBefore($('li:first', obj));
// Update width and left position of ul and animate ul to the right
$('ul', obj)
.css('left',-imgWidth*2+'px')
.animate({left:-imgWidth},o.transitionSpeed,function(){
$('li:last', obj).remove();
$('#btn_rt'+randID).fadeIn(500);
$('#btn_lt'+randID).fadeIn(500);
if(autopilot) $('#pause_btn'+randID).fadeIn(250);
showtext($('li:eq(1) p', obj).html());
curr=curr-1;
if(curr==0) curr=numImages;
$('#thumbs'+randID+' div').bind('click', thumbclick).css({'cursor':'pointer'});
});
}
}
}
var clearInt = setInterval(function(){anim('next');},o.displayTime+o.transitionSpeed);
$('#progress'+randID).animate({'width':0},o.displayTime+o.transitionSpeed,function(){
$('#pause_btn'+randID).fadeOut(100);
setTimeout(function(){$('#pause_btn'+randID).fadeIn(250)},o.transitionSpeed)
});
});
}
});
})(jQuery);
#carousel {
margin: 0 auto;
margin-top:15px;
width: 970x;
height: 344px;
padding: 0;
overflow: scroll;
}
#carousel ul {
list-style: none;
width: 1500px;
margin: 0;
padding: 0;
position: relative;
}
#carousel li {
display: inline;
float: left;
}
.textholder {
text-align: left;
font-size: small;
padding: 6px;
-moz-border-radius: 6px 6px 0 0;
-webkit-border-top-left-radius: 6px;
-webkit-border-top-right-radius: 6px;
}
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.infinitecarousel.js"></script>
<script type="text/javascript">
$(function(){
$('#carousel').infiniteCarousel({
displayTime: 6000,
textholderHeight : .25
});
});
</script>
<div id="carousel">
<ul>
<li><img alt="" src="assets/img1.png" width="970px" height="344px" />
</li>
<li><img alt="" src="assets/img1.png" width="970px" height="344px" />
</li>
<li><img alt="" src="p3.jpg" width="970px" height="344px" /></li>
</ul>
</div>
What I would like to do with it now is move the buttons down to the tumbnails and make it control the thumbnails. How would I go about this?
Thanks
Adam 