Tutorial & code

Team Gallery

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

VIDEO
CODE

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.

Example

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