Twitter Post Fetcher + Bootstrap Quote Carousel
HTML
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
<body>
<section id="testimonials">
<div class="container">
<div class="row">
<div class='col-md-offset-2 col-md-8 text-center'>
<h2>What people are saying on Twitter</h2>
</div>
</div>
<div class='row'>
<div class='col-md-offset-2 col-md-8'>
<div id="testimonials-inner"></div>
</div>
</div>
</div>
</section>
</body>
CSS
/* carousel */
#testimonials {
padding: 0 10px 30px 10px;
margin-top: 30px 0px 0px;
}
/* Control buttons */
#testimonials .carousel-control {
background: none;
color: #222;
font-size: 2.3em;
text-shadow: none;
margin-top: 40px;
}
/* Previous button */
#testimonials .carousel-control.left {
left: -29px;
}
/* Next button */
#testimonials .carousel-control.right {
right: -29px !important;
}
/* Changes the position of the indicators */
#testimonials .carousel-indicators {
right: 50%;
top: auto;
bottom: 0px;
margin-right: -19px;
}
/* Changes the color of the indicators */
#testimonials .carousel-indicators li {
background: #c0c0c0;
}
#testimonials .carousel-indicators .active {
background: #333333;
}
#testimonials img {
width: 100px;
height: 100px
}
.user a span {
display:none;
}
/* Interaction Container and Icons */
.interact {
display:block;
float:right;
margin-right:30px;
font-family:'Fontawesome';
}
.interact a {
text-decoration:none;
}
/* End carousel */
.item blockquote {
border-left: none;
margin: 0;
}
.item blockquote img {
margin-bottom: 10px;
border-radius:50%;
}
.item blockquote p:before {
content:"\f10d";
font-family:'Fontawesome';
float: left;
margin-right: 10px;
}
JavaScript
// When the DOM is ready, run this function
$(document).ready(function () {
//Set the carousel options
$('#testimonials-inner').carousel({
pause: true,
interval: 4000
});
});
/*********************************************************************
* #### Twitter Post Fetcher v10.0 ####
* Coded by Jason Mayes 2013. A present to all the developers out there.
* www.jasonmayes.com
* Please keep this disclaimer with my code if you use it. Thanks. :-)
* Got feedback or questions, ask here:
* http://www.jasonmayes.com/projects/twitterApi/
* Updates will be posted to this site.
*********************************************************************/
var twitterFetcher = function () {
function x(e) {
return e.replace(/<b[^>]*>(.*?)<\/b>/gi, function (c, e) {
return e
}).replace(/class=".*?"|data-query-source=".*?"|dir=".*?"|rel=".*?"/gi, "")
}
function p(e, c) {
for (var g = [], f = RegExp("(^| )" + c + "( |$)"), a = e.getElementsByTagName("*"), h = 0, d = a.length; h < d; h++) f.test(a[h].className) && g.push(a[h]);
return g
}
var y = "",
l = 20,
s = !0,
k = [],
t = !1,
q = !0,
r = !0,
u = null,
v = !0,
z = !0,
w = null,
A = !0;
return {
fetch: function (e, c, g, f, a, h, d, b, m, n) {
void 0 === g && (g = 20);
void 0 === f && (s = !0);
void 0 === a && (a = !0);
void 0 === h && (h = !0);
void 0 === d && (d = "default");
void 0 === b && (b = !0);
void 0 === m && (m = null);
void 0 === n && (n = !0);
t ? k.push({
id: e,
domId: c,
maxTweets: g,
enableLinks: f,
showUser: a,
showTime: h,
dateFunction: d,
showRt: b,
...