I have two div’s but the second div has to be the start-div and the first div should stay at the left of the first div. Any suggestions?


Link


Go to page 5
rel=”5″ is means page 6 when you counting


(function($) {
$.fn.ContentSlider = function(options)
{
var defaults = {
leftBtn : '/contentslider/images/previous.png',
rightBtn : '/contentslider/images/next.png',
width : '900px',
height : '400px',
speed : 400,
easing : 'easeOutQuad',
textResize : false,
IE_h2 : '26px',
IE_p : '11px'
}
var defaultWidth = defaults.width;
var o = $.extend(defaults, options);
var w = parseInt(o.width);
var n = this.children('.cs_wrapper').children('.cs_slider').children('.cs_article').length;
var x = -1*w*n+w; // Minimum left value
var p = parseInt(o.width)/parseInt(defaultWidth);
var thisInstance = this.attr('id');
var inuse = false; // Prevents colliding animations
var currentposition = 0;
function moveSlider(d, b, step)
{

var l = parseInt(b.siblings('.cs_wrapper').children('.cs_slider').css('left'));
if(isNaN(l)) {
var l = 0;
}
var m = 0;
if (isNaN(step))
{
m = (d=='left') ? l-w : l+w;
currentposition = Math.abs(m / w);
}
else
{
m = step*(w*-1);
currentposition = step;
}

if(m=x) {
b
.siblings('.cs_wrapper')
.children('.cs_slider')
.animate({
'left':m+'px'
}, o.speed, o.easing, function() {
inuse=false;
});

if(b.attr('class')=='cs_leftBtn') {
var thisBtn = $('#'+thisInstance+' .cs_leftBtn');
var otherBtn = $('#'+thisInstance+' .cs_rightBtn');
} else {
var thisBtn = $('#'+thisInstance+' .cs_rightBtn');
var otherBtn = $('#'+thisInstance+' .cs_leftBtn');
}
if(m==0||m==x) {
thisBtn.animate({
'opacity':'0'
}, o.speed, o.easing, function() {
thisBtn.hide();
});
}
if(otherBtn.css('opacity')=='0') {
otherBtn.show().animate({
'opacity':'1'
}, {
duration:o.speed,
easing:o.easing
});
}
}
}

function vCenterBtns(b)
{
// Safari and IE don't seem to like the CSS used to vertically center
// the buttons, so we'll force it with this function
var mid = parseInt(o.height)/2;
b
.find('.cs_leftBtn img').css({
'top':mid+'px',
'padding':0
}).end()
.find('.cs_rightBtn img').css({
'top':mid+'px',
'padding':0
});
}

return this.each(function() {

$(this)
// Set the width and height of the div to the defined size
.css({
width:o.width,
height:o.height
})
// Add the buttons to move left and right
.prepend('')
.append('')
// Dig down to the article div elements
.find('.cs_article')
// Set the width and height of the div to the defined size
.css({
width:o.width,
height:o.height
})
.end()
// Animate the entrance of the buttons
.find('.cs_leftBtn')
.css('opacity','0')
.hide()
.end()
.find('.cs_rightBtn')
.hide()
.animate({
'width':'show'
});

// Resize the font to match the bounding box
if(o.textResize===true) {
var h2FontSize = $(this).find('h2').css('font-size');
var pFontSize = $(this).find('p').css('font-size');
$.each(jQuery.browser, function(i) {
if($.browser.msie) {
h2FontSize = o.IE_h2;
pFontSize = o.IE_p;
}
});
$(this).find('h2').css({
'font-size' : parseFloat(h2FontSize)*p+'px',
'margin-left' : '66%'
});
$(this).find('p').css({
'font-size' : parseFloat(pFontSize)*p+'px',
'margin-left' : '66%'
});
$(this).find('.readmore').css({
'font-size' : parseFloat(pFontSize)*p+'px',
'margin-left' : '66%'
});
}

// Store a copy of the button in a variable to pass to moveSlider()
var leftBtn = $(this).children('.cs_leftBtn');
leftBtn.bind('click', function() {
if(inuse===false) {
inuse = true;
moveSlider('right', leftBtn);
}
return false; // Keep the link from firing
});

// Store a copy of the button in a variable to pass to moveSlider()
var rightBtn = $(this).children('.cs_rightBtn');
rightBtn.bind('click', function() {
if(inuse===false) {
inuse=true;
moveSlider('left', rightBtn);
}
return false; // Keep the link from firing
});

$('.slider_menu').click(function(){

if (currentposition != n && currentposition != this.rel)
{
if(inuse===false) {
inuse=true;
if (currentposition < this.rel)
{
moveSlider('left', rightBtn, this.rel);
}
else
{
moveSlider('right', leftBtn, this.rel);
}
return false; // Keep the link from firing
}
}
});

vCenterBtns($(this)); // This is a CSS fix function.
});

}

})(jQuery)


Is there an easy way to generate a link-bar like “article: 1 2 3 4 5″ and go directly to one of the cs_article divs ? I’m not able to evaluate time and effort for that
Thanks in advance and greetings from germany