Hi there,

Can anyone help me with this one please?! I'm setting up the Richard Scarrott - jQuery - Carousel Plugin but I'm having some difficulties getting everything in the right spot. The carousel has some pagination and NextPrev links on the bottom of the images and I've been trying for almost two days (without improvements) rearranging the script so they would appear on top of the images. Can anyone help me? What shall I do here? How can I hack this thing up?? I bet this is a peace of cake but I'm kind of new to the JS land and this has revealed kind of tricky to me.


This is my application of the plugin so far(with the original JS script):


//html

<head>
...
$(document).ready(function() {
$('#my-carousel').carousel();
});

</head>

<body>
...
<div id="container">
<div id="my-carousel" class="carousel module">
<ul>
<li>
<<img src="/FLR/imgs/BeackeyBeasley/BEA-2011b_E.jpg" alt="Beckey \ The outside setting_1" width:"1080px" />
</li>
<li>
<<img src="/FLR/imgs/BeackeyBeasley/BEA-006.jpg" height:"720px" alt="Beckey \ The outside setting_2" />
</li>
<li>
<<img src="/FLR/imgs/BeackeyBeasley/BEA-2011a_E.jpg" width:"1080px" alt="Beckey \ The outside setting_3" />
</li>
<li>
<<img src="/FLR/imgs/BeackeyBeasley/imE254.jpg" width:"1080px" alt="Beckey \ The outside setting_4" />
</li>
<li>
<<img src="/FLR/imgs/BeackeyBeasley/imE255.jpg" width:"1080px" alt="Beckey \ The outside setting_5" />
</li>
</ul>
</div>
</div>


//CSS script

.carousel ul {
position:relative;
clear:both;
overflow:hidden;
margin:0;
padding:0;
float:left;
}

.no-js .carousel ul {position:static;}

.carousel .mask {
position:relative;
clear:both;
float:left;
overflow:hidden;
width:1080px;
height:720px;
}

.carousel ul li {
float:left;
width:1080px;
height:720px;
color:#ffffff;
margin:0px;
}

.carousel .pagination-links {
list-style:none;
font-family: "TyponineSans Regular 8", Helvetica, Arial, sans-serif;
font-style: normal;
font-weight: normal;
font-size:14px;
letter-spacing: 0.03em;
line-height:1.3;
margin:0;
padding:0;
}

.carousel .pagination-links li {
display:inline;
font-family: "TyponineSans Regular 8", Helvetica, Arial, sans-serif;
font-style: normal;
font-weight: normal;
font-size:14px;
letter-spacing: 0.03em;
line-height:1.3;
}

.carousel .pagination-links li a {
padding: 2px 6px;
}

.carousel .pagination-links li a:hover {text-decoration:none;}

.carousel .pagination-links li.current a {
background:#ffffff;
color:#000000;
}

.prev {
font-family: "TyponineSans Regular 8", Helvetica, Arial, sans-serif;
font-style: normal;
font-weight: normal;
font-size:14px;
letter-spacing: 0.03em;
line-height:1.3;
}

.next {
font-family: "TyponineSans Regular 8", Helvetica, Arial, sans-serif;
font-style: normal;
font-weight: normal;
font-size:14px;
letter-spacing: 0.03em;
line-height:1.3;
}

.carousel .disabled {
color:gray;
cursor:default;
}

#my-carousel {
position:relative;
clear:both;
float:left;
width:1080px;
height:720px;
}

#my-carousel .mask {
position:relative;
clear:both;
float:left;
width:1080px;
height:720px;
}


// Jquery - Carousel plugin Script

// prototypal inheritance
if (typeof Object.create !== 'function') {
Object.create = function (o) {
function F() {}
F.prototype = o;
return new F();
};
}

(function($) {
// ie alias
var headache = $.browser.msie && $.browser.version.substr(0,1)<9;

// carousel
var Carousel = {
settings: {
itemsPerPage: 1,
itemsPerTransition: 1,
noOfRows: 1,
pagination: true,
nextPrevLinks: true,
speed: 'normal',
easing: 'swing'
},
init: function(el, options) {
if (!el.length) {return false;}
this.options = $.extend({}, this.settings, options);
this.itemIndex = 0;
this.container = el;
this.runner = this.container.find('ul');
this.items = this.runner.children('li');
this.noOfItems = this.items.length;
this.setRunnerWidth();
if (this.noOfItems <= this.options.itemsPerPage) {return false;} // bail if there are too few items to paginate
this.insertMask();
this.noOfPages = Math.ceil((this.noOfItems - this.options.itemsPerPage) / this.options.itemsPerTransition) + 1;
if (this.options.pagination) {this.insertPagination();}
if (this.options.nextPrevLinks) {this.insertNextPrevLinks();}
this.updateBtnStyles();
},
insertMask: function() {
this.runner.wrap('<div class="mask" />');
this.mask = this.container.find('div.mask');

// set mask height so items can be of varying height
var maskHeight = this.runner.outerHeight(true);
this.mask = this.container.find('div.mask');
this.mask.height(maskHeight);
},
setRunnerWidth: function() {
this.noOfItems = Math.round(this.noOfItems / this.options.noOfRows);
var width = this.items.outerWidth(true) * this.noOfItems;
this.runner.width(width);
},
insertPagination: function() {
var i, links = [];
this.paginationLinks = $('<ol class="pagination-links" />');
for (i = 0; i < this.noOfPages; i++) {
links[i] = '<li><a href="#item-' + i + '">' + (i + 1) + '</a></li>';
}
this.paginationLinks
.append(links.join(''))
.appendTo(this.container)
.find('a')
.bind('click.carousel', $.proxy(this, 'paginationHandler'));
},
paginationHandler: function(e) {
this.itemIndex = e.target.hash.substr(1).split('-')[1] * this.options.itemsPerTransition;
this.animate();
return false;
},
insertNextPrevLinks: function() {
this.prevLink = $('<a href="#" class="prev">Prev</a>')
.bind('click.carousel', $.proxy(this, 'prevItem'))
.appendTo(this.container);
this.nextLink = $('<a href="#" class="next">Next</a>')
.bind('click.carousel', $.proxy(this, 'nextItem'))
.appendTo(this.container);
},
nextItem: function() {
this.itemIndex = this.itemIndex + this.options.itemsPerTransition;
this.animate();
return false;
},
prevItem: function() {
this.itemIndex = this.itemIndex - this.options.itemsPerTransition;
this.animate();
return false;
},
updateBtnStyles: function() {
if (this.options.pagination) {
this.paginationLinks
.children('li')
.removeClass('current')
.eq(Math.ceil(this.itemIndex / this.options.itemsPerTransition))
.addClass('current');
}

if (this.options.nextPrevLinks) {
this.nextLink
.add(this.prevLink)
.removeClass('disabled');
if (this.itemIndex === (this.noOfItems - this.options.itemsPerPage)) {
this.nextLink.addClass('disabled');
}
else if (this.itemIndex === 0) {
this.prevLink.addClass('disabled');
}
}
},
animate: function() {
var nextItem, pos;
// check whether there are enough items to animate to
if (this.itemIndex > (this.noOfItems - this.options.itemsPerPage)) {
this.itemIndex = this.noOfItems - this.options.itemsPerPage; // go to last panel - items per transition
}
if (this.itemIndex < 0) {
this.itemIndex = 0; // go to first
}
nextItem = this.items.eq(this.itemIndex);
pos = nextItem.position();

if (headache) {
this.runner
.stop()
.animate({left: -pos.left}, this.options.speed, this.options.easing);
}
else {
this.mask
.stop()
.animate({scrollLeft: pos.left}, this.options.speed, this.options.easing);
}
this.updateBtnStyles();
}
};

// bridge
$.fn.carousel = function(options) {
return this.each(function() {
var obj = Object.create(Carousel);
obj.init($(this), options);
$.data(this, 'carousel', obj);
});
};
})(jQuery);

</script>

Thanks you,