update breadcrumbs to be dynamic, pull in title as last node
team
list
.article .mc_team_list {
padding: 0 0 20px;
font-size: 0;
line-height: 1;
text-align: center;
}
.article .mc_team_list li {
box-sizing: border-box;
display: inline-block;
padding: 0 10px 20px;
width: 100%;
max-width: 220px;
list-style: none;
vertical-align: top;
}
.article .mc_team_list li img {
margin: auto;
width: 100%;
max-width: 220px;
height: auto;
}
.article .mc_team_list a,
.article .mc_team_list img {
position: relative;
display: block;
}
.article .mc_team_list a:after {
content:'';
display: block;
width: 100%;
height: 100%;
top: 0;
left: 0;
position: absolute;
background: transparent;
transition: all 250ms ease;
}
.article .mc_team_list a:hover:after {
background: rgba(255,255,255,0.2);
}
.article .mc_team_list li strong {
display: block;
padding: 20px 0 0;
font-size: 20px;
font-weight: bold;
}<ul class="mc_team_list">
<li>
<a href="#"><img src="" alt=""><strong>View Bio</strong></a>
</li>
<li>
<a href="#"><img src="" alt=""><strong>View Bio</strong></a>
</li>
</ul>attorney scroll
// < attorney page >
var height_of_footer_2 = $('.main_footer').outerHeight() + $('.agency').outerHeight();
var length = $(document).height() - ( height_of_footer_2 + $('.sidebar').offset().top + $('.sb_attorney_image').height() );
$(window).scroll(function () {
var scrollTop = $(window).scrollTop();
var scroll = $(this).scrollTop();
var height = $('.sb_attorney_image').height() + 'px';
var height_of_footer = $('.main_footer').outerHeight() + $('.agency').outerHeight();
if (scroll < height_of_footer) {
$('.sb_attorney_image').css({
'position': 'fixed',
'bottom': '0'
});
} else if (scroll > length) {
$('.sb_attorney_image').css({
'position': 'absolute',
'bottom': '0'
// 'top': 'auto'
});
} else {
$('.sb_attorney_image').css({
'position': 'fixed',
// 'top': '0',
'height': height
});
}
});
// </ attorney page >
// < resize >
$(window).resize(function(){
rTO = setTimeout(function(){
clearTimeout(rTO);
var height_of_footer_2 = $('.main_footer').outerHeight() + $('.agency').outerHeight();
var length = $(document).height() - ( height_of_footer_2 + $('.sidebar').offset().top + $('.sb_attorney_image').height() );
}, 100);
});
// </ resize >attorney bios
css
.sxn_attorneys {
overflow: hidden;
background: #222;
background-size: cover;
}
.sxn_attorneys .sxn_wrap {
max-width: 1640px;
}
.sxn_attorneys .list_attorneys .item_attorney {
position: relative;
display: inline-block;
width: 100px;
height: 100px;
overflow: hidden;
background: #fff;
}
.sxn_attorneys .list_attorneys .item_attorney.active {
background: orange;
}
.sxn_attorneys .list_info .item_info {
display: none;
}
.sxn_attorneys .list_info .item_info.active {
display: block;
}
.sxn_attorneys .list_info p {
}script
// < sxn_attorneys >
$('.sxn_attorneys .list_attorneys .item_attorney').click(function(e) {
e.preventDefault();
e.stopPropagation();
var el_button = $( '.sxn_attorneys .list_attorneys' );
var el_content = $( '.sxn_attorneys .list_info' );
var current_data_index = $(this).data('core-index');
el_button.children().removeClass('active');
$( this ).addClass('active');
el_content.children().removeClass( 'active' );
el_content.find("[data-core-index='" + current_data_index + "']" ).addClass('active');
});
// </ sxn_attorneys >html
<div class="sxn_attorneys"><div class="sxn_wrap">
<ul class="list_attorneys">
<li class="active" data-core-index="1"><a href="#"><span></span></a></li>
<li data-core-index="2"><a href="#"><span></span></a></li>
<li data-core-index="3"><a href="#"><span></span></a></li>
<li data-core-index="4"><a href="#"><span></span></a></li>
<li data-core-index="5"><a href="#"><span></span></a></li>
<li data-core-index="6"><a href="#"><span></span></a></li>
</ul>
<ul class="list_info">
<li class="active" data-core-index="1">
<p>1 Lorum ipsum</p>
</li>
<li data-core-index="2">
<p>2 Lorum ipsum</p>
</li>
<li data-core-index="3">
<p>3 Lorum ipsum</p>
</li>
<li data-core-index="4">
<p>4 Lorum ipsum</p>
</li>
<li data-core-index="5">
<p>5 Lorum ipsum</p>
</li>
<li data-core-index="6">
<p>6 Lorum ipsum</p>
</li>
</ul>
</div></div>
// updated array version
function sxn_core_data_attorneys() {
return array(
// [ id, image, name, title, bio, url ]
[
"id" => 1,
"image" => "attorneys-headshot-1.jpg",
"name" => "name",
"title" => "title",
"bio" => "bio",
"url" => "#"
],
[
"id" => 2,
"image" => "attorneys-headshot-2.jpg",
"name" => "name",
"title" => "title",
"bio" => "bio",
"url" => "#"
],
[
"id" => 3,
"image" => "attorneys-headshot-3.jpg",
"name" => "name",
"title" => "title",
"bio" => "bio",
"url" => "#"
],
[
"id" => 4,
"image" => "attorneys-headshot-4.jpg",
"name" => "name",
"title" => "title",
"bio" => "bio",
"url" => "#"
]
);
}
function sxn_core_attorneys() {
$core_attorneys = sxn_core_data_attorneys();
?> <div class="list_attorneys"> <?php
foreach ( $core_attorneys as $value ) { ?>
<div class="item_attorney <?php if ( $value['id'] == 1 ) { ?> active <?php } ?>" data-core-index='<?php echo $value['id'] ?>'>
<div class='cont_image'>
<img src="<?php echo get_stylesheet_directory_uri(); ?>/img/attorneys/<?php echo $value['image']; ?>" alt="<?php echo $value['name']; ?>">
</div>
</div>
<?php
}
?> </div>
<div class='list_info'>
<?php
foreach ( $core_attorneys as $value ) { ?>
<div class='item_info <?php if ( $value['id'] == 1 ) { ?> active <?php } ?>' data-core-index='<?php echo $value['id'] ?>'>
<div class="block_info">
<div class="element_bucket element_heading">
<div class="cont_name">
<?php echo $value['name']; ?>
</div>
<div class="cont_title">
<?php echo $value['title']; ?>
</div>
</div>
<div class="element_bucket element_bio">
<p>
<?php echo nc_fn_trim_chars( $value['bio'], 430 ); ?> <a href="<?php echo $value['url']; ?>">Learn More</a>
</p>
</div>
</div>
</div>
<?php
} ?>
</div>
<?php
}