Tutorial & code

Team Gallery

An interactive gallery using custom CSS JS and Beaver Builder column, text and html modules.

Minimum BB plugin required:      Saved under:  
Skill level:     Contributor: 

Template Location

Bj Custom Rows Nav 1

Video

Notes

This video is old as I covered this before the Beaver Junction plugin was conceived .

See the Team Gallery template in action.

Code

HTML

<img src="https://only.beaverjunction.com/wp-content/uploads/2017/09/mugshots-9-e1504353713593.jpg" data-id="divId2" />

CSS

@media (min-width: 992px)
{
.hideDivs{
display: none;
}
}

@media (max-width: 991px)
{
.designer-right .fl-node-content .fl-rich-text{
background-color: #EAEAEA;
padding: 10px;
}

.fl-node-content img{
pointer-events: none; }  /* Stops the images being clickable on mobile and tablets */ 
}

.fl-col-group-nested .fl-node-content IMG:hover{
border: 1px solid #777;
opacity: 0.85;
cursor: pointer;
}
.fl-col-group-nested .fl-node-content IMG{
border: 1px solid #DDD;
}
.fl-col-group-nested .fl-node-content IMG:active{
position: relative;
top: 1px;
}
img{
padding:0;
margin: 15px 15px 5px 5px;
}

p{
font-size: 17px
}

JavaScript

jQuery(function($){
$(document).ready(function(){
$("#divId4").css("display","block");
$(".fl-builder-edit #divId1").css("display","block");
$(".fl-builder-edit #divId2").css("display","block");
$(".fl-builder-edit #divId3").css("display","block");
$(".fl-builder-edit #divId5").css("display","block");
$(".fl-builder-edit #divId6").css("display","block");
$(".fl-builder-edit #divId7").css("display","block");
$(".fl-builder-edit #divId8").css("display","block");
$(".fl-builder-edit #divId9").css("display","block");
});

$("img").on('click',function(){
var hello = $(this).attr('data-id');
$('.hideDivs').hide(".fadeOut");
$('#'+hello).show(".fadeIn,slow");
});
});

You can support my work by buying the tools I use through my affiliate links:

Exclusive 25% Off These Two Lifetime Deals:

MainWP.   Discount code "digitalfreedoms"
WP Code Box.  Discount  code "beaverjunction"

--------------------------------------------------------------

WP Rocket | ShortPixel | Beaver Builder |

Can you improve this template?

We'd love it if you can so please comment and share.

For help please post to the Beaver Builder Beginners Facebook group or the YouTube video with this post.

Leave a Comment