I think it would be possible yes. If you look at plugins/buddypress/bp-templates/your bp theme/buddypress/members/members-loop.php for example, you can see the link for the members avatar being created for the members directory page.
Most lightboxes use a data tag to identify that the link is to open in a light box, so you could overload this file and replace the href with the link to the full size avatar and add the data tag as required.
You’d then need to add the Javascript for the lightbox, probably in a plugin and together that should work.
There’s nothing off the shelf that does this though.
However that would stop the current default of clicking on the avatar taking you to the members profile. That might be a problem for you but I guess you could simple add another button to visit the members profile.
Oke, thanks.
But that would mean the image in the members list also becomes a lightbox?
Could you please tell me what I need to change here? I don’t know how to do this.
<li <?php bp_member_class(); ?>>
<div class="item-avatar">
<a href="<?php bp_member_permalink(); ?>"><?php bp_member_avatar(); ?></a>
</div>
You’d need to load the lightbox javascript of your choice and change the link info depending on which lightbox you want to use. It’s going to be different depending on which lightbox you choose to use. You may need to add additional Javascript.
I guess if you installed WP Featherlight then you should just need to add the featherlight attributes as specified in the plugin readme. This isn’t specifically a BuddyPress question, it’s a lightbox question and it’s not something I’ve ever done so you might be better off asking the WP Featherlight developer if you are struggling with their instructions.
What you will need however is details of how to construct the url for the full size avatar image:
<?php $fullsize_avatar_url = bp_core_fetch_avatar( array( 'type' => 'full', 'html' => false, 'item_id' => bp_get_member_user_id() ) ); ?>
So you’d add this as the image that will load into the lightbox.
Hi Debby, I found time to test this, if you install WP Featherlight and then make the following change:
<?php $fullsize_avatar_url = bp_core_fetch_avatar( array( 'type' => 'full', 'html' => false, 'no_grav' => true, 'item_id' => bp_get_member_user_id() ) ); ?>
<li <?php bp_member_class(); ?>>
<div class="item-avatar">
<a href="#" data-featherlight="<?php echo $fullsize_avatar_url; ?>"><?php bp_member_avatar(); ?></a>
</div>
You will have your avatars in lightboxes. However these will probably be small. The default is only 150 pixels.
You can change this with the following setting placed in either your child themes functions.php or a bp-custom.php placed in the plugins directory.
define ( 'BP_AVATAR_FULL_WIDTH', 150 );
define ( 'BP_AVATAR_FULL_HEIGHT', 150 );
change the 150 to your preferred pixel size for the image.
