(function($) {
$.fn.extend({
jsCarousel: function(options) {
var settings = $.extend({
scrollspeed: 1500,
delay: 6000,
itemstodisplay: 5,
autoscroll: false,
circular: true,
masked: true,
onthumbnailclick: null,
orientation: 'v'
}, options);
return this.each(function() {
var oclass = 'horizontal';
if (settings.orientation == 'v')
oclass = 'vertical';
var slidercontents = $(this).addClass('jscarousal-contents-' + oclass + '');
var slider = $('<div/>').addClass('jscarousal-' + oclass + '').attr('id', slidercontents.attr('id'));
var backbutton = $('<div/>').addClass('jscarousal-' + oclass + '-back');
var forwardbutton = $('<div/>').addClass('jscarousal-' + oclass + '-forward');
slidercontents.removeAttr('id');
slidercontents.before(slider);
slider.append(backbutton);
slider.append(slidercontents);
slider.append(forwardbutton);
var total = $('> div', slidercontents).css('display', 'none').length;
var index = 0;
var start = 0;
var current = $('<div/>');
var noOfBlocks;
var interval;
var display = settings.itemstodisplay;
var speed = settings.scrollspeed;
var top;
var left;
var height;
var containerHeight;
var containerWidth;
var direction = "forward";
var scrolling = true;
function initialize() {
index = -1;
noOfBlocks = parseInt(total / display);
if (total % display > 0) noOfBlocks++;
index = noOfBlocks - 1;
var startIndex = 0;
var endIndex = display;
var copy = false;
var allElements = $('> div', slidercontents);
$('> div', slidercontents).remove();
if (settings.masked)
allElements.addClass('thumbnail-inactive').hover(function() { $(this).removeClass('thumbnail-inactive').addClass('thumbnail-active'); }, function() { $(this).removeClass('thumbnail-active').addClass('thumbnail-inactive'); })
for (var i = 0; i < noOfBlocks; i++) {
if (total > display) {
startIndex = i * display;
endIndex = startIndex + display;
if (endIndex > total) {
startIndex -= (endIndex - total);
endIndex = startIndex + display;
copy = true;
}
}
else {
startIndex = 0;
endIndex = total;
}
var wrapper = $('<div/>')
allElements.slice(startIndex, endIndex).each(function(index, el) {
if (!copy)
wrapper.append(el);
else wrapper.append($(el).clone(true));
});
wrapper.find("img").click(
function() {
if (settings.onthumbnailclick != null) {
settings.onthumbnailclick($(this).attr('src'));
}
});
slidercontents.append(wrapper);
}
if (settings.onthumbnailclick != null)
$('> div > div', slidercontents).css('cursor', 'pointer');
$('> div', slidercontents).addClass('hidden');
$('> div > div', slidercontents).css('display', '');
/*vertical*/
if (settings.orientation == 'v') {
top = $('> div:eq(' + index + ')', slidercontents).css('top');
if (top == 'auto') top = "0px";
containerHeight = slidercontents.height();
height = slidercontents.get(0).offsetHeight;
$('> div', slidercontents).css('top', '-' + containerHeight + 'px');
$('> div:eq(' + index + ')', slidercontents).stop(false, true).animate({ 'top': top }, speed, function() { scrolling = false; });
}
/*horizontal*/
if (settings.orientation == 'h') {
left = $('> div:eq(' + index + ')', slidercontents).css('left');
containerWidth = slidercontents.width();
height = slidercontents.get(0).offsetHeight;
$('> div', slidercontents).css('left', '-' + containerWidth + 'px');
$('> div:eq(' + index + ')', slidercontents).stop(false, true).animate({ left: 0 }, speed, function() { scrolling = false; });
}
$('> div:eq(' + index + ')', slidercontents).addClass('visible').removeClass('hidden');
slider.mouseenter(function() { if (settings.autoscroll) stopAnimate(); }).mouseleave(function() { if (settings.autoscroll) animate(); });
if (settings.autoscroll)
animate();
forwardbutton.click(function() {
if (!scrolling) {
direction = "forward";
if (settings.circular)
if (index <= 0) index = noOfBlocks;
showThumbs();
}
});
backbutton.click(function() {
if (!scrolling) {
direction = "backward";
if (settings.circular)
if (index >= noOfBlocks - 1) index = -1;
showThumbs();
}
});
}
initialize();
function stopAnimate() {
scrolling = false;
clearTimeout(interval);
slider.children().clearQueue();
slider.children().stop(false, true);
}
function animate() {
clearTimeout(interval);
if (settings.autoscroll)
interval = setTimeout(changeSlide, settings.delay);
}
function changeSlide() {
if (direction == "forward") {
if (index <= 0) index = noOfBlocks;
} else {
if (index >= noOfBlocks - 1) { index = -1; }
}
showThumbs();
interval = setTimeout(changeSlide, settings.delay);
}
function getDimensions(value) {
return value + 'px';
}
function showThumbs() {
scrolling = true;
var current = $('.visible', slidercontents);
var scrollSpeed = speed;
if (direction == "forward") {
index--;
if (index >= 0) {
if (settings.orientation == 'v') {
$('>div:eq(' + index + ')', slidercontents).css('top', getDimensions(containerHeight)).removeClass('hidden').addClass('visible').stop(false, true).animate({ 'top': top }, scrollSpeed, function() { scrolling = false; });
current.stop(false, true).animate({ 'top': '-=' + getDimensions(containerHeight) }, scrollSpeed, function() {
$(this).removeClass('visible').addClass('hidden');
$(this).css('top', top);
scrolling = false;
});
}
else {
$('>div:eq(' + index + ')', slidercontents).css('left', getDimensions(containerWidth)).removeClass('hidden').addClass('visible').stop(false, true).animate({ 'left': '-=' + getDimensions(containerWidth) }, scrollSpeed, function() { scrolling = false; });
current.stop(false, true).animate({ 'left': '-=' + getDimensions(containerWidth) }, scrollSpeed, function() {
$(this).removeClass('visible').addClass('hidden');
$(this).css('left', left);
scrolling = false;
});
}
}
else
index = 0;
}
else if (direction == "backward") {
index++;
if (index < noOfBlocks) {
if (settings.orientation == 'v') {
$('>div:eq(' + index + ')', slidercontents).removeClass('hidden').addClass('visible').css({
'top': getDimensions(-containerHeight)
}).stop(false, true).animate({ 'top': top }, scrollSpeed, function() { scrolling = false; });
current.stop(false, true).animate({ 'top': '+=' + getDimensions(containerHeight) }, scrollSpeed,
function() {
$(this).removeClass('visible').addClass('hidden');
$(this).css('top', getDimensions(-containerHeight));
scrolling = false;
});
}
else {
$('>div:eq(' + index + ')', slidercontents).removeClass('hidden').addClass('visible').css({
'left': getDimensions(-containerWidth)
}).stop(false, true).animate({ 'left': '+=' + getDimensions(containerWidth) }, scrollSpeed, function() { scrolling = false; });
current.stop(false, true).animate({ 'left': '+=' + getDimensions(containerWidth) }, scrollSpeed,
function() {
$(this).removeClass('visible').addClass('hidden');
$(this).css('left', getDimensions(-containerWidth));
scrolling = false;
});
}
} else index = noOfBlocks - 1;
}
}
});
}
});
})(jQuery);
<script type="text/javascript">
$(document).ready(function() {
$('#carouselv').jsCarousel({
autoscroll: true,
itemstodisplay: 3,
scrollspeed: 1500,
delay: 6000
});
});
</script>
<style type="text/css">
#qlink a
{
font-weight:bold;
}
.ql-img
{
padding-right: 10px;
float: left;
width: 50px;
height: 50px;
}
.ql-innertext
{
padding:10px 0;
border-bottom: 1px solid #517da6;
min-height:112px;
}
.jscarousal-vertical
{
margin: 0;
padding: 0;
position: relative;
overflow: hidden;
}
.jscarousal-vertical-back, .jscarousal-vertical-forward
{
width: 100%;
height: 14px;
color: black;
position: relative;
cursor: pointer;
z-index:100;
}
.jscarousal-vertical-back
{
background-image: url(images/qlink_up.jpg);
background-repeat: no-repeat;
background-position: bottom;
}
.jscarousal-vertical-forward
{
background-image: url(images/qlink_down.jpg);
background-repeat: no-repeat;
background-position: top;
}
.jscarousal-contents-vertical
{
overflow: hidden;
height: 410px;
}
.jscarousal-contents-vertical > div
{
position: absolute;
top: 22px;
width: 100%;
height: 820px;
overflow: hidden;
}
.hidden
{
display: none;
}
.visible
{
display: block;
}
</style>
<h3 class="toplong">More Quick Links</h3>
<div id="qlink">
<div id="vWrapper">
<div id="carouselv">
/*Element 1*/
<div class="ql-innertext">
<img />
<span></span>
</div>
/*Element 2*/
<div class="ql-innertext">
<img />
<span></span>
</div>
/*Element 3*/
<div class="ql-innertext">
<img />
<span></span>
</div>
/*Element 4*/
<div class="ql-innertext">
<img />
<span></span>
</div>
/*Element 5*/
<div class="ql-innertext">
<img />
<span></span>
</div>
</div>
</div>
</div>
Do more with
$(document).ready(function(){
var slider=$("#qlink-carousel").bxSlider({
auto:true,
mode: 'vertical',
displaySlideQty: 3,
moveSlideQty: 1,
speed:1500,
controls: false
});
$('.go-prev').click(function(){
slider.goToPreviousSlide();
return false;
});
$('#go-next').click(function(){
slider.goToNextSlide();
return false;
});
});
You would also need to add the two divs for the up and down:<div class="go-prev" style="display: block;" disabled="false"></div>
<div class="go-next" style="display: block;" disabled="false"></div>
<style>
.go-prev {
background: url("../images/qlink_up.gif") no-repeat scroll 0 0 transparent;
cursor: pointer;
height: 14px;
left: 0;
position: absolute;
top: 5px;
width: 240px;
}
.go-next {
background: url("../images/qlink_down.gif") no-repeat scroll 0 0 transparent;
bottom: 5px;
cursor: pointer;
height: 14px;
left: 0;
position: absolute;
width: 240px;
}
</style>
Premium Content
You need an Expert Office subscription to comment.Start Free Trial