2013-02-03, 10:54 AM
Using jQuery Cycle and CSS for a Testimony Slider:
http://www.webdevandphoto.com/?theme=mybbfoundationwp
(see bottom of that page for testimony-slider)
2 issues:
1) The container div height is not adjusting to fit the height of slider content as well as not refreshing the slider width upon resizing the browser.
2) The pagination sprite is not lining up perfect (16x32).
My javascript is as such:
http://jquery.malsup.com/cycle/options.html
I've tried all the resize and fit options without success.
CSS is as such:
And html is as such:
Would appreciate another pair of eyes on this, thank you if you figure out the resize issue and share! it's been driving me nuts for the last 6 or so hours.
Edit:
also put this question on Stackoverflow:
http://stackoverflow.com/questions/14680...it-content
http://www.webdevandphoto.com/?theme=mybbfoundationwp
(see bottom of that page for testimony-slider)
2 issues:
1) The container div height is not adjusting to fit the height of slider content as well as not refreshing the slider width upon resizing the browser.
2) The pagination sprite is not lining up perfect (16x32).
My javascript is as such:
/* ------------------------------------------------------------------------
Testimonmy Slider
* ------------------------------------------------------------------------- */
$(document).ready(function() {
function onAfter(curr, next, opts, fwd) {
var index = opts.currSlide;
$('#prev,#prev2,#prev3,#prev4,#prev5')[index == 0 ? 'hide' : 'show']();
$('#next,#next2,#next3,#next4,#next5')[index == opts.slideCount - 1 ? 'hide' : 'show']();
//get the height of the current slide
var $ht = $(this).height();
//set the container's height to that of the current slide
$(this).parent().animate({height: $ht});
}
$('.testimonials').after('<div class="testimony-nav"> </div>').cycle({
fx: 'fade', // choose your transition type, ex: fade, scrollUp, shuffle, etc...
speed: 'fast',
prev: '#prev',
next: '#next',
pager: '.testimony-nav',
timeout: 4000,
height: 'auto',
pause: 1,
after: onAfter,
cleartypeNoBg: true
});
});
http://jquery.malsup.com/cycle/options.html
I've tried all the resize and fit options without success.
CSS is as such:
/* -----------------------------------------
testimonials
----------------------------------------- */
.testimonials, .testimonials_static {
background:#E7E9E6 url(images/quote.png) 20px 20px no-repeat;
border:1px solid #D8D9D6;
padding-bottom:120px;
margin-bottom:15px;
margin-top: 15px;
}
.blockquote2 {
padding:20px 0 0 80px;
font-family:Georgia, "Times New Roman", Times, serif;
color:#808080;
font-style:italic;
}
.blockquote2 p{
margin: 0 !important;padding: 5px 0 5px 0 !important;
line-height:22px;
font-size: 16px;
font-style: italic;
}
.blockquote2 cite {
font-style: normal;
text-align: right;
text-transform: uppercase;
font-size: 10px;font-weight: bold;
letter-spacing: 1px;
color: #555;
padding-right:6px;
font-family:Arial, Helvetica, sans-serif;
}
.testimony-nav {
width: 100%;
text-align: center;
padding-top: 18px;
}
.testimony-nav a {
display: inline-block;
width:12px;height:12px;
text-indent:-9999em;
outline:none;
background:url(images/pagination.png) 0px 0px no-repeat;
margin-right: 10px;}
.testimony-nav .activeSlide {
background:url(images/pagination.png) 0px -16px no-repeat;
}
And html is as such:
<div class="panel">
<div class="testimonials">
<blockquote class="blockquote2"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ullamcorper dignissim tincidunt. Integer mollis semper massa vitae imperdiet. Suspendisse interdum libero id quam facilisis venenatis eu vel neque. Nam eleifend, lectus in ultricies pellentesque, nulla odio molestie nunc, at fringilla purus enim eget mi. Ut eget lectus odio. Cras dignissim sagittis ligula, ut lacinia enim auctor in. Sed vel augue nunc. Nulla elit quam, bibendum eget vulputate tincidunt, elementum in nunc. Curabitur adipiscing lectus ut quam hendrerit ultricies. Vestibulum aliquam dui nec tellus tristique id tincidunt ante facilisis. Etiam tristique faucibus purus tristique tristique. Morbi sed nulla eget ante iaculis pharetra. -Testimony 1
<cite>–Name - City, State</cite></p></blockquote>
<blockquote class="blockquote2"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eget mi a nibh vulputate ullamcorper quis et nulla. Duis dapibus metus vel arcu sagittis ac ultricies lectus pulvinar. Donec orci dui, molestie nec sodales eu, gravida eget dui. Phasellus sit amet ipsum eget ipsum rhoncus dapibus. Mauris commodo lacus sed urna faucibus venenatis. Praesent vehicula volutpat lorem, quis malesuada turpis ultrices a. Aliquam et eleifend turpis. -Testimony 2
<cite>–Name - City, State</cite></p></blockquote>
<blockquote class="blockquote2"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla in condimentum eros. Curabitur sollicitudin libero eu ligula blandit interdum sodales nisi iaculis. Etiam ullamcorper, augue ut dictum blandit, nibh enim venenatis felis, viverra bibendum justo tellus non libero. Sed semper, ipsum eu vehicula mattis, ante lacus vulputate mauris, in aliquam metus mauris non urna. Morbi vitae risus magna, a feugiat enim. Fusce non eros at leo ultrices interdum. Nam convallis, risus ut placerat sollicitudin, nunc magna egestas nibh, sed adipiscing purus nulla non velit. Sed pretium lorem urna, ac ornare ligula. Etiam iaculis consequat arcu, sed condimentum nisi accumsan vitae. Ut mi ligula, suscipit a auctor fringilla, mollis sed nibh. Nulla facilisi. Suspendisse potenti. Phasellus a libero felis, ac tempor justo. Curabitur commodo metus semper erat consequat mattis. Proin porta sem nisi, vel semper erat. -Testimony 3
<cite>–Name - City, State</cite></p></blockquote>
</div>
</div>
Would appreciate another pair of eyes on this, thank you if you figure out the resize issue and share! it's been driving me nuts for the last 6 or so hours.
Edit:
also put this question on Stackoverflow:
http://stackoverflow.com/questions/14680...it-content