Aoami
I am a FH squatter
- Joined
- Dec 22, 2003
- Messages
- 11,223
trying to acheive this - Content Slider Demonstration | Ennui Design
my code
Javascript
CSS
html
easing script
The issue is this; The right button appears, and when you click it to move to the second article (which it does), the left button is meant to appear (which it doesn't). It's simple as that really. If I delete the following parameters
but the leave the .find('etc'), both buttons appear, but if you get to the 4th article in the list and click to go further than that then it breaks and you cant use the left button to go back. I was thinking of perhaps just making a workaround so it goes back to the first article if you are to press the right arrow on the fourth, but can't work out how to do it.
If anyone can help me with doing that, or fixing the original issue so it works as intended, i'd great appreciate it. Cheers.
my code
Javascript
Code:
(function($) {
$.fn.ContentSlider = function(options)
{
var defaults = {
leftBtn : 'Images/cs_leftImg.jpg',
rightBtn : 'Images/cs_rightImg.jpg',
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
function moveSlider(d, b)
{
var l = parseInt(b.siblings('.cs_wrapper').children('.cs_slider').css('left'));
if(isNaN(l)) {
var l = 0;
}
var m = (d=='left') ? l-w : l+w;
if(m<=0&&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('<a href="#" class="cs_leftBtn"><img src="'+o.leftBtn+'" /></a>')
.append('<a href="#" class="cs_rightBtn"><img src="'+o.rightBtn+'" /></a>')
// 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
});
vCenterBtns($(this)); // This is a CSS fix function.
});
}
})(jQuery)CSS
Code:
/*Featured Content - DO NOT EDIT*/
.contentslider {
position:relative;
display:block;
width:900px;
height:400px;
margin: 0 auto;
overflow:hidden;
}
.cs_wrapper {
position:relative;
display:block;
width:100%;
height:100%;
margin:0;
padding:0;
overflow:hidden;
}
.cs_slider {
position:absolute;
width:10000px;
height:100%;
margin:0;
padding:0;
}
.cs_article {
float: left;
position: relative;
top:0;
left:0;
display:block;
width:900px;
height: 400px;
margin: 0 auto;
padding: 0;
}
.cs_article h2 {
display:block;
width:26%;
margin: 10px 26px 5px 67%;
text-align:left;
}
.cs_article img {
position:absolute;
top:0;
left:0;
width:66%;
border:0;
-ms-interpolation-mode: bicubic;
}
.cs_article p {
display:block;
width:26%;
margin:0 26px 5px 67%;
padding:0;
border:0;
}
.cs_article .readmore{
display:block;
width:26%;
margin:0 26px 0 67%;
text-align: right;
}
.cs_leftBtn, .cs_rightBtn {
position:absolute;
top:0;
height:400px;
padding:10px 0;
z-index:10000;
}
.cs_leftBtn {
left:0;
outline:0;
}
.cs_rightBtn {
right:0;
outline:0;
}
.cs_leftBtn img, .cs_rightBtn img {
border:0;
position:relative;
top:200px;
margin:0px;
}
/*end UNEDITABLE Featured Content*/
/*EDITABLE Featured Content Start*/
.contentslider {
padding:10px; /*Border*/
background:#006; /*Border Colour*/
}
.cs_wrapper, .cs_article {
background: #9F9; /*article BG colou */
}
.cs_leftBtn, .cs_rightBtn {
width:30px;
background: #006; /*same as contentslider colour*/
}
.cs_article h2 {
font-size:200%; /*article heading font size*/
line-height:1.125em;
font-family:Georgia, "Times New Roman", Times, serif;
}
.cs_article h2 a {
text-decoration:none; /*remove link underline*/
color:#333; /*heading link colour*/
}
.cs_article p {
font-size:85%; /*article text size/colour etc*/
line-height:1.5em;
color:#777;
font-family:Georgia, "Times New Roman", Times, serif;
}
.cs_article .readmore{
font-size:80%; /*read more font size*/
font-family:Georgia, "Times New Roman", Times, serif;
}
/*end EDITABLE Featured Content*/html
Code:
<div class="contentslider">
<script type="text/javascript"> //editable portion of featured content
$(function() {
$('.contentslider').ContentSlider({
width : '600px',
height : '266px',
speed : 400,
easing : 'easeOutQuad',
textResize : true
});
});
</script>
<div class="cs_wrapper">
<div class="cs_slider">
<div class="cs_article">
<h2> <a href="http://www.google.com">Article No. 1</a></h2>
<a href="http://www.google.com"><img src="Images/article1.jpg" alt="" /> </a>
<p>Ipsem Lorum Ipsem Lorum Ipsem Lorum Ipsem Lorum Ipsem Lorum Ipsem Lorum</p>
<p>Curabitur eleifend lacinia arcu sed dignissim. Phasellus vulputate, augue nec bibendum dictum, ante orci volutpat neque, sed iaculis sapien odio id lacus.</p>
<a href="http://www.google.com" class="readmore">Read More</a>
</div> <!--end CS article-->
<div class="cs_article">
<h2> <a href="http://www.google.com">Article No. 2</a></h2>
<a href="http://www.google.com"><img src="Images/article1.jpg" alt="" /> </a>
<p>Ipsem Lorum Ipsem Lorum Ipsem Lorum Ipsem Lorum Ipsem Lorum Ipsem Lorum</p>
<p>Curabitur eleifend lacinia arcu sed dignissim. Phasellus vulputate, augue nec bibendum dictum, ante orci volutpat neque, sed iaculis sapien odio id lacus.</p>
<a href="http://www.google.com" class="readmore">Read More</a>
</div> <!--end CS article-->
<div class="cs_article">
<h2> <a href="http://www.google.com">Article No. 3</a></h2>
<a href="http://www.google.com"><img src="Images/article1.jpg" alt="" /> </a>
<p>Ipsem Lorum Ipsem Lorum Ipsem Lorum Ipsem Lorum Ipsem Lorum Ipsem Lorum</p>
<p>Curabitur eleifend lacinia arcu sed dignissim. Phasellus vulputate, augue nec bibendum dictum, ante orci volutpat neque, sed iaculis sapien odio id lacus.</p>
<a href="http://www.google.com" class="readmore">Read More</a>
</div> <!--end CS article-->
<div class="cs_article">
<h2> <a href="http://www.google.com">Article No. 4</a></h2>
<a href="http://www.google.com"><img src="Images/article1.jpg" alt="" /> </a>
<p>Ipsem Lorum Ipsem Lorum Ipsem Lorum Ipsem Lorum Ipsem Lorum Ipsem Lorum</p>
<p>Curabitur eleifend lacinia arcu sed dignissim. Phasellus vulputate, augue nec bibendum dictum, ante orci volutpat neque, sed iaculis sapien odio id lacus.</p>
<a href="http://www.google.com" class="readmore">Read More</a>
</div> <!--end CS article-->
</div> <!--end CS slider-->
</div> <!--end CS wrapper-->
</div> <!--end content slider-->easing script
Code:
jQuery.easing['jswing'] = jQuery.easing['swing'];
jQuery.extend( jQuery.easing,
{
def: 'easeOutQuad',
swing: function (x, t, b, c, d) {
//alert(jQuery.easing.default);
return jQuery.easing[jQuery.easing.def](x, t, b, c, d);
},
easeInQuad: function (x, t, b, c, d) {
return c*(t/=d)*t + b;
},
easeOutQuad: function (x, t, b, c, d) {
return -c *(t/=d)*(t-2) + b;
},
easeInOutQuad: function (x, t, b, c, d) {
if ((t/=d/2) < 1) return c/2*t*t + b;
return -c/2 * ((--t)*(t-2) - 1) + b;
},
easeInCubic: function (x, t, b, c, d) {
return c*(t/=d)*t*t + b;
},
easeOutCubic: function (x, t, b, c, d) {
return c*((t=t/d-1)*t*t + 1) + b;
},
easeInOutCubic: function (x, t, b, c, d) {
if ((t/=d/2) < 1) return c/2*t*t*t + b;
return c/2*((t-=2)*t*t + 2) + b;
},
easeInQuart: function (x, t, b, c, d) {
return c*(t/=d)*t*t*t + b;
},
easeOutQuart: function (x, t, b, c, d) {
return -c * ((t=t/d-1)*t*t*t - 1) + b;
},
easeInOutQuart: function (x, t, b, c, d) {
if ((t/=d/2) < 1) return c/2*t*t*t*t + b;
return -c/2 * ((t-=2)*t*t*t - 2) + b;
},
easeInQuint: function (x, t, b, c, d) {
return c*(t/=d)*t*t*t*t + b;
},
easeOutQuint: function (x, t, b, c, d) {
return c*((t=t/d-1)*t*t*t*t + 1) + b;
},
easeInOutQuint: function (x, t, b, c, d) {
if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b;
return c/2*((t-=2)*t*t*t*t + 2) + b;
},
easeInSine: function (x, t, b, c, d) {
return -c * Math.cos(t/d * (Math.PI/2)) + c + b;
},
easeOutSine: function (x, t, b, c, d) {
return c * Math.sin(t/d * (Math.PI/2)) + b;
},
easeInOutSine: function (x, t, b, c, d) {
return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b;
},
easeInExpo: function (x, t, b, c, d) {
return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b;
},
easeOutExpo: function (x, t, b, c, d) {
return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b;
},
easeInOutExpo: function (x, t, b, c, d) {
if (t==0) return b;
if (t==d) return b+c;
if ((t/=d/2) < 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b;
return c/2 * (-Math.pow(2, -10 * --t) + 2) + b;
},
easeInCirc: function (x, t, b, c, d) {
return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b;
},
easeOutCirc: function (x, t, b, c, d) {
return c * Math.sqrt(1 - (t=t/d-1)*t) + b;
},
easeInOutCirc: function (x, t, b, c, d) {
if ((t/=d/2) < 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b;
return c/2 * (Math.sqrt(1 - (t-=2)*t) + 1) + b;
},
easeInElastic: function (x, t, b, c, d) {
var s=1.70158;var p=0;var a=c;
if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3;
if (a < Math.abs(c)) { a=c; var s=p/4; }
else var s = p/(2*Math.PI) * Math.asin (c/a);
return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
},
easeOutElastic: function (x, t, b, c, d) {
var s=1.70158;var p=0;var a=c;
if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3;
if (a < Math.abs(c)) { a=c; var s=p/4; }
else var s = p/(2*Math.PI) * Math.asin (c/a);
return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
},
easeInOutElastic: function (x, t, b, c, d) {
var s=1.70158;var p=0;var a=c;
if (t==0) return b; if ((t/=d/2)==2) return b+c; if (!p) p=d*(.3*1.5);
if (a < Math.abs(c)) { a=c; var s=p/4; }
else var s = p/(2*Math.PI) * Math.asin (c/a);
if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b;
},
easeInBack: function (x, t, b, c, d, s) {
if (s == undefined) s = 1.70158;
return c*(t/=d)*t*((s+1)*t - s) + b;
},
easeOutBack: function (x, t, b, c, d, s) {
if (s == undefined) s = 1.70158;
return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
},
easeInOutBack: function (x, t, b, c, d, s) {
if (s == undefined) s = 1.70158;
if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
},
easeInBounce: function (x, t, b, c, d) {
return c - jQuery.easing.easeOutBounce (x, d-t, 0, c, d) + b;
},
easeOutBounce: function (x, t, b, c, d) {
if ((t/=d) < (1/2.75)) {
return c*(7.5625*t*t) + b;
} else if (t < (2/2.75)) {
return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
} else if (t < (2.5/2.75)) {
return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
} else {
return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
}
},
easeInOutBounce: function (x, t, b, c, d) {
if (t < d/2) return jQuery.easing.easeInBounce (x, t*2, 0, c, d) * .5 + b;
return jQuery.easing.easeOutBounce (x, t*2-d, 0, c, d) * .5 + c*.5 + b;
}
});The issue is this; The right button appears, and when you click it to move to the second article (which it does), the left button is meant to appear (which it doesn't). It's simple as that really. If I delete the following parameters
Code:
.find('.cs_leftBtn')
.css("opacity",0)
.hide()
.end()
.find('.cs_rightBtn')
.hide()
.animate({ 'width':'show' });If anyone can help me with doing that, or fixing the original issue so it works as intended, i'd great appreciate it. Cheers.