"Instagram Profile"
Bootstrap 2.3.2 Snippet by albertobissacco

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<header class="clearfix feed-header" data-role="banner">
<div class="compWrapper">
<div class="compInnerWrapper">
<div class="compContainer" id="cycler1">
<div class="compPhoto compPhoto1">
<a href="#">
<div class="Image iWithTransition">
<img src="http://placehold.it/225x225/888/fff&text=photo1"/>
<b class="compPhotoShadow"></b>
</div>
</a>
</div>
<div class="compPhoto compPhoto2">
<a href="#">
<div class="Image iLoaded iWithTransition">
<img src="http://placehold.it/225x225/545454/fff&text=photo2"/>
<b class="compPhotoShadow"></b>
</div>
</a>
</div>
<div class="compPhoto compPhoto3">
<a href="#" class="">
<div class="Image iWithTransition">
<img src="http://placehold.it/425x425/157B86/fff&text=photo3"/>
<b class="compPhotoShadow"></b>
</div>
</a>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
.feed-header {
margin: 0;
padding: 32px 0 0;
background: #333333 url("//d36xtkk24g8jdx.cloudfront.net/bluebar/dd6cb37/images/profile/noise-black.png") 50% 50%;
background-image: url("//d36xtkk24g8jdx.cloudfront.net/bluebar/dd6cb37/images/profile/profile-header-gradient.png"), url("//d36xtkk24g8jdx.cloudfront.net/bluebar/dd6cb37/images/profile/noise-black.png");
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 3px rgba(0, 0, 0, 0.5) inset;
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 3px rgba(0, 0, 0, 0.5) inset;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 3px rgba(0, 0, 0, 0.5) inset;
position: relative;
overflow: hidden;
}
.feed-photos {
max-width: 1024px;
margin: 0 auto;
background: #eaeaea;
-webkit-border-radius: 0 0 4px 4px;
border-radius: 0 0 4px 4px;
}
.feed-photos {
ul.thumbnails{
margin: 15px 10px;
}
.thumbnail{
background: #fff;
}
}
.profile-user {
position: relative;
max-width: 964px;
min-height: 75px;
margin: 0 auto;
padding: 10px 30px 15px;
border-bottom: 1px solid #d9d9d9;
background: #eeeeee url("//d36xtkk24g8jdx.cloudfront.net/bluebar/dd6cb37/images/bg/white-gradient-200px.png") repeat-x 50% 50%;
-webkit-box-shadow: 1px 0 0 rgba(0, 0, 0, 0.05), -1px 0 0 rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.05);
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
function cycleImages(container){
var $active = container.find('.active');
var $next = ($active.next().length > 0) ? $active.next() : container.find('img:first');
$next.css('z-index',2);//move the next image up the pile
$active.fadeOut(1500,function(){//fade out the top image
$active.css('z-index',1).show().removeClass('active');//reset the z-index and unhide the image
$next.css('z-index',3).addClass('active');//make the next image the top one
});
}
$(document).ready(function(){
setInterval(function(){cycleImages($('#cycler1'))}, 2000);
setInterval(function(){cycleImages($('#cycler2'))}, 3000);
})
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Material Kit PRO BS3
Instagram Style User Online
FB-like profile box
Profile Card

Questions / Comments: