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");
});
});

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